[Next.js] Access captureUnderscoreErrorException sentry id to give user context about the error #5707
Closed as not planned
Description
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;
};