Error thrown inside useEffect is not sent to Sentry only in Next.js production mode

[mikan3rd]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.42.0

Framework Version

"next": "15.0.4"

Link to Sentry event

https://bizforward.sentry.io/issues/6155743438/events/a1389f97618147fa890ed7ec864d39ca/

Reproduction Example/SDK Setup

import * as Sentry from '@sentry/nextjs';

const SENTRY_ENABLED = process.env.NEXT_PUBLIC_SENTRY_ENABLED === 'true';
const SENTRY_DEBUG = process.env.NEXT_PUBLIC_SENTRY_DEBUG === 'true';
console.log({ SENTRY_ENABLED, SENTRY_DEBUG });

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_APP_ENV,
  sampleRate: 1,
  tracesSampleRate: 1,
  replaysSessionSampleRate: 1,
  replaysOnErrorSampleRate: 1,
  normalizeDepth: 10,
  tracePropagationTargets: [/^\//, '/api/graphql'],

  // https://docs.sentry.io/platforms/javascript/configuration/integrations/#modifying-default-integrations
  defaultIntegrations: false,
  integrations: [
    // default
    Sentry.breadcrumbsIntegration(),
    Sentry.browserApiErrorsIntegration(),
    // Sentry.dedupeIntegration(),  // disabled
    Sentry.functionToStringIntegration(),
    Sentry.globalHandlersIntegration(),
    Sentry.httpContextIntegration(),
    Sentry.inboundFiltersIntegration(),
    Sentry.linkedErrorsIntegration(),

    // trace
    Sentry.browserTracingIntegration(),

    // replay
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: true,
      networkDetailAllowUrls: ['/api/graphql'],
      networkCaptureBodies: true,
    }),
  ],
  debug: SENTRY_DEBUG,
  release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
  enabled: SENTRY_ENABLED,
  beforeSend(event, hint) {
    const errorType = event.exception?.values?.[0]?.type ?? '';
    const errorMessage = event.exception?.values?.[0]?.value ?? '';
    const normalizedMessage = errorMessage.replace(/\d/g, '*');

    //   https://docs.sentry.io/platforms/javascript/guides/node/enriching-events/fingerprinting/#group-errors-with-greater-granularity
    event.fingerprint = ['{{ default }}', errorType, normalizedMessage];

    return event;
  },
});

Steps to Reproduce

1. Write code in your application to throw an Error inside useEffect as follows.

  useEffect(() => {
    throw new Error('useEffect!!!!!');
  }, []);

2. Start the application in development mode by next dev, and confirm that an error occurs in the relevant code and that an Issue is created in Sentry.

3. Create the production build by next build, and start the application in production mode by next start, and confirm that an error occurs in the relevant code but that an Issue is not created in Sentry.

Expected Result

In Next.js production mode, Error should be sent to Sentry.

Actual Result

In Next.js production mode, error is not sent to Sentry.

[Lms24]

Hi @mikan3rd thanks for writing in!

I tried to reproduce this with a minimal NextJS app and interestingly, I encountered the opposite behavior: errors in dev were not captured but errors in prod were captured.

I pushed my reproduction to: https://github.com/Lms24/gh-sentry-javascript-14768-nextjs-useeffect-no-caught-in-prod

Please let me know what to change to reproduce your encountered behaviour or provide your own minimal reproduction as an alternative. Thank you!

[mikan3rd]

Thank you for your confirmation.

After reviewing and investigating the differences between your reproduction and my application, I found that the issue I raised occurs when using the React Error Boundary.
Could you please add the React Error Boundary to your reproduction and confirm that it works?

Also, the following link uses something called Sentry.ErrorBoundary, do I need to use this instead of the regular Error Boundary?
What if I want to define and customize my own ErrorBoundary component?
https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/

[Lms24]

The note on the page you linked states that react will only rethrow a captured error in dev mode: https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#configure

Meaning, it's to be expected that errors caught in an ErrorBoundary are not caught in prod by our global error listeners since they're not rethrown. That's why Sentry.ErrorBoundary exists: It'll capture these errors (and add a lot of component stack information to the error).

Our error boundary let's you define a fallback component to render whatever you want to show in case of an error. If you want to further customize error boundary behaviour or you use your own error boundary, you'll need to call Sentry.captureException manually within your boundary code. I suggest looking at our error boundary code for some inspiration.

Also gonna tag @AbhiPrasad who has more context on error boundaries, just in case that I missed a simpler way how to deal with custom error boundaries.