diff --git a/front/src/composables/useErrorHandler.ts b/front/src/composables/useErrorHandler.ts index 85d49ad2b..9526e1a22 100644 --- a/front/src/composables/useErrorHandler.ts +++ b/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 +async function useErrorHandler (error: Error | BackendError, eventId?: string): Promise +async function useErrorHandler (error: Error | BackendError, eventId?: string): Promise { 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.
To help us understand why it happened, please attach a detailed description of what you did that has triggered the error.') 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 diff --git a/front/src/init/sentry.ts b/front/src/init/sentry.ts index b23febd3c..4fc5fb7f3 100644 --- a/front/src/init/sentry.ts +++ b/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) => ], 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