Next.js Typescript error reporting

_error.tsx

import { captureException, flush } from '@sentry/nextjs';
import NextErrorComponent from 'next/error';
import type { ErrorProps } from 'next/error';
import type { NextPage } from 'next';

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

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

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

AppError.getInitialProps = async (ctx) => {
  const errorInitialProps: AppErrorProps =
    await NextErrorComponent.getInitialProps(ctx);
  errorInitialProps.hasGetInitialPropsRun = true;
  if (ctx.err) {
    captureException(ctx.err);
    await flush(2000);
    return errorInitialProps;
  }
  captureException(
    new Error(`_error.tsx getInitialProps missing data at path: ${ctx.asPath}`)
  );
  await flush(2000);

  return errorInitialProps;
};

export default AppError;

https://gist.github.com/Froelund/4d04d94931fa81a245a7dba8fc90e68a?permalink_comment_id=4291545#gistcomment-4291545 also worked for me. Thanks.

Thanks a lot🙏