Better error handling in getServerSideProps()

[justincy]

Related to #11281

The current pattern for handling errors in getServerSideProps() can only scale if implemented with an HOC that intercepts the error code (you don't want to add that logic for rendering the error page to every page that uses getServerSideProps). It'd be nice if Next just handled it for us via something like this:

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const errorCode = res.ok ? false : res.statusCode
  const json = await res.json()

  return {
    props: { stars: json.stargazers_count },
    error: { code: errorCode, message: 'Error!' }
  }
}

[NathanielHill]

@timneutkens Any plans for this? 🙏

[danielberndt]

You could do something along these lines in your _app.js if you're looking for a single place to do all your error handling:

import Error from "next/error";

function MyApp({Component, pageProps}) {
  if (pageProps.error) {
    return <Error statusCode={pageProps.error.statusCode} title={pageProps.error.message} />;
  }
  return (
    <Component {...pageProps} />
  );
}

export default MyApp;

[Kelt-prog]

Can you show an example of this Error handling implemantation?

[700software]

In a few days I will share. (Was re-writing as the first time I did was for work.)

[pascuflow]

How do you avoid the React Hook "___" is called conditionally. React Hooks must be called in the exact same order in every component render error if you add that pageProps.error conditional?

[PhelixTaken]

In a few days I will share. (Was re-writing as the first time I did was for work.)

May I know if you have an example? I think that you have forgotten it?

[dbacinski]

I have added getServerSideProps wrapper function to catch known errors

export function withError<P extends { [key: string]: unknown }>(gssp: GetServerSideProps<P>) {
    return async (context: GetServerSidePropsContext) => {
        try {
            return await gssp(context);
        } catch (e) {
            if (e instanceof MyError && e?.cause === MyErrorCause.tooManyRequests) {
                context.res.statusCode = 429;
                return { props: { errorStatus: 429 } } as InferGetServerSidePropsType<typeof gssp>; //XXX hack it not to get compilation error on nextpage, error is handled by ErrorBoundary
            } else {
                throw e;
            }
        }
    };
}

use it as:

export const getServerSideProps = withError<{
    success: boolean;
}>(async context => {
   // logic that throws exception goes here

    return {
              props: {
                  success: true
              },
          }
});

error is handled by:

export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps) {
        super(props);

        this.state = {
            hasError: false,
        };
    }

    static getDerivedStateFromError() {
        return {
            hasError: true,
        };
    }

    renderApp = () => {
        return this.state.hasError || this.props.errorStatus ? (
            <Empty
                svgSrc="/svg/not-found.svg"
                svgWidth={300}
                svgHeight={105}
                title={`Error (${
                    this.props.errorStatus ?? 500
                }). Try again later.`}
            />
        ) : (
            this.props.children
        );
    };

    render() {
            this.renderApp()
    }
}