Add JavaScript disabled message and error handling to app div

2024-01-15 16:05:50 +09:00
parent ae28ecaee5
commit 8dc09555fd
2 changed files with 22 additions and 9 deletions
--- a/index.html
+++ b/index.html
@@ -10,7 +10,14 @@
  </head>

  <body>
-    <div id="app"></div>
+    <div id="app">
+      <noscript>
+        <div class="noscript">
+          <h1>JavaScript is disabled</h1>
+          <p>Please enable JavaScript to use this website.</p>
+        </div>
+      </noscript>
+    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,14 +6,20 @@ import { initHotkey } from "./ts/hotkey";
 import { polyfill } from "./ts/polyfill";
 import { watchParamButton } from "./ts/plugins/embedscript";

-polyfill()
+let app: App;
+try {
+    polyfill()

-const app = new App({
-  target: document.getElementById("app"),
-});
+    app = new App({
+      target: document.getElementById("app"),
+    });
    
-loadData()
-initHotkey()
-watchParamButton()
+    loadData()
+    initHotkey()
+    watchParamButton()    
+} catch (error) {
+    console.error(error, error.stack)
+    alert(error)
+}

 export default app;