automatic browser detection

Author: neverRare

deno.json

@@ -73,6 +73,7 @@
     "@std/random": "jsr:@std/random@^0.1.0",
     "@std/regexp": "jsr:@std/regexp@^1.0.1",
     "@std/text": "jsr:@std/text@^1.0.12",
+    "browser-dtector": "npm:browser-dtector@^4.1.0",
     "compromise": "npm:compromise@^14.14.3",
     "esbuild": "npm:esbuild@^0.25.2"
   }

deno.lock

@@ -202,7 +202,9 @@ <h1>An error has occurred</h1>
       <ul>
         <li>What did you do before this error occurred.</li>
         <li>The following error message: <code id="error-code"></code></li>
-        <li>The name of your browser and its version.</li>
+        <li>
+          Your browser and its version: <span id="browser-details"></span>
+        </li>
       </ul>
       <button id="error-close-button">Close</button>
     </dialog>

dist/index.html

@@ -8,6 +8,7 @@ if (LIVE_RELOAD) {
   new EventSource("/esbuild")
     .addEventListener("change", () => location.reload());
 }
+import BrowserDetector from "browser-dtector";
 import { dictionary } from "../dictionary/dictionary.ts";
 import { dictionaryParser } from "../dictionary/parser.ts";
 import PROJECT_DATA from "../project_data.json" with { type: "json" };
@@ -130,6 +131,9 @@ function main(): void {
 
   const errorBox = document.getElementById("error-box") as HTMLDialogElement;
   const errorCode = document.getElementById("error-code") as HTMLElement;
+  const browserDetails = document.getElementById(
+    "browser-details",
+  ) as HTMLElement;
   const errorCloseButton = document.getElementById(
     "error-close-button",
   ) as HTMLButtonElement;
@@ -147,6 +151,8 @@ function main(): void {
   // handle error
   addEventListener("error", (event) => {
     errorCode.innerText = event.message;
+    const details = new BrowserDetector(navigator.userAgent).getBrowserInfo();
+    browserDetails.innerText = `${details.name} ${details.version}`;
     errorBox.showModal();
   });