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";

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

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

 export default app;