Route-level error reporting in error.tsx

src/app/__tests__/error.test.tsx

@@ -0,0 +1,51 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import ErrorBoundary from '../error';
+
+const mockReportError = vi.fn();
+const mockAddBreadcrumb = vi.fn();
+
+vi.mock('@/services/errorReporting', () => ({
+  errorReportingService: {
+    reportError: (...args: any[]) => mockReportError(...args),
+    addBreadcrumb: (...args: any[]) => mockAddBreadcrumb(...args),
+  },
+}));
+
+describe('ErrorBoundary', () => {
+  it('calls reportError when an error is caught', () => {
+    const testError = new Error('Test error');
+    const reset = vi.fn();
+
+    render(<ErrorBoundary error={testError} reset={reset} />);
+
+    expect(mockReportError).toHaveBeenCalledWith(testError, {
+      errorInfo: { componentStack: '' },
+    });
+  });
+
+  it('calls addBreadcrumb when an error is caught', () => {
+    const testError = new Error('Test error');
+    const reset = vi.fn();
+
+    render(<ErrorBoundary error={testError} reset={reset} />);
+
+    expect(mockAddBreadcrumb).toHaveBeenCalledWith('error.tsx', {
+      errorMessage: 'Test error',
+      digest: undefined,
+    });
+  });
+
+  it('passes digest as metadata when available', () => {
+    const testError = new Error('Test error');
+    (testError as any).digest = 'abc123';
+    const reset = vi.fn();
+
+    render(<ErrorBoundary error={testError} reset={reset} />);
+
+    expect(mockReportError).toHaveBeenCalledWith(testError, {
+      errorInfo: { componentStack: '' },
+      digest: 'abc123',
+    });
+  });
+});

src/app/error.tsx

@@ -16,6 +16,10 @@ export default function ErrorBoundary({
       errorMessage: error.message,
       digest: error.digest,
     });
+    errorReportingService.reportError(error, {
+      errorInfo: { componentStack: '' },
+      ...(error.digest ? { digest: error.digest } : {}),
+    });
     console.error(error);
   }, [error]);