From 1bf57d3228d8a035e28d4839191d2debe6579f62 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 19 May 2024 16:25:44 -0600
Subject: [PATCH] add a global error handler

---
 src/main.ts | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 8be1b7b..bd183f3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import { createPinia } from "pinia";
-import { createApp } from "vue";
+import { App as VueApp, ComponentPublicInstance, createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
@@ -145,11 +145,38 @@ library.add(
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import Camera from "simple-vue-camera";
 
-createApp(App)
+// Can trigger this with a 'throw' inside some top-level function, eg. on the HomeView
+function setupGlobalErrorHandler(app: VueApp) {
+  // @ts-expect-error 'cause we cannot see why config is not defined
+  app.config.errorHandler = (
+    err: Error,
+    instance: ComponentPublicInstance | null,
+    info: string,
+  ) => {
+    console.error(
+      "Global Error Handler. Info:",
+      info,
+      "Error:",
+      err,
+      "Instance:",
+      instance,
+    );
+    // Want to show a nice notiwind notification but can't figure out how.
+    alert(
+      (err.message || "Something bad happened") +
+        " - Try reloading or restarting the app.",
+    );
+  };
+}
+
+const app = createApp(App)
   .component("fa", FontAwesomeIcon)
   .component("camera", Camera)
   .use(createPinia())
   .use(VueAxios, axios)
   .use(router)
-  .use(Notifications)
-  .mount("#app");
+  .use(Notifications);
+
+setupGlobalErrorHandler(app);
+
+app.mount("#app");