refactor(ErrorBoundaries): Improve error monitoring and sourcemaps availability (#2854)

## Context

Debugging production errors was difficult due to:
- DevTools panel errors lacked router context in Sentry (only main app
pathname was reported)
- Sourcemaps were not fully available in production (design-system
missing them)

## Description

- Add dedicated DevtoolsErrorBoundary component that captures
MemoryRouter pathname and tags errors with context: 'Devtools'
- Add errorCategory: 'global' tag to main ErrorBoundary for better
Sentry filtering
- Enable sourcemap generation for design-system package
- Remove filesToDeleteAfterUpload from Sentry config to keep sourcemaps
available for self-hosted users

<!-- Linear link -->
Fixes ISSUE-1337

Author: domenicofalco

packages/design-system/vite.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
       fileName: 'index',
       formats: ['es'],
     },
+    sourcemap: true,
     emptyOutDir: false,
     rollupOptions: {
       output: {

src/App.tsx

@@ -8,6 +8,7 @@ import { Panel, PanelGroup } from 'react-resizable-panels'
 import { BrowserRouter, MemoryRouter } from 'react-router-dom'
 
 import { Spinner, ToastContainer } from '~/components/designSystem'
+import { DevtoolsErrorBoundary } from '~/components/developers/DevtoolsErrorBoundary'
 import { DEVTOOL_ROUTE } from '~/components/developers/DevtoolsRouter'
 import { DevtoolsView } from '~/components/developers/DevtoolsView'
 import { ErrorBoundary } from '~/components/ErrorBoundary'
@@ -121,7 +122,9 @@ const App = () => {
                       </div>
                     </Panel>
                     <MemoryRouter initialEntries={[DEVTOOL_ROUTE]}>
-                      <DevtoolsView />
+                      <DevtoolsErrorBoundary>
+                        <DevtoolsView />
+                      </DevtoolsErrorBoundary>
                     </MemoryRouter>
                   </PanelGroup>
                 </AiAgentProvider>

src/components/ErrorBoundary.tsx

@@ -20,6 +20,7 @@ export const ErrorBoundary = ({ children }: ErrorBoundaryProps) => {
         Sentry.withScope((scope) => {
           scope.setLevel('error')
           scope.setTag('errorBoundary', 'App')
+          scope.setTag('errorCategory', 'global')
 
           // Type guard for Error objects
           // Sentry automatically extracts error.message and error.stack for Error objects

src/components/developers/DevtoolsErrorBoundary.tsx

@@ -0,0 +1,59 @@
+import { ApolloError } from '@apollo/client'
+import * as Sentry from '@sentry/react'
+import { ReactNode } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { addToast } from '~/core/apolloClient'
+
+interface DevtoolsErrorBoundaryProps {
+  children: ReactNode
+}
+
+export const DevtoolsErrorBoundary = ({ children }: DevtoolsErrorBoundaryProps) => {
+  const { pathname: devtoolsPathname } = useLocation()
+
+  return (
+    <Sentry.ErrorBoundary
+      beforeCapture={(scope) => {
+        scope.setTag('component', 'DevtoolsErrorBoundary')
+      }}
+      showDialog={false}
+      onError={(error, componentStack, eventId) => {
+        Sentry.withScope((scope) => {
+          scope.setLevel('error')
+          scope.setTag('errorBoundary', 'App')
+          scope.setTag('errorCategory', 'Devtools')
+
+          if (error instanceof Error) {
+            scope.setTag('errorType', error.name || 'UnknownError')
+          } else {
+            scope.setTag('errorType', 'UnknownError')
+            scope.setExtra('error', String(error))
+          }
+
+          scope.setExtra('componentStack', componentStack)
+          scope.setExtra('sentryEventId', eventId)
+
+          // Add both router contexts for debugging
+          if (typeof window !== 'undefined') {
+            scope.setExtra('url', window.location.href)
+            scope.setExtra('pathname', window.location.pathname)
+            scope.setExtra('devtoolsPathname', devtoolsPathname)
+            scope.setExtra('referrer', document.referrer)
+          }
+
+          Sentry.captureException(error)
+        })
+
+        if (!(error instanceof ApolloError)) {
+          addToast({
+            severity: 'danger',
+            translateKey: 'text_622f7a3dc32ce100c46a5154',
+          })
+        }
+      }}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  )
+}

vite.config.ts

@@ -82,8 +82,6 @@ export default defineConfig(({ mode }) => {
         // Upload source maps
         sourcemaps: {
           assets: './dist/**',
-          // Delete source maps after upload (for security)
-          filesToDeleteAfterUpload: './dist/**/*.map',
         },
         telemetry: false,
       }),