Next.js with Sentry (_error.tsx file)

readme.md

Sentry docs

https://docs.sentry.io/platforms/javascript/guides/nextjs/

https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

next-with-sentry (example)

https://gist.github.com/BrunoS3D/6bda5b3d2f6220ac664af16b7e9418ee

Common issues

vercel/next.js#8592import NextErrorComponent, { ErrorProps } from 'next/error';

_error.tsx

import NextErrorComponent, { ErrorProps } from 'next/error';

import { captureException, flush } from '@sentry/nextjs';
import type { NextPage, NextPageContext } from 'next/types';

export interface AppErrorProps extends ErrorProps {
  err?: Error;
  hasGetInitialPropsRun?: boolean;
}

const AppError: NextPage<AppErrorProps> = ({
  statusCode,
  hasGetInitialPropsRun,
  err,
}) => {
  if (!hasGetInitialPropsRun && err) {
    captureException(err);
  }

  return <NextErrorComponent statusCode={statusCode} />;
};

AppError.getInitialProps = async (context: NextPageContext) => {
  const errorInitialProps: AppErrorProps =
    await NextErrorComponent.getInitialProps(context);

  errorInitialProps.hasGetInitialPropsRun = true;

  if (context.err) {
    captureException(context.err);
    await flush(2000);
    return errorInitialProps;
  }

  return errorInitialProps;
};

export default AppError;