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.
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. The error will be reported to Sentry.
1
2
3
4
5
<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. The error will be reported to Sentry.
This is not CSR, it's not necessarily SSR either, it can be either static rendering or SSR.
1
2
3
4
5
<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). The error will be reported to Sentry.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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>
);
};