feat: improve global errors handling

Author: notwindstone

src/App.vue

@@ -293,7 +293,7 @@ window[ApplicationNamespace].functions.changeGlobalStates = changeGlobalState;
   <!-- Global error boundary -->
   <ErrorBoundary>
     <template #default>
-      <Layout v-if="!globalStates.customLayout">
+      <Layout v-if="!globalStates.customLayout" :page="globalStates.page">
         <Router
           v-if="globalStates.page !== 'none'"
           :page="globalStates.page"

src/components/handlers/ErrorBoundary.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref } from "vue";
+import { computed, onErrorCaptured, ref, watchEffect } from "vue";
 import { log } from "@/lib/handlers/log.ts";
 import { extractError } from "@/lib/helpers/extract-error.ts";
 
+const { resetKey } = defineProps<{
+  "resetKey"?: string;
+}>();
 const currentError = ref<{ "name": string; "message": string; "stack": string } | undefined>(undefined);
 
 // Listen for errors
 onErrorCaptured((error: Error) => {
-  log.error("A global error was captured:", JSON.stringify(error));
-  currentError.value = extractError(error);
+  const extractedError = extractError(error);
+
+  log.error(
+    "A global error was captured:",
+    extractedError.name + ":",
+    extractedError.message + ";",
+    "Stack:",
+    extractedError.stack,
+  );
+  currentError.value = extractedError;
 
   // Prevent error from bubbling further
   return false;
@@ -24,6 +35,12 @@ const slotProperties = computed(() => {
 });
 // Show the 'error' template if there is an error
 const slotName = computed(() => (currentError.value ? "error" : "default"));
+
+watchEffect(() => {
+  if (resetKey) {
+    currentError.value = undefined;
+  }
+});
 </script>
 
 <template>

src/components/layout/Layout.vue

@@ -5,7 +5,11 @@ import { ref } from "vue";
 import ContextMenu from "@/components/layout/ContextMenu.vue";
 import { useEventListener } from "@vueuse/core";
 import { ApplicationNamespace } from "@/constants/application.ts";
+import type { RouteType } from "@/types/application/route.type.ts";
 
+const { page } = defineProps<{
+  "page": RouteType;
+}>();
 const contextMenu = ref<{
   "opened": boolean;
   "x"     : number;
@@ -70,7 +74,7 @@ useEventListener(window, "mousedown", (event: MouseEvent) => {
     />
     <Sidebar />
     <!-- Pages error boundary -->
-    <ErrorBoundary>
+    <ErrorBoundary :resetKey="page">
       <template #default>
         <slot />
       </template>

src/lib/launcher/core/download.ts

@@ -148,4 +148,4 @@ async function downloadLibraries(libraries: Library[], version: string) {
       );
     }
   }
-}
+}

src/pages/Home.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 
-import { inject, onMounted } from "vue";
+import { inject } from "vue";
 import type { GlobalStatesChangerType } from "@/types/application/global-states.type.ts";
 import { GlobalStatesChangerContextKey } from "@/constants/application.ts";
 
 const changeGlobalState = inject<GlobalStatesChangerType>(GlobalStatesChangerContextKey);
 
 async function download() { /* TODO */ }
 async function run() { /* TODO */ }
-
-onMounted(() => {
-  throw new Error("myheavyass 🥀");
-});
 </script>
 
 <template>