From 5e12df2143c2d431129c10c3ee9b71a57d60356a Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 5 Jul 2022 19:57:35 -0700
Subject: [PATCH] Finally fix!

---
 packages/backend/src/server/web/boot.js | 219 ++++++++++++------------
 1 file changed, 111 insertions(+), 108 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index ac3f608ae..06da7cee1 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -14,10 +14,10 @@
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
 	window.onerror = (e) => {
-		renderError('SOMETHING_HAPPENED', e);
+		await renderError('SOMETHING_HAPPENED', e);
 	};
 	window.onunhandledrejection = (e) => {
-		renderError('SOMETHING_HAPPENED_IN_PROMISE', e);
+		await renderError('SOMETHING_HAPPENED_IN_PROMISE', e);
 	};
 
 	const v = localStorage.getItem('v') || VERSION;
@@ -47,7 +47,7 @@
 			localStorage.setItem('localeVersion', v);
 		} else {
 			await checkUpdate();
-			renderError('LOCALE_FETCH_FAILED');
+			await renderError('LOCALE_FETCH_FAILED');
 			return;
 		}
 	}
@@ -57,7 +57,7 @@
 	import(`/assets/${CLIENT_ENTRY}`)
 		.catch(async e => {
 			await checkUpdate();
-			renderError('APP_FETCH_FAILED', e);
+			await renderError('APP_FETCH_FAILED', e);
 		})
 	//#endregion
 
@@ -102,112 +102,16 @@
 		document.head.appendChild(style);
 	}
 
-	function renderError(code, details) {
+	async function addStyle(styleText) {
+		let css = document.createElement('style');
+		css.appendChild(document.createTextNode(styleText));
+		document.head.appendChild(css);
+	}
+
+	async function renderError(code, details) {
 		let errorsElement = document.getElementById('errors');
 
 		if (!errorsElement) {
-			document.head.insertAdjacentHTML("beforeend", `
-			<style>
-			* {
-				font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-			}
-
-			body,
-			html {
-				background-color: #222;
-				color: #dfddcc;
-				justify-content: center;
-				margin: auto;
-				width: 80%;
-				padding: 10px;
-				text-align: center;
-			}
-
-			button {
-				border-radius: 999px;
-				padding: 0px 12px 0px 12px;
-				border: none;
-				cursor: pointer;
-				margin-bottom: 12px;
-			}
-
-			.button-big {
-				background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
-				line-height: 50px;
-			}
-
-			.button-big:hover {
-				background: rgb(153, 204, 0);
-			}
-
-			.button-small {
-				background: #444;
-				line-height: 40px;
-			}
-
-			.button-small:hover {
-				background: #555;
-			}
-
-			.button-label-big {
-				color: #222;
-				font-weight: bold;
-				font-size: 20px;
-				padding: 12px;
-			}
-
-			.button-label-small {
-				color: rgb(153, 204, 0);
-				font-size: 16px;
-				padding: 12px;
-			}
-
-			a {
-				color: rgb(134, 179, 0);
-				text-decoration: none;
-			}
-
-			p,
-			li {
-				font-size: 16px;
-			}
-
-			.dont-worry,
-			#msg {
-				font-size: 18px;
-			}
-
-			.icon-warning {
-				color: #dec340;
-				height: 4rem;
-			}
-
-			h1 {
-				font-size: 32px;
-			}
-
-			code {
-				font-family: Fira, FiraCode, monospace;
-			}
-
-			details {
-				background: #333;
-				margin-bottom: 2rem;
-				padding: 0.5rem 1rem;
-				border-radius: 5px;
-				justify-content: center;
-				margin: auto;
-			}
-
-			summary {
-				cursor: pointer;
-			}
-
-			summary > * {
-				display: inline;
-			}
-			</style>
-			`)
 			document.documentElement.innerHTML = `
 			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -242,10 +146,109 @@
 			`;
 			errorsElement = document.getElementById('errors');
 		}
-
 		const detailsElement = document.createElement('details');
 		detailsElement.innerHTML = `<br><summary><code>ERROR CODE: ${code}</code></summary>${JSON.stringify(details)}`;
 		errorsElement.appendChild(detailsElement);
+		await addStyle(`
+		* {
+			font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
+		}
+
+		body,
+		html {
+			background-color: #222;
+			color: #dfddcc;
+			justify-content: center;
+			margin: auto;
+			width: 80%;
+			padding: 10px;
+			text-align: center;
+		}
+
+		button {
+			border-radius: 999px;
+			padding: 0px 12px 0px 12px;
+			border: none;
+			cursor: pointer;
+			margin-bottom: 12px;
+		}
+
+		.button-big {
+			background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
+			line-height: 50px;
+		}
+
+		.button-big:hover {
+			background: rgb(153, 204, 0);
+		}
+
+		.button-small {
+			background: #444;
+			line-height: 40px;
+		}
+
+		.button-small:hover {
+			background: #555;
+		}
+
+		.button-label-big {
+			color: #222;
+			font-weight: bold;
+			font-size: 20px;
+			padding: 12px;
+		}
+
+		.button-label-small {
+			color: rgb(153, 204, 0);
+			font-size: 16px;
+			padding: 12px;
+		}
+
+		a {
+			color: rgb(134, 179, 0);
+			text-decoration: none;
+		}
+
+		p,
+		li {
+			font-size: 16px;
+		}
+
+		.dont-worry,
+		#msg {
+			font-size: 18px;
+		}
+
+		.icon-warning {
+			color: #dec340;
+			height: 4rem;
+		}
+
+		h1 {
+			font-size: 32px;
+		}
+
+		code {
+			font-family: Fira, FiraCode, monospace;
+		}
+
+		details {
+			background: #333;
+			margin-bottom: 2rem;
+			padding: 0.5rem 1rem;
+			border-radius: 5px;
+			justify-content: center;
+			margin: auto;
+		}
+
+		summary {
+			cursor: pointer;
+		}
+
+		summary > * {
+			display: inline;
+		}
+		`)
 	}
 
 	// eslint-disable-next-line no-inner-declarations