[Next.js] Access `captureUnderscoreErrorException` sentry id to give user context about the error

[pradel]

Problem Statement

What I am trying to achieve with this issue is the ability for our users to communicate with us specific sentry error id so we can investigate their issue.

The new Sentry example for next.js recommends using the captureUnderscoreErrorException function to report any error. But this function does not expose the sentry error id.

CustomErrorComponent.getInitialProps = async (contextData) => {
  // In case this is running in a serverless function, await this in order to give Sentry
  // time to send the error before the lambda exits
  await Sentry.captureUnderscoreErrorException(contextData)

  // This will contain the status code of the response
  return NextErrorComponent.getInitialProps(contextData)
}

What I am doing at the moment is smth like this where the sentry error id was passed down to the render view so I could display the sentry id to our users.

MyError.getInitialProps = async (props: NextPageContext) => {
  const { res, err, asPath } = props;
  const errorInitialProps: ErrorProps & {
    hasGetInitialPropsRun?: boolean;
  } = await NextErrorComponent.getInitialProps(props);

  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
  // getInitialProps has run
  errorInitialProps.hasGetInitialPropsRun = true;

  // Running on the server, the response object (`res`) is available.
  //
  // Next.js will pass an err on the server if a page's data fetching methods
  // threw or returned a Promise that rejected
  //
  // Running on the client (browser), Next.js will provide an err if:
  //
  //  - a page's `getInitialProps` threw or returned a Promise that rejected
  //  - an exception was thrown somewhere in the React lifecycle (render,
  //    componentDidMount, etc) that was caught by Next.js's React Error
  //    Boundary. Read more about what types of exceptions are caught by Error
  //    Boundaries: https://reactjs.org/docs/error-boundaries.html

  if (res?.statusCode === 404) {
    // Opinionated: do not record an exception in Sentry for 404
    return { statusCode: 404 };
  }
  if (err) {
    errorInitialProps.sentryErrorId = Sentry.captureException(err);

    // Flushing before returning is necessary if deploying to Vercel, see
    // https://vercel.com/docs/platform/limits#streaming-responses
    await Sentry.flush(2000);

    return errorInitialProps;
  }

  // If this point is reached, getInitialProps was called without any
  // information about what the error might be. This is unexpected and may
  // indicate a bug introduced in Next.js, so record it in Sentry
  errorInitialProps.sentryErrorId = Sentry.captureException(
    new Error(`_error.js getInitialProps missing data at path: ${asPath}`)
  );
  await Sentry.flush(2000);

  // Here errorInitialProps has the sentryErrorId property so it can be used in the react view.
  return errorInitialProps;
};

Solution Brainstorm

Ideally, I would like to be able to do smth like this if that makes sense.

MyError.getInitialProps = async (contextData: NextPageContext) => {
  // In case this is running in a serverless function, await this in order to give Sentry
  // time to send the error before the lambda exits
  const sentryErrorId = await Sentry.captureUnderscoreErrorException(contextData);

  const errorInitialProps = NextErrorComponent.getInitialProps(contextData);
  errorInitialProps.sentryErrorId = sentryErrorId;

  return errorInitialProps;
};

[AbhiPrasad]

I think this is a very reasonable suggestion - will backlog. PRs are welcome! https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/utils/_error.ts is the file you need to update, and then we need to update the docs here: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-a-custom-_error-page

[AnmolBansalDEV]

I'll like to work on this issue

[AbhiPrasad]

@AnmolBansalDEV please feel free. Let us know if you need any help!