ui: fix heatmaps crash

frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx

@@ -43,7 +43,7 @@ function ClickMapRagePicker() {
       <Checkbox onChange={onToggle} label={t('Include rage clicks')} />
 
       <Button size="small" onClick={refreshHeatmapSession}>
-        {t('Get new session')}
+        {t('Get new image')}
       </Button>
     </div>
   );

frontend/app/locales/en.json

@@ -503,7 +503,7 @@
   "Returning users between": "Returning users between",
   "Sessions": "Sessions",
   "No recordings found.": "No recordings found.",
-  "Get new session": "Get new session",
+  "Get new image": "Get new image",
   "The number of cards in one dashboard is limited to 30.": "The number of cards in one dashboard is limited to 30.",
   "Add Card": "Add Card",
   "Create Dashboard": "Create Dashboard",

frontend/app/locales/es.json

@@ -503,7 +503,7 @@
   "Returning users between": "Usuarios recurrentes entre",
   "Sessions": "Sesiones",
   "No recordings found.": "No se encontraron grabaciones.",
-  "Get new session": "Obtener nueva sesión",
+  "Get new image": "Obtener nueva sesión",
   "The number of cards in one dashboard is limited to 30.": "El número de tarjetas en un panel está limitado a 30.",
   "Add Card": "Agregar tarjeta",
   "Create Dashboard": "Crear panel",

frontend/app/locales/fr.json

@@ -503,7 +503,7 @@
   "Returning users between": "Utilisateurs récurrents entre",
   "Sessions": "Sessions",
   "No recordings found.": "Aucun enregistrement trouvé.",
-  "Get new session": "Obtenir une nouvelle session",
+  "Get new image": "Obtenir une nouvelle session",
   "The number of cards in one dashboard is limited to 30.": "Le nombre de cartes dans un tableau de bord est limité à 30.",
   "Add Card": "Ajouter une carte",
   "Create Dashboard": "Créer un tableau de bord",

frontend/app/locales/ru.json

@@ -504,7 +504,7 @@
   "Returning users between": "Возвращающиеся пользователи за период",
   "Sessions": "Сессии",
   "No recordings found.": "Записей не найдено.",
-  "Get new session": "Получить новую сессию",
+  "Get new image": "Получить новую сессию",
   "The number of cards in one dashboard is limited to 30.": "Количество карточек в одном дашборде ограничено 30.",
   "Add Card": "Добавить карточку",
   "Create Dashboard": "Создать дашборд",
@@ -1498,5 +1498,8 @@
   "More attribute": "Еще атрибут",
   "More attributes": "Еще атрибуты",
   "Account settings updated successfully": "Настройки аккаунта успешно обновлены",
-  "Include rage clicks": "Включить невыносимые клики"
-} 
+  "Include rage clicks": "Включить невыносимые клики",
+  "Interface Language": "Язык интерфейса",
+  "Select the language in which OpenReplay will appear.": "Выберите язык, на котором будет отображаться OpenReplay.",
+  "Language": "Язык"
+}

frontend/app/locales/zh.json

@@ -503,7 +503,7 @@
   "Returning users between": "回访用户区间",
   "Sessions": "会话",
   "No recordings found.": "未找到录制。",
-  "Get new session": "获取新会话",
+  "Get new image": "获取新会话",
   "The number of cards in one dashboard is limited to 30.": "一个仪表板最多可包含30个卡片。",
   "Add Card": "添加卡片",
   "Create Dashboard": "创建仪表板",

frontend/app/player/web/addons/simpleHeatmap.ts

@@ -140,11 +140,16 @@ class SimpleHeatmap {
       ctx.drawImage(this.circle, p[0] - this.r, p[1] - this.r);
     });
 
-    const colored = ctx.getImageData(0, 0, this.width, this.height);
-    this.colorize(colored.data, this.grad);
-    ctx.putImageData(colored, 0, 0);
-
-    return this;
+    try {
+      const colored = ctx.getImageData(0, 0, this.width, this.height);
+      this.colorize(colored.data, this.grad);
+      ctx.putImageData(colored, 0, 0);
+    } catch (e) {
+      // usually happens if session is corrupted ?
+      console.error('Error while colorizing heatmap:', e);
+    } finally {
+      return this;
+    }
   }
 
   private colorize(