diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index a361d3d..b6e0ee9 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -1,8 +1,15 @@ -import NextErrorComponent from "next/error"; - +import { NextPage, NextPageContext } from "next"; +import NextErrorComponent, { ErrorProps } from "next/error"; import * as Sentry from "@sentry/nextjs"; -const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => { +type MyErrorProps = ErrorProps & { + hasGetInitialPropsRun: boolean; + err: Error & { + statusCode?: number; + }; +}; + +const MyError: NextPage = ({ statusCode, hasGetInitialPropsRun, err }) => { if (!hasGetInitialPropsRun && err) { // getInitialProps is not called in case of // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass @@ -10,19 +17,18 @@ const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => { Sentry.captureException(err); // Flushing is not required in this case as it only happens on the client } - return ; }; -MyError.getInitialProps = async ({ res, err, asPath }) => { - const errorInitialProps = await NextErrorComponent.getInitialProps({ - res, +MyError.getInitialProps = async (context: NextPageContext) => { + const { err, asPath } = context; + const defaultProps = await NextErrorComponent.getInitialProps(context); + const errorInitialProps: MyErrorProps = { + ...defaultProps, err, - }); - - // Workaround for https://github.com/vercel/next.js/issues/8592, mark when - // getInitialProps has run - errorInitialProps.hasGetInitialPropsRun = true; + // Workaround for https://github.com/vercel/next.js/issues/8592, mark when + hasGetInitialPropsRun: true, + }; // Running on the server, the response object (`res`) is available. // @@ -39,11 +45,9 @@ MyError.getInitialProps = async ({ res, err, asPath }) => { if (err) { 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; }