From b091d4f298e435ee70fa419e61a9bd7554af275c Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 9 Apr 2024 13:25:27 +0200
Subject: [PATCH] Write log on translation error (#20430)

* Write log on translation error

* Update ha-config-devices-dashboard.ts

---------

Co-authored-by: Franck Nijhof <git@frenck.dev>
---
 src/common/translations/localize.ts         | 15 ++++++++++++---
 src/layouts/hass-tabs-subpage-data-table.ts |  8 ++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index ac1d759efd..f88e03691b 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -2,6 +2,7 @@ import IntlMessageFormat from "intl-messageformat";
 import type { HTMLTemplateResult } from "lit";
 import { polyfillLocaleData } from "../../resources/locale-data-polyfill";
 import { Resources, TranslationDict } from "../../types";
+import { fireEvent } from "../dom/fire_event";
 
 // Exclude some patterns from key type checking for now
 // These are intended to be removed as errors are fixed
@@ -81,7 +82,9 @@ export interface FormatsType {
  */
 
 export const computeLocalize = async <Keys extends string = LocalizeKeys>(
-  cache: any,
+  cache: HTMLElement & {
+    _localizationCache?: Record<string, IntlMessageFormat>;
+  },
   language: string,
   resources: Resources,
   formats?: FormatsType
@@ -107,7 +110,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
     }
 
     const messageKey = key + translatedValue;
-    let translatedMessage = cache._localizationCache[messageKey] as
+    let translatedMessage = cache._localizationCache![messageKey] as
       | IntlMessageFormat
       | undefined;
 
@@ -121,7 +124,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
       } catch (err: any) {
         return "Translation error: " + err.message;
       }
-      cache._localizationCache[messageKey] = translatedMessage;
+      cache._localizationCache![messageKey] = translatedMessage;
     }
 
     let argObject = {};
@@ -137,6 +140,12 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
     try {
       return translatedMessage.format<string>(argObject) as string;
     } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Translation error", key, language, err);
+      fireEvent(cache, "write_log", {
+        level: "error",
+        message: `Failed to format translation for key '${key}' in language '${language}'. ${err}`,
+      });
       return "Translation " + err;
     }
   };
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 2c7aab1dc1..9880503faf 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -496,9 +496,7 @@ export class HaTabsSubpageDataTable extends LitElement {
       ${this.showFilters && !showPane
         ? html`<ha-dialog
             open
-            .heading=${localize("ui.components.subpage-data-table.filters", {
-              number: this.data.length,
-            })}
+            .heading=${localize("ui.components.subpage-data-table.filters")}
           >
             <ha-dialog-header slot="heading">
               <ha-icon-button
@@ -510,9 +508,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                 )}
               ></ha-icon-button>
               <span slot="title"
-                >${localize("ui.components.subpage-data-table.filters", {
-                  number: this.data.length,
-                })}</span
+                >${localize("ui.components.subpage-data-table.filters")}</span
               >
               ${this.filters
                 ? html`<ha-icon-button