diff --git a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
index 8cca52e402..148ecfcefa 100644
--- a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
@@ -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,
diff --git a/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js b/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
index 69b221e8d4..b172559c19 100644
--- a/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
+++ b/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
@@ -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,
};