Enhance Sentry Client Configuration for Improved Error Handling

- Updated the `beforeSend` function in `sentry.client.config.ts` to improve error filtering by introducing checks for chunk loading errors and validation exceptions. This prevents unnecessary error reporting to Sentry, enhancing the relevance of logged errors.
- Refactored user information retrieval to use a local variable for better clarity and maintainability.

These changes aim to streamline error reporting and improve the overall reliability of the Sentry integration in the client application.

client/plugins/0.error-handler.client.js

@@ -0,0 +1,21 @@
+export default defineNuxtPlugin((nuxtApp) => {
+const router = useRouter()
+
+    router.onError((error) => {
+        if (
+        error.message.includes('Failed to fetch dynamically imported module') ||
+        error.message.includes('Failed to load resource')
+        ) {
+        window.location.reload()
+        }
+    })
+
+    nuxtApp.hook('app:error', (error) => {
+        if (
+        error.message.includes('Loading chunk') ||
+        error.message.includes('Failed to load resource')
+        ) {
+        window.location.reload()
+        }
+    })
+})

client/sentry.client.config.ts

@@ -24,23 +24,37 @@ Sentry.init({
 
   beforeSend (event) {
     if (event.exception?.values?.length) {
+      const errorType = event.exception.values[0]?.type || '';
+      const errorValue = event.exception.values[0]?.value || '';
+      
       // Don't send validation exceptions to Sentry
       if (
-        event.exception.values[0]?.type === 'FetchError'
+        errorType === 'FetchError' &&
-        && (event.exception.values[0]?.value?.includes('422')
+        (errorValue.includes('422') || errorValue.includes('401'))
-          || event.exception.values[0]?.value?.includes('401'))
+      ) {
-      )
         return null
       }
+      
+      // Filter out chunk loading errors
+      if (
+        errorValue.includes('Failed to fetch dynamically imported module') ||
+        errorValue.includes('Loading chunk') ||
+        errorValue.includes('Failed to load resource')
+      ) {
+        return null
+      }
+    }
+
     const authStore = useAuthStore()
     if (authStore.check) {
+      const user = authStore.user as { id?: string; email?: string } | null
       Sentry.setUser({
-        id: authStore.user?.id,
+        id: user?.id,
-        email: authStore.user?.email
+        email: user?.email
       })
       event.user = {
-        id: authStore.user?.id,
+        id: user?.id,
-        email: authStore.user?.email
+        email: user?.email
       }
     }
     return event