add global error comp and sentry

Author: Rajgupta36

frontend/.gitignore

@@ -46,3 +46,6 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Sentry Config File
+.env.sentry-build-plugin

frontend/__tests__/unit/pages/Contribute.test.tsx

@@ -110,7 +110,7 @@ describe('Contribute Component', () => {
 
   test('handles pagination for first page', async () => {
     ;(fetchAlgoliaData as jest.Mock).mockResolvedValue({
-      ...mockContributeData,
+      hits: mockContributeData.issues,
       totalPages: 2,
       currentPage: 1,
     })

frontend/__tests__/unit/pages/global-error.test.tsx

@@ -0,0 +1,122 @@
+import { addToast } from '@heroui/toast'
+import * as Sentry from '@sentry/nextjs'
+import { screen, fireEvent } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import { render } from 'wrappers/testUtil'
+import {
+  ErrorDisplay,
+  handleAppError,
+  AppError,
+  ErrorWrapper,
+  ERROR_CONFIGS,
+} from 'app/global-error'
+import GlobalError from 'app/global-error'
+
+// Mocks
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}))
+jest.mock('@sentry/nextjs', () => ({
+  captureException: jest.fn(),
+  ErrorBoundary: ({ _fallback, children }) => <>{children}</>,
+}))
+jest.mock('@heroui/toast', () => ({
+  addToast: jest.fn(),
+}))
+
+describe('ErrorDisplay Component', () => {
+  test('renders correct error details', () => {
+    render(<ErrorDisplay statusCode={404} title="Not Found" message="Page not found" />)
+
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByText('Not Found')).toBeInTheDocument()
+    expect(screen.getByText('Page not found')).toBeInTheDocument()
+  })
+
+  test('navigates to home on button press', () => {
+    const pushMock = jest.fn()
+    ;(useRouter as jest.Mock).mockReturnValue({ push: pushMock })
+
+    render(<ErrorDisplay {...ERROR_CONFIGS['404']} />)
+
+    fireEvent.click(screen.getByText('Return To Home'))
+    expect(pushMock).toHaveBeenCalledWith('/')
+  })
+})
+
+describe('handleAppError Function', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('handles AppError without Sentry for 404', () => {
+    const error = new AppError(404, 'Page not found')
+    handleAppError(error)
+
+    expect(Sentry.captureException).not.toHaveBeenCalled()
+    expect(addToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Page Not Found',
+        description: 'Page not found',
+      })
+    )
+  })
+
+  test('handles unknown error and calls Sentry for 500+', () => {
+    handleAppError('Unknown crash')
+
+    expect(Sentry.captureException).toHaveBeenCalled()
+    expect(addToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        description: 'An unexpected server error occurred.',
+        shouldShowTimeoutProgress: true,
+        timeout: 5000,
+        title: 'Server Error',
+      })
+    )
+  })
+
+  test('handles normal Error instance', () => {
+    const err = new Error('Oops')
+    handleAppError(err)
+
+    expect(Sentry.captureException).toHaveBeenCalledWith(err)
+    expect(addToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        description: 'Oops',
+      })
+    )
+  })
+})
+
+describe('AppError class', () => {
+  test('should extend Error properly', () => {
+    const err = new AppError(403, 'Forbidden')
+    expect(err).toBeInstanceOf(Error)
+    expect(err.name).toBe('AppError')
+    expect(err.message).toBe('Forbidden')
+    expect(err.statusCode).toBe(403)
+  })
+})
+
+describe('GlobalError component', () => {
+  test('renders 500 fallback and calls Sentry', () => {
+    const error = new Error('Critical failure')
+    render(<GlobalError error={error} />)
+
+    expect(Sentry.captureException).toHaveBeenCalledWith(error)
+    expect(screen.getByText('Server Error')).toBeInTheDocument()
+  })
+})
+
+describe('ErrorWrapper component', () => {
+  test('renders children without crashing', () => {
+    render(
+      <ErrorWrapper>
+        <div>App Content</div>
+      </ErrorWrapper>
+    )
+
+    expect(screen.getByText('App Content')).toBeInTheDocument()
+  })
+})

frontend/jest.config.ts

@@ -9,8 +9,10 @@ const config: Config = {
     '!src/app/layout.tsx',
     '!src/components/**',
     '!src/hooks/**',
+    '!src/instrumentation.ts',
+    '!src/instrumentation-client.ts',
     '!src/reportWebVitals.ts',
-    '!src/sentry.config.ts',
+    '!src/sentry.server.config.ts',
     '!src/server/**',
     '!src/setupTests.ts',
     '!src/types/**',

frontend/next.config.ts

@@ -1,7 +1,9 @@
+import { withSentryConfig } from '@sentry/nextjs'
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
   images: {
+    // This is a list of remote patterns that Next.js will use to determine if an image is allowed to be loaded from a remote source.
     remotePatterns: [
       {
         protocol: 'https',
@@ -25,4 +27,13 @@ const nextConfig: NextConfig = {
   output: 'standalone',
 }
 
-export default nextConfig
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+  org: 'OWASP',
+  project: 'Nest',
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+  //suppress errors
+  disableLogger: false,
+})

frontend/package.json

@@ -30,7 +30,7 @@
     "@heroui/toast": "^2.0.7",
     "@heroui/tooltip": "^2.2.14",
     "@next/eslint-plugin-next": "^15.3.0",
-    "@sentry/react": "^9.12.0",
+    "@sentry/nextjs": "^9.12.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/leaflet.markercluster": "^1.5.5",
     "@types/lodash": "^4.17.16",