Typing issue with the custom _error page in TypeScript

[simontaisne]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.7.0

Framework Version

12.2.2

Link to Sentry event

No response

Steps to Reproduce

1. Run the wizard command

npx @sentry/wizard -i nextjs

2. Rename the generated_error.js custom page to _error.tsx
3. Provide the ErrorProps type from next/error to the CustomErrorComponent

import NextErrorComponent from 'next/error';
import type { NextPage } from 'next';
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;

Expected Result

No typing issue with TypeScript.

Actual Result

Argument of type 'NextPageContext' is not assignable to parameter of type 'ContextOrProps'.
  Index signature for type 'string' is missing in type 'NextPageContext'.

[simontaisne]

It looks like the typing issue can be fixed this way.

CustomErrorComponent.getInitialProps = async (context) => {
  const errorInitialProps = await NextErrorComponent.getInitialProps(context);

  await Sentry.captureUnderscoreErrorException(errorInitialProps);

  return NextErrorComponent.getInitialProps(context);
};

Not sure if this is expected though?

[AbhiPrasad]

@lobsterkatie could you take a look?

[lobsterkatie]

It looks like the typing issue can be fixed this way.

CustomErrorComponent.getInitialProps = async (context) => {
  const errorInitialProps = await NextErrorComponent.getInitialProps(context);

  await Sentry.captureUnderscoreErrorException(errorInitialProps);

  return NextErrorComponent.getInitialProps(context);
};

Not sure if this is expected though?

The types check, but I would expect you wouldn't get the data you want on your sentry error in that case.

What's happening here is we're running into microsoft/TypeScript#15300. The two solutions I can find are:

1. Remove the index signature from our type.
2. Call our function on a copy of the context object: await Sentry.captureUnderscoreErrorException({ ...contextData }).

All things being equal, 1) is better, because it doesn't require any change on our users' part. I was reluctant to do it, because I expected it to break a case in which someone who still has the legacy captureUnderscoreErrorException in their component function wants to pass custom props from getInitialProps. In other words, I expected it to break the TS version of this (which is why I included the index signature in the first place):

const CustomErrorComponent = (props) => {
  // people might still have this
  Sentry.captureUnderscoreErrorException(props); // I would expect this to error in TS

  console.log(props.stuff);

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

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
  const result = NextErrorComponent.getInitialProps(contextData);
  // IRL this would probably come from a 'fetch' call
  result.stuff = "things";
  return result;
};

As it turns out, though, in order to do that you have to jump through enough hoops that our function doesn't seem to mind:

type GetInitialPropsResult = ErrorProps & { stuff?: string };

const CustomErrorComponent: NextPage<GetInitialPropsResult> = (
  props: GetInitialPropsResult
) => {
  // people might still have this
  Sentry.captureUnderscoreErrorException(props); // I would expect this to error in TS

  console.log(props.stuff);

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

CustomErrorComponent.getInitialProps = async (
  contextData: NextPageContext
): Promise<GetInitialPropsResult> => {
  // 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
  const result = NextErrorComponent.getInitialProps(
    contextData
  ) as GetInitialPropsResult;
  // IRL this would probably come from a 'fetch' call
  result.stuff = "things";
  return result;
};

I will admit I'm still confused why it doesn't mind, but it seems not to mind - our SDK builds, my test app's _error page builds... So I'll pull the index signature.

[Geczy]

ran into this error today @lobsterkatie can you reopen?