Add notification for unhandled errors

front/src/composables/useErrorHandler.ts

@@ -9,11 +9,15 @@ import store from '~/store'
 const { $pgettext } = gettext
 const logger = useLogger()
 
-export default async (error: Error | BackendError) => {
+async function useErrorHandler (error: Error | BackendError): Promise<void>
+async function useErrorHandler (error: Error | BackendError, eventId?: string): Promise<void>
+async function useErrorHandler (error: Error | BackendError, eventId?: string): Promise<void> {
   const title = 'backendErrors' in error
     ? 'Unexpected API error'
     : 'Unexpected error'
 
+  let content = $pgettext('App/Message/Paragraph', 'An unexpected error occured.')
+
   if ('backendErrors' in error) {
     logger.error(title, error, error.backendErrors)
   } else {
@@ -31,8 +35,7 @@ export default async (error: Error | BackendError) => {
 
     const { get } = useCookies()
     if (get(COOKIE) === 'yes') {
-      const eventId = Sentry.captureException(error)
+      content = $pgettext('App/Message/Paragraph', 'An unexpected error occured. <br><sub>To help us understand why it happened, please attach a detailed description of what you did that has triggered the error.</sub>')
-
       const user = store.state.auth.authenticated
         ? {
             name: store.state.auth.username,
@@ -43,13 +46,16 @@ export default async (error: Error | BackendError) => {
       actions.push({
         text: $pgettext('App/Message/Paragraph', 'Leave feedback'),
         class: 'basic red',
-        click: () => Sentry.showReportDialog({ eventId, user })
+        click: () => Sentry.showReportDialog({
+          eventId: eventId ?? Sentry.captureException(error),
+          user
+        })
       })
     }
   }
 
   store.commit('ui/addMessage', {
-    content: $pgettext('App/Message/Paragraph', 'An unexpected error occured.'),
+    content,
     date,
     class: 'error',
     key: `error-${date}`,
@@ -57,3 +63,5 @@ export default async (error: Error | BackendError) => {
     actions
   })
 }
+
+export default useErrorHandler

front/src/init/sentry.ts

@@ -3,6 +3,7 @@ import type { RootState } from '~/store'
 import type { Router } from 'vue-router'
 import type { Store } from 'vuex'
 import { watchEffect, type App } from 'vue'
+import useErrorHandler from '~/composables/useErrorHandler'
 
 export const COOKIE = 'allow-tracing'
 
@@ -28,6 +29,13 @@ const initSentry = async (app: App, router: Router, store: Store<RootState>) =>
     ],
     debug: import.meta.env.DEV,
     environment: import.meta.env.MODE,
+    beforeSend: (event, hint) => {
+      if (event.exception?.values?.some(exception => exception.mechanism?.handled === false) && hint.originalException instanceof Error) {
+        useErrorHandler(hint.originalException, hint.event_id)
+      }
+
+      return event
+    },
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production