fix(reactions): crash when interactionsButton coords are absent
The client may crash whenever a emoji rain animation is triggered, but the interactions button element cannot be located. This happens because the button coordinates are fetched without checking whether the element exists. Get the coordinate fetching method to return null if the interactionsButton element cannot be located, and ignore the emoji rain action if that is the case. Whenever no valid coordinates are found, log an warning so we can track this and figure out what's happening with the button. Fix a few typos in the getInteractionsButtonCoordinates method.
This commit is contained in:
parent
fcbfcb1bbc
commit
66788e9697
@ -1,6 +1,7 @@
|
|||||||
import React, { useRef, useState, useEffect } from 'react';
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
import Settings from '/imports/ui/services/settings';
|
import Settings from '/imports/ui/services/settings';
|
||||||
import Service from './service';
|
import Service from './service';
|
||||||
|
import logger from '/imports/startup/client/logger';
|
||||||
|
|
||||||
const EmojiRain = ({ reactions }) => {
|
const EmojiRain = ({ reactions }) => {
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
@ -12,9 +13,16 @@ const EmojiRain = ({ reactions }) => {
|
|||||||
const { animations } = Settings.application;
|
const { animations } = Settings.application;
|
||||||
|
|
||||||
function createEmojiRain(emoji) {
|
function createEmojiRain(emoji) {
|
||||||
const coord = Service.getInteractionsButtonCoordenates();
|
const coord = Service.getInteractionsButtonCoordinates();
|
||||||
const flyingEmojis = [];
|
const flyingEmojis = [];
|
||||||
|
|
||||||
|
if (coord == null) {
|
||||||
|
logger.warn({
|
||||||
|
logCode: 'interactions_emoji_rain_no_coord',
|
||||||
|
}, 'No coordinates for interactions button, skipping emoji rain');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
for (i = 0; i < NUMBER_OF_EMOJIS; i++) {
|
for (i = 0; i < NUMBER_OF_EMOJIS; i++) {
|
||||||
const initialPosition = {
|
const initialPosition = {
|
||||||
x: coord.x + coord.width / 8,
|
x: coord.x + coord.width / 8,
|
||||||
|
@ -1,9 +1,13 @@
|
|||||||
const getInteractionsButtonCoordenates = () => {
|
const getInteractionsButtonCoordinates = () => {
|
||||||
const el = document.getElementById('interactionsButton');
|
const el = document.getElementById('interactionsButton');
|
||||||
const coordenada = el.getBoundingClientRect();
|
|
||||||
return coordenada;
|
if (!el) return null;
|
||||||
|
|
||||||
|
const coordinate = el.getBoundingClientRect();
|
||||||
|
|
||||||
|
return coordinate;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
getInteractionsButtonCoordenates,
|
getInteractionsButtonCoordinates,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user