Add error handling infra

SkyfallWasTaken · Dec 30, 2024 · 83b98b1 · 83b98b1
1 parent 832d7b4
commit 83b98b1
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -45,11 +45,14 @@
   "dependencies": {
     "@webext-core/messaging": "^2.1.0",
     "common-tags": "^1.8.2",
-    "lucide-svelte": "^0.468.0",
+    "lucide-svelte": "^0.469.0",
     "p-wait-for": "^5.0.2",
     "set-interval-async": "^3.0.3"
   },
   "trustedDependencies": [
+    "dtrace-provider",
+    "esbuild",
+    "sharp",
     "spawn-sync"
   ]
 }
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
@@ -6,6 +6,10 @@ import { get } from "svelte/store";
 
 export default defineBackground(() => {
   log.info("Background script loaded");
+
+  globalThis.addEventListener("error", onError);
+  i2bMessenger.onMessage("error", async (message) => onError(message.data));
+
   const wakatime = new WakaTime(get(wakaApiKey)!, get(apiUrl)!);
   wakaApiKey.subscribe((value) => {
     if (value) {
@@ -41,5 +45,10 @@ export default defineBackground(() => {
   wakatime.startFlushingHeartbeats();
 });
 
-/* export default defineBackground(() => {
- */
+export function onError(error: ErrorEvent) {
+  const errorMsg = `${error.type}: ${error.message} (at ${error.filename}:${error.lineno}:${error.colno})`;
+  chrome.tabs.create({
+    url: chrome.runtime.getURL(`error.html?error=${encodeURIComponent(errorMsg)}`),
+    active: true
+  });
+}
diff --git a/src/entrypoints/content.ts b/src/entrypoints/content.ts
@@ -7,6 +7,7 @@ export default defineContentScript({
   matches: ["*://*.figma.com/*"],
   async main(ctx) {
     log.info("Content script loaded");
+
     m2iMessenger.onMessage("emitHeartbeat", async (message) => {
       log.debug("I have a heartbeat! Yay!");
       return await i2bMessenger.sendMessage("emitHeartbeat", message.data);
@@ -29,5 +30,8 @@ export default defineContentScript({
         injected = false;
       }
     });
+    ctx.addEventListener(window, 'error', async (event) => {
+      return await i2bMessenger.sendMessage("error", event);
+    });
   },
 });
diff --git a/src/entrypoints/error/App.svelte b/src/entrypoints/error/App.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import "./app.css";
+  import { bugReportUrl } from "@/lib/util";
+
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const errorMsg =
+    urlParams.get("error") ||
+    "Unknown error. When creating a new issue, please make sure to include reproduction steps so we can figure out what's going on.";
+</script>
+
+<h1 class="text-2xl font-semibold">Uh oh, something went wrong!</h1>
+<div class="text-base">
+  <div
+    class="font-mono text-base w-full font-semibold bg-error text-error-content px-4 py-3 rounded-sm shadow"
+  >
+    {errorMsg}
+  </div>
+
+  <p class="mt-4 flex flex-col gap-2">
+    If you're still having issues, please open an issue on GitHub.
+
+    <a
+      class="link"
+      href={bugReportUrl(errorMsg)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <button class="btn btn-primary btn-sm">Report an issue</button>
+    </a>
+  </p>
+</div>
diff --git a/src/entrypoints/error/app.css b/src/entrypoints/error/app.css
@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/src/entrypoints/error/index.html b/src/entrypoints/error/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Error with WakaTime for Figma</title>
+  </head>
+  <body>
+    <div id="app" class="w-full p-6 m-0 flex flex-col gap-3"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/src/entrypoints/error/main.ts b/src/entrypoints/error/main.ts
@@ -0,0 +1,9 @@
+import { mount } from 'svelte';
+import App from './App.svelte';
+import './app.css';
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+});
+
+export default app;
diff --git a/src/lib/messaging/common.ts b/src/lib/messaging/common.ts
@@ -4,4 +4,5 @@ export default interface ProtocolMap {
   emitHeartbeat(partialHeartbeat: PartialHeartbeat): void;
   getDocHash(filekey: string): Promise<string>;
   uninject(data: unknown): void;
+  error(data: ErrorEvent): void;
 }
diff --git a/src/lib/util.ts b/src/lib/util.ts
@@ -26,4 +26,8 @@ export async function base64Encode(str: string) {
     String.fromCharCode(...new Uint8Array(bytes))
   );
   return base64;
+}
+
+export function bugReportUrl(logs: string) {
+  return `https://github.com/SkyfallWasTaken/figma-wakatime/issues/new?labels=bug&projects=&template=bugs.yml&title=%F0%9F%90%9B+[BUG]+-+%3Ctitle%3E&logs=${encodeURIComponent(logs)}`
 }