Clarify global error messages

philer · Nov 29, 2021 · 2b52ddf · 2b52ddf
1 parent aab3873
commit 2b52ddf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -3,11 +3,21 @@
   <head>
     <meta charset="utf-8">
     <title>Karol</title>
+    <script type="module" src="/src/App.tsx"></script>
   </head>
   <body>
-    <p id="bad-browser-warning">
-      This application requires JavaScript and a modern Browser.
-    </p>
-    <script type="module" src="/src/App.tsx"></script>
+    <div id="bad-browser-warning">
+      <p>Looks like the page isn't loading properly. 🤔</p>
+      <p>
+        This application requires JavaScript and a modern browser (try Firefox or Chromium).
+        <br />
+        If you are using an up-to-date browser and the error doesn't go away, you can try an
+        <a href="/karol-releases">older Karol Release</a>.
+      </p>
+      <p>
+        If you think something is broken, please let me know on
+        <a href="https://github.com/philer/karol/issues">Github</a>.
+      </p>
+    </div>
   </body>
 </html>
diff --git a/src/App.module.css b/src/App.module.css
@@ -16,6 +16,5 @@
   color: #49c;
 }
 .error, :global(#bad-browser-warning) {
-  color: #d54;
-  white-space: pre;
+  color: #c43;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -42,9 +42,19 @@ function App() {
   if (hasError) {
     return (
       <div class={style.error}>
-        <p>Something went wrong. 🤔</p>
+        <p>Looks like something went wrong. 🤔</p>
         <p>
-          You can check the browser console (F12) and let me know on{" "}
+          To continue, try reloading the page.
+          <br />
+          If the error doesn't go away, you can try an
+          {" "}
+          <a href="/karol-releases">older Karol Release</a>.
+        </p>
+        <p>
+          To find out more, you can check the browser console (press F12).
+          <br />
+          If you think something is broken, please let me know on
+          {" "}
           <a href="https://github.com/philer/karol/issues">Github</a>.
         </p>
       </div>