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:
prlanzarin 2024-04-11 10:39:21 -03:00
parent fcbfcb1bbc
commit 66788e9697
2 changed files with 17 additions and 5 deletions

View File

@ -1,6 +1,7 @@
import React, { useRef, useState, useEffect } from 'react';
import Settings from '/imports/ui/services/settings';
import Service from './service';
import logger from '/imports/startup/client/logger';
const EmojiRain = ({ reactions }) => {
const containerRef = useRef(null);
@ -12,9 +13,16 @@ const EmojiRain = ({ reactions }) => {
const { animations } = Settings.application;
function createEmojiRain(emoji) {
const coord = Service.getInteractionsButtonCoordenates();
const coord = Service.getInteractionsButtonCoordinates();
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++) {
const initialPosition = {
x: coord.x + coord.width / 8,

View File

@ -1,9 +1,13 @@
const getInteractionsButtonCoordenates = () => {
const getInteractionsButtonCoordinates = () => {
const el = document.getElementById('interactionsButton');
const coordenada = el.getBoundingClientRect();
return coordenada;
if (!el) return null;
const coordinate = el.getBoundingClientRect();
return coordinate;
};
export default {
getInteractionsButtonCoordenates,
getInteractionsButtonCoordinates,
};