Component Stack doesn't appear in Sentry dashboard.

[meotimdihia]

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? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/nextjs

SDK Version

7.39.0

Framework Version

React 18+

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

Problem Statement

Next.js recently added Component Stack for the errors:

• "Hydration failed because the initial UI does not match what was rendered on the server."
• "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering"

This is an error that I can't produce on the client. It just reports once and disappears

Related to these issues:

• Bug: validateDOMNesting Hydration failed facebook/react#24519 (comment)
• Bug: validateDOMNesting Hydration failed facebook/react#24519 (comment)
  

Expected Result

I could see the Component Stack.

Actual Result

[lforst]

I did some investigation on this. Generally, we can only pick up the component stack in dev mode because react will only log the hydration warning containing the component stack in dev mode. This is what the Next.js dev overlay does to display these errors. Next.js patches console.error to listen for a dev hydration warning, parse the stack in the warning, and attach it to the error.

We opened an issue with react (facebook/react#26224) hoping that we can somehow make the component stack available on hydration errors so that we can collect the stack trace even in react production mode.

We'll probably not tackle this right now, as it would only affect Next.js dev mode which is displayed in the overlay.

However, we might think about contributing upstream to attach the component stack to hydration errors.

[AbhiPrasad]

@meotimdihia here's a quick hack to monkeypatch NextJS if you want this to be set on prod Sentry events (but warning, it is very much a HACK, could break at any time)

// sentry.client.config.js
import * as client from "react-dom/client";

const oldClientHydrateRoot = client.hydrateRoot;
client.hydrateRoot = new Proxy(oldClientHydrateRoot, {
  apply: (wrappingTarget, thisArg, args) => {
    const oldOnRecoverableError = args[2].onRecoverableError;

    args[2].onRecoverableError = new Proxy(oldOnRecoverableError, {
      apply: (inner_wrappingTarget, inner_thisArg, inner_args) => {
        const error = inner_args[0];
        const errorInfo = inner_args[1];

        const errorBoundaryError = new Error(error.message);
        errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
        errorBoundaryError.stack = errorInfo.componentStack;

        // Using the `LinkedErrors` integration to link the errors together.
        error.cause = errorBoundaryError;

        Sentry.captureException(error, { contexts: { react: { componentStack } } });
    });

    return wrappingTarget.apply(thisArg, args);
  },
});

// ...

Sentry.init({
  ...

[AbhiPrasad]

Going to close this for now since we are blocked by next.js exposing this for us - feel free to upvote/comment on the GH discussion to get the attention of the Next.js team! vercel/next.js#36641