Client-side errors are reported to monitoring

A server-side Sentry initialization without a client-side counterpart means rendering crashes, JavaScript exceptions, and failed client-side fetches are never reported. CWE-778 (Insufficient Logging) applies to both server and browser contexts — client errors that go unreported are failures with no observable signal. ISO 25010 reliability.fault-tolerance requires fault detection across all execution environments. In practice, many production JavaScript errors — component hydration mismatches, failed dynamic imports, browser-specific rendering bugs — occur exclusively in the browser and are invisible to server-side monitoring alone.

Add sentry.client.config.ts for Next.js to initialize the browser SDK, and forward errors caught by error boundaries to the monitoring service.

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1,
})

In your error boundary:

<ErrorBoundary
  onError={(error, info) => Sentry.captureException(error, { extra: info })}
  fallbackRender={({ resetErrorBoundary }) => (
    <div>Something went wrong. <button onClick={resetErrorBoundary}>Try again</button></div>
  )}
>
  <App />
</ErrorBoundary>

Verify by triggering a deliberate client-side throw in development and confirming it appears in your Sentry issues list.

• ID: saas-error-handling.error-reporting.client-errors-reported

• Severity: low

• What to look for: Check whether the error reporting SDK is initialized on the client side (not just server side). For Sentry on Next.js: look for sentry.client.config.ts with Sentry.init(). For other frameworks: look for SDK initialization in the browser entry point. Check error boundary components — do they call Sentry.captureException(error) or equivalent in componentDidCatch or in the onError prop of react-error-boundary? Check for a global window.addEventListener('error', ...) handler as a fallback.

• Pass criteria: List all client-side error capture mechanisms (SDK init, window.onerror, addEventListener). Pass if the error monitoring SDK is initialized in the browser context AND at least 1 of these is true: error boundaries report caught errors to the SDK, a global window.onerror or addEventListener('error', ...) handler reports uncaught errors to the SDK. Report even on pass: "Client error capture configured via X mechanisms."

• Fail criteria: Fail if the error reporting SDK is only initialized on the server (client errors go unreported). Fail if error boundaries catch errors but don't forward them to any monitoring service. Do NOT pass when a Sentry client config exists but the browser SDK init is missing — the config file alone does not capture errors.

• Skip (N/A) when: No error reporting service is installed (the error-reporting-service check already surfaces this). Skip if that check resulted in fail.

• Detail on fail: "Sentry initialized server-side only; sentry.client.config.ts absent; error boundaries do not call captureException" or "No client-side SDK initialization found; window.onerror handler absent". Max 500 chars.

• Remediation: Server-side error reporting only catches API and SSR errors. Rendering crashes, JavaScript exceptions, and network failures that occur in the browser are invisible without client-side capture.

  For Next.js with Sentry, add sentry.client.config.ts:

  import * as Sentry from '@sentry/nextjs'
  Sentry.init({
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
    tracesSampleRate: 0.1,
  })
  

  In your error boundary, forward caught errors:

  import { ErrorBoundary } from 'react-error-boundary'
  import * as Sentry from '@sentry/nextjs'
  
  <ErrorBoundary
    onError={(error, info) => Sentry.captureException(error, { extra: info })}
    fallbackRender={({ resetErrorBoundary }) => (
      <div>Something went wrong. <button onClick={resetErrorBoundary}>Try again</button></div>
    )}
  >
    <App />
  </ErrorBoundary>