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;

Thanks!

Thanks very much!

Thanks!

Indeed, thanks!

Yes, thank you very much!

thks 👍

Thanks a lot! I have come to an almost identical solution but haven't figured out to make hasGetInitialPropsRun and err optional... Sometimes the solution is so close... You saved me a lot of time :)

getsentry/sentry-docs#5203 (comment)

// _error.tsx
import type { NextPage } from "next";

import NextErrorComponent from "next/error";
import type { ErrorProps } from "next/error";

import * as Sentry from "@sentry/nextjs";

const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => {
  return <NextErrorComponent statusCode={statusCode} />;
};

CustomErrorComponent.getInitialProps = async (context) => {
  await Sentry.captureUnderscoreErrorException(context);

  return NextErrorComponent.getInitialProps(context);
};

export default CustomErrorComponent;

thank you, man ❤️

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

Thanks a lot🙏