enhance(frontend): クライアントエラー画面の多言語対応 (#15411)

* enhance(frontend): クライアントエラー画面のマルチリンガル対応

* Update Changelog

* update message

2 files changed, 35 insertions, 15 deletions

diff --git a/packages/backend/src/server/web/boot.embed.js b/packages/backend/src/server/web/boot.embed.js
index 48d1cd262b..9de1275380 100644
--- a/packages/backend/src/server/web/boot.embed.js
+++ b/packages/backend/src/server/web/boot.embed.js
@@ -114,13 +114,17 @@
 		if (document.readyState === 'loading') {
 			await new Promise(resolve => window.addEventListener('DOMContentLoaded', resolve));
 		}
+
+		const locale = JSON.parse(localStorage.getItem('locale') || '{}');
+
+		const title = locale?._bootErrors?.title || 'Failed to initialize Misskey';
+		const reload = locale?.reload || 'Reload';
+
 		document.body.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 9v4" /><path d="M12 16v.01" /></svg>
-		<div class="message">読み込みに失敗しました</div>
-		<div class="submessage">Failed to initialize Misskey</div>
+		<div class="message">${title}</div>
 		<div class="submessage">Error Code: ${code}</div>
 		<button onclick="location.reload(!0)">
-			<div>リロード</div>
-			<div><small>Reload</small></div>
+			<div>${reload}</div>
 		</button>`;
 		addStyle(`
 		#misskey_app,
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index a04640d993..b55d327f86 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -151,6 +151,22 @@
 			await new Promise(resolve => window.addEventListener('DOMContentLoaded', resolve));
 		}
 
+		const locale = JSON.parse(localStorage.getItem('locale') || '{}');
+
+		const messages = Object.assign({
+			title: 'Failed to initialize Misskey',
+			solution: 'The following actions may solve the problem.',
+			solution1: 'Update your os and browser',
+			solution2: 'Disable an adblocker',
+			solution3: 'Clear the browser cache',
+			solution4: '(Tor Browser) Set dom.webaudio.enabled to true',
+			otherOption: 'Other options',
+			otherOption1: 'Clear preferences and cache',
+			otherOption2: 'Start the simple client',
+			otherOption3: 'Start the repair tool',
+		}, locale?._bootErrors || {});
+		const reload = locale?.reload || 'Reload';
+
 		let errorsElement = document.getElementById('errors');
 
 		if (!errorsElement) {
@@ -160,32 +176,32 @@
 				<path d="M12 9v2m0 4v.01"></path>
 				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
 			</svg>
-			<h1>Failed to load<br>読み込みに失敗しました</h1>
+			<h1>${messages.title}</h1>
 			<button class="button-big" onclick="location.reload(true);">
-				<span class="button-label-big">Reload / リロード</span>
+				<span class="button-label-big">${reload}</span>
 			</button>
-			<p><b>The following actions may solve the problem. / 以下を行うと解決する可能性があります。</b></p>
-			<p>Update your os and browser / ブラウザおよびOSを最新バージョンに更新する</p>
-			<p>Disable an adblocker / アドブロッカーを無効にする</p>
-			<p>Clear the browser cache / ブラウザのキャッシュをクリアする</p>
-			<p>&#40;Tor Browser&#41; Set dom.webaudio.enabled to true / dom.webaudio.enabledをtrueに設定する</p>
+			<p><b>${messages.solution}</b></p>
+			<p>${messages.solution1}</p>
+			<p>${messages.solution2}</p>
+			<p>${messages.solution3}</p>
+			<p>${messages.solution4}</p>
 			<details style="color: #86b300;">
-				<summary>Other options / その他のオプション</summary>
+				<summary>${messages.otherOption}</summary>
 				<a href="/flush">
 					<button class="button-small">
-						<span class="button-label-small">Clear preferences and cache</span>
+						<span class="button-label-small">${messages.otherOption1}</span>
 					</button>
 				</a>
 				<br>
 				<a href="/cli">
 					<button class="button-small">
-						<span class="button-label-small">Start the simple client</span>
+						<span class="button-label-small">${messages.otherOption2}</span>
 					</button>
 				</a>
 				<br>
 				<a href="/bios">
 					<button class="button-small">
-						<span class="button-label-small">Start the repair tool</span>
+						<span class="button-label-small">${messages.otherOption3}</span>
 					</button>
 				</a>
 			</details>