Errors handling examples

It's interesting to know how your app will behave when unexpected things happen.
That's the point of the below examples, they're meant to showcase how the apps behaves in such situations.

Note that it's also interesting to experiment those behaviours in different environments, because they will differ.

404 - Using CSR

This page doesn't exist and should display a 404 page.


            <Btn mode={'primary-outline'}>
              <I18nLink href={'/404-csr'}>This is a client-side navigation (CSR)</I18nLink>
            </Btn>

404 - Using full page reload

This page doesn't exist and should display a 404 page.

This is not CSR, it's not necessarily SSR either, it can be either static rendering or SSR.


            <Btn mode={'primary-outline'}>
              <a href={'/404-static'}>This is a normal navigation</a>
            </Btn>

500 - Top-level error

This page throws an error right from the Page component and should display a 500 page error without anything else (no footer/header).


            const TopLevel500ErrorPage: NextPage<Props> = (props): JSX.Element => {
              if (isBrowser()) {
                // Only throw on browser, otherwise it fails when building the app on Vercel and deployment fails altogether
                throw new Error('Top level 500 error example');
              }

              return (
                <DemoLayout
                  {...props}
                  pageName={'page-500-error'}
                  headProps={{
                    seoTitle: 'Top-level 500 error example - Next Right Now',
                  }}
                  Sidebar={BuiltInUtilitiesSidebar}
                >
                  Top-level 500 error example
                </DemoLayout>
              );
            };

Built-in utilities

Errors handling examples

404 - Using CSR

404 - Using full page reload

500 - Top-level error

Interactive error (simulating User interaction)