feat: Add global error handler (#1834)

index.html

@@ -14,6 +14,8 @@
     <meta name="theme-color" content="#000" />
     <title>VueTorrent</title>
 
+    <script type="module" src="/src/globalErrorHandler.ts"></script>
+
     <!-- PWA setup -->
     <link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials" />
     <script src="registerSW.js"></script>

src/App.vue

@@ -8,7 +8,7 @@ import { formatPercent, formatSpeed } from '@/helpers'
 import { backend } from '@/services/backend'
 import { useAddTorrentStore, useAppStore, useDialogStore, useLogStore, useMaindataStore, usePreferenceStore, useTorrentStore, useVueTorrentStore } from '@/stores'
 import { storeToRefs } from 'pinia'
-import { onBeforeMount, watch, watchEffect } from 'vue'
+import { onBeforeMount, onMounted, watch, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from 'vue3-toastify'
 
@@ -67,6 +67,11 @@ onBeforeMount(() => {
   addLaunchQueueConsumer()
 })
 
+onMounted(() => {
+  // Global error handler flag
+  sessionStorage.setItem('vuetorrent_mounted', 'true')
+})
+
 watch(
   () => appStore.isAuthenticated,
   async isAuthenticated => {

src/globalErrorHandler.ts

@@ -0,0 +1,15 @@
+window.onerror = function (msg, url, line, col, error) {
+  let extra = ''
+
+  // only add 'col' and 'error' if they are available
+  col && (extra += '\ncolumn: ' + col)
+  error && (extra += '\nerror: ' + error)
+
+  const final_message = 'Error: ' + msg + '\nurl: ' + url + '\nline: ' + line + extra
+
+  if (sessionStorage.getItem('vuetorrent_mounted') === 'true') {
+    console.error(final_message)
+  } else {
+    alert(final_message)
+  }
+}