Skip to content

F
frontend
Commit 094530b0 authored by tom's avatar tom
Browse files
Options

404 and 500 error handling components

parent 5f30f3f1
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 27 deletions
icons/error-pages/404.svg 0 → 100644
View file @ 094530b0
<svg viewBox="0 0 201 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.092 85.414c1.267-2.895 1.9-5.993 1.9-9.295V23.881c0-3.302-.633-6.4-1.9-9.295-1.221-2.895-2.917-5.427-5.088-7.598-2.171-2.171-4.704-3.867-7.598-5.088-2.895-1.267-5.993-1.9-9.295-1.9h-4.138C96.67 0 93.55.633 90.61 1.9c-2.895 1.22-5.428 2.917-7.599 5.088-2.17 2.17-3.89 4.703-5.156 7.598-1.221 2.895-1.832 5.993-1.832 9.295v52.238c0 3.302.611 6.4 1.832 9.295 1.267 2.894 2.985 5.427 5.156 7.598 2.171 2.171 4.704 3.89 7.599 5.156C93.55 99.39 96.67 100 99.973 100h4.138c3.302 0 6.4-.61 9.295-1.832 2.894-1.266 5.427-2.985 7.598-5.156 2.171-2.17 3.867-4.704 5.088-7.598Zm-8.073-67.571c.814 1.854 1.221 3.867 1.221 6.038v52.238c0 2.171-.407 4.207-1.221 6.106a16.717 16.717 0 0 1-3.324 4.953c-1.402 1.402-3.053 2.51-4.953 3.324-1.854.814-3.867 1.221-6.038 1.221h-3.324c-2.171 0-4.206-.407-6.106-1.221a16.718 16.718 0 0 1-4.952-3.324 16.718 16.718 0 0 1-3.325-4.953c-.814-1.9-1.22-3.935-1.22-6.106V23.881c0-2.171.406-4.184 1.22-6.038.814-1.9 1.922-3.55 3.325-4.953a16.718 16.718 0 0 1 4.952-3.324c1.9-.814 3.935-1.221 6.106-1.221h3.324c2.171 0 4.184.407 6.038 1.22 1.9.815 3.551 1.923 4.953 3.325 1.402 1.402 2.51 3.053 3.324 4.953Zm-70.19 63.975v16.825a8.752 8.752 0 0 1-8.752-8.752v-8.073H3.275a3.275 3.275 0 0 1-2.85-4.89L42.38 2.836a2.914 2.914 0 0 1 5.45 1.436v69.203h8.345a8.345 8.345 0 0 1-8.345 8.344Zm-8.752-56.513L12.28 73.474h26.797V25.305Zm152.711 56.513v16.825a8.752 8.752 0 0 1-8.752-8.752v-8.073h-35.802a3.275 3.275 0 0 1-2.85-4.89l41.954-74.093a2.914 2.914 0 0 1 5.45 1.436v69.203h8.345a8.345 8.345 0 0 1-8.345 8.344Zm-8.752-56.513-26.798 48.169h26.798V25.305Z" fill="currentColor"/>
</svg>
icons/error-pages/500.svg 0 → 100644
View file @ 094530b0
<svg viewBox="0 0 197 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.363 76.7c0 3.326-.638 6.448-1.914 9.364-1.23 2.917-2.939 5.47-5.127 7.657-2.187 2.187-4.739 3.919-7.656 5.195-2.917 1.23-6.038 1.846-9.365 1.846h-4.17c-3.327 0-6.472-.616-9.434-1.846-2.916-1.276-5.469-3.008-7.656-5.195-2.188-2.188-3.92-4.74-5.195-7.657C72.616 83.148 72 80.026 72 76.7V24.063c0-3.327.615-6.45 1.846-9.366 1.276-2.916 3.007-5.468 5.195-7.656 2.188-2.187 4.74-3.896 7.656-5.127C89.66.638 92.804 0 96.131 0h4.17c3.327 0 6.448.638 9.365 1.914 2.917 1.23 5.469 2.94 7.656 5.127 2.188 2.188 3.897 4.74 5.127 7.656 1.276 2.917 1.914 6.039 1.914 9.366v52.636Zm-8.818-52.638c0-2.187-.41-4.215-1.231-6.084-.82-1.914-1.936-3.577-3.349-4.99-1.413-1.412-3.076-2.529-4.99-3.35-1.869-.82-3.897-1.23-6.084-1.23h-3.35c-2.188 0-4.238.41-6.152 1.23a16.848 16.848 0 0 0-4.99 3.35c-1.413 1.413-2.53 3.076-3.35 4.99-.82 1.869-1.23 3.897-1.23 6.084V76.7c0 2.188.41 4.239 1.23 6.153a16.847 16.847 0 0 0 3.35 4.99 16.847 16.847 0 0 0 4.99 3.35c1.914.82 3.965 1.23 6.152 1.23h3.35c2.187 0 4.215-.41 6.084-1.23 1.914-.82 3.577-1.937 4.99-3.35a16.834 16.834 0 0 0 3.349-4.99c.821-1.915 1.231-3.965 1.231-6.153V24.063ZM52.363 76.7c0 3.327-.638 6.449-1.914 9.365-1.23 2.917-2.94 5.47-5.127 7.657-2.187 2.187-4.74 3.919-7.656 5.195-2.917 1.23-6.038 1.846-9.365 1.846h-4.17c-3.327 0-6.471-.616-9.434-1.846-2.916-1.276-5.468-3.008-7.656-5.195-2.187-2.188-3.92-4.74-5.195-7.657C.616 83.148 0 80.026 0 76.7c0-.83.673-1.504 1.504-1.504h5.81c.831 0 1.504.674 1.504 1.504 0 2.188.41 4.239 1.23 6.153a16.847 16.847 0 0 0 3.35 4.99 16.847 16.847 0 0 0 4.99 3.35c1.915.82 3.965 1.23 6.153 1.23h3.35c2.187 0 4.215-.41 6.084-1.23 1.914-.82 3.577-1.937 4.99-3.35a16.847 16.847 0 0 0 3.35-4.99c.82-1.915 1.23-3.965 1.23-6.153V57.695c0-2.187-.41-4.215-1.23-6.084-.82-1.914-1.937-3.577-3.35-4.99a15.212 15.212 0 0 0-4.99-3.418c-1.869-.82-3.897-1.23-6.084-1.23h-3.35c-2.188 0-4.238.41-6.152 1.23a16.228 16.228 0 0 0-4.99 3.418c-1.413 1.413-2.53 3.076-3.35 4.99a14.485 14.485 0 0 0-1.112 4.09c-.134 1.096-1.014 1.994-2.119 1.994h-4.61a2 2 0 0 1-1.99-2.198l4.85-48.724a6 6 0 0 1 5.97-5.406H47.51a8.408 8.408 0 0 1-8.408 8.408H13.877l-3.213 30.147c2.096-2.005 4.535-3.555 7.315-4.649 2.78-1.139 5.765-1.709 8.955-1.709H28.3c3.327 0 6.448.639 9.365 1.914 2.917 1.231 5.469 2.94 7.656 5.127 2.188 2.188 3.897 4.763 5.127 7.725 1.276 2.917 1.914 6.038 1.914 9.365V76.7Zm142.086 9.365c1.276-2.916 1.914-6.038 1.914-9.365V24.063c0-3.327-.638-6.45-1.914-9.366-1.23-2.916-2.939-5.468-5.127-7.656-2.187-2.187-4.739-3.896-7.656-5.127C178.749.638 175.628 0 172.301 0h-4.17c-3.327 0-6.471.638-9.434 1.914-2.916 1.23-5.468 2.94-7.656 5.127-2.187 2.188-3.919 4.74-5.195 7.656-1.231 2.917-1.846 6.039-1.846 9.366v52.636c0 3.327.615 6.449 1.846 9.365 1.276 2.917 3.008 5.47 5.195 7.657 2.188 2.187 4.74 3.919 7.656 5.195 2.963 1.23 6.107 1.846 9.434 1.846h4.17c3.327 0 6.448-.616 9.365-1.846 2.917-1.276 5.469-3.008 7.656-5.195 2.188-2.188 3.897-4.74 5.127-7.657Zm-8.135-68.085c.821 1.868 1.231 3.896 1.231 6.084V76.7c0 2.188-.41 4.239-1.231 6.153a16.834 16.834 0 0 1-3.349 4.99c-1.413 1.413-3.076 2.53-4.99 3.35-1.869.82-3.897 1.23-6.084 1.23h-3.35c-2.187 0-4.238-.41-6.152-1.23a16.851 16.851 0 0 1-4.991-3.35 16.853 16.853 0 0 1-3.349-4.99c-.82-1.915-1.231-3.965-1.231-6.153V24.063c0-2.188.411-4.216 1.231-6.084.82-1.915 1.937-3.578 3.349-4.99a16.852 16.852 0 0 1 4.991-3.35c1.914-.82 3.965-1.23 6.152-1.23h3.35c2.187 0 4.215.41 6.084 1.23 1.914.82 3.577 1.937 4.99 3.35 1.413 1.412 2.529 3.075 3.349 4.99Z" fill="currentColor"/>
</svg>
lib/appContext.tsx
View file @ 094530b0
......@@ -9,7 +9,7 @@ type Props = {
const AppContext = createContext<PageProps>({ cookies: '', referrer: '' });
export function AppWrapper({ children, pageProps }: Props) {
export function AppContextProvider({ children, pageProps }: Props) {
return (
<AppContext.Provider value={ pageProps }>
{ children }
......
lib/cookies.ts
View file @ 094530b0
......@@ -7,6 +7,7 @@ export enum NAMES {
NAV_BAR_COLLAPSED='nav_bar_collapsed',
API_TOKEN='_explorer_key',
TXS_SORT='txs_sort',
COLOR_MODE='chakra-ui-color-mode',
}
export function get(name?: NAMES | undefined | null, serverCookie?: string) {
......
pages/_app.tsx
View file @ 094530b0
import * as Sentry from '@sentry/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import type { AppProps } from 'next/app';
import React, { useState } from 'react';
import { AppWrapper } from 'lib/appContext';
import { AppContextProvider } from 'lib/appContext';
import { Chakra } from 'lib/Chakra';
import useConfigSentry from 'lib/hooks/useConfigSentry';
import type { ErrorType } from 'lib/hooks/useFetch';
import theme from 'theme';
import AppError from 'ui/shared/AppError';
import ErrorBoundary from 'ui/shared/ErrorBoundary';
function MyApp({ Component, pageProps }: AppProps) {
useConfigSentry();
......@@ -30,15 +33,36 @@ function MyApp({ Component, pageProps }: AppProps) {
},
}));
const renderErrorScreen = React.useCallback(() => {
return (
<AppError
statusCode={ 500 }
height="100vh"
display="flex"
flexDirection="column"
alignItems="flex-start"
justifyContent="center"
width="fit-content"
margin="0 auto"
/>
);
}, []);
const handleError = React.useCallback((error: Error) => {
Sentry.captureException(error);
}, []);
return (
<AppWrapper pageProps={ pageProps }>
<QueryClientProvider client={ queryClient }>
<Chakra theme={ theme } cookies={ pageProps.cookies }>
<Component { ...pageProps }/>
</Chakra>
<ReactQueryDevtools/>
</QueryClientProvider>
</AppWrapper>
<Chakra theme={ theme } cookies={ pageProps.cookies }>
<ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
<AppContextProvider pageProps={ pageProps }>
<QueryClientProvider client={ queryClient }>
<Component { ...pageProps }/>
<ReactQueryDevtools/>
</QueryClientProvider>
</AppContextProvider>
</ErrorBoundary>
</Chakra>
);
}
......
pages/_error.tsx
View file @ 094530b0
......@@ -17,33 +17,54 @@
*/
import * as Sentry from '@sentry/nextjs';
import type { NextPageContext } from 'next';
import type { GetServerSideProps } from 'next';
import NextErrorComponent from 'next/error';
import Head from 'next/head';
import React from 'react';
import sentryConfig from 'configs/sentry/nextjs';
import * as cookies from 'lib/cookies';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
import type { Props as ServerSidePropsCommon } from 'lib/next/getServerSideProps';
import { getServerSideProps as getServerSidePropsCommon } from 'lib/next/getServerSideProps';
import AppError from 'ui/shared/AppError';
import Page from 'ui/shared/Page/Page';
type ContextOrProps = {
req?: NextPageContext['req'];
res?: NextPageContext['res'];
err?: NextPageContext['err'] | string;
pathname?: string;
statusCode?: number;
};
type Props = ServerSidePropsCommon & {
statusCode: number;
}
const CustomErrorComponent = (props: Props) => {
if (props.statusCode === 404) {
const title = getNetworkTitle();
const CustomErrorComponent = (props: { statusCode: number }) => {
return <NextErrorComponent statusCode={ props.statusCode }/>;
return (
<>
<Head>
<title>{ title }</title>
</Head>
<Page>
<AppError statusCode={ 404 } mt="50px"/>
</Page>
</>
);
}
const colorModeCookie = cookies.getFromCookieString(props.cookies, cookies.NAMES.COLOR_MODE);
return <NextErrorComponent statusCode={ props.statusCode } withDarkMode={ colorModeCookie === 'dark' }/>;
};
CustomErrorComponent.getInitialProps = async(contextData: ContextOrProps) => {
export default CustomErrorComponent;
export const getServerSideProps: GetServerSideProps = async(context) => {
Sentry.init(sentryConfig);
// 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);
await Sentry.captureUnderscoreErrorException(context);
// This will contain the status code of the response
return NextErrorComponent.getInitialProps(contextData as NextPageContext);
};
const commonSSPResult = await getServerSidePropsCommon(context);
const commonSSProps = 'props' in commonSSPResult ? commonSSPResult.props : undefined;
export default CustomErrorComponent;
return { props: { ...commonSSProps, statusCode: context.res.statusCode } };
};
theme/components/Heading.ts
View file @ 094530b0
......@@ -10,6 +10,10 @@ const baseStyle: SystemStyleInterpolation = (props) => {
};
const sizes = {
'2xl': defineStyle({
fontSize: '48px',
lineHeight: '60px',
}),
lg: defineStyle({
fontSize: '32px',
lineHeight: '40px',
......
ui/shared/AppError.tsx 0 → 100644
View file @ 094530b0
import { Box, Button, Heading, Icon, Text, chakra } from '@chakra-ui/react';
import React from 'react';
import icon404 from 'icons/error-pages/404.svg';
import icon500 from 'icons/error-pages/500.svg';
import link from 'lib/link/link';
interface Props {
statusCode: number;
className?: string;
}
const ERRORS: Record<string, {icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; text: string; title: string }> = {
'404': {
icon: icon404,
title: 'Page not found',
text: 'This page is no longer explorable! If you are lost, use the search bar to find what you are looking for.',
},
'500': {
icon: icon500,
title: 'Oops! Something went wrong',
text: 'An unexpected error has occurred. Try reloading the page, or come back soon and try again.',
},
};
const AppError = ({ statusCode, className }: Props) => {
const error = ERRORS[String(statusCode)] || ERRORS['500'];
return (
<Box className={ className }>
<Icon as={ error.icon } width="200px" height="auto"/>
<Heading mt={ 8 } size="2xl" fontFamily="body">{ error.title }</Heading>
<Text variant="secondary" mt={ 3 }> { error.text } </Text>
<Button
mt={ 8 }
size="lg"
variant="outline"
as="a"
href={ link('network_index') }
>
Back to home
</Button>
</Box>
);
};
export default chakra(AppError);
ui/shared/ErrorBoundary.tsx 0 → 100644
View file @ 094530b0
import React from 'react';
interface Props {
children: React.ReactNode;
renderErrorScreen: () => React.ReactNode;
onError?: (error: Error) => void;
}
class ErrorBoundary extends React.PureComponent<Props> {
state = {
hasError: false,
};
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error) {
this.props.onError?.(error);
}
render() {
if (this.state.hasError) {
return this.props.renderErrorScreen();
}
return this.props.children;
}
}
export default ErrorBoundary;
ui/shared/Page/Page.tsx
View file @ 094530b0
......@@ -10,6 +10,8 @@ import useFetch from 'lib/hooks/useFetch';
import useScrollDirection from 'lib/hooks/useScrollDirection';
import { SocketProvider } from 'lib/socket/context';
import ScrollDirectionContext from 'ui/ScrollDirectionContext';
import AppError from 'ui/shared/AppError';
import ErrorBoundary from 'ui/shared/ErrorBoundary';
import PageContent from 'ui/shared/Page/PageContent';
import Header from 'ui/snippets/header/Header';
import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
......@@ -33,6 +35,12 @@ const Page = ({
const directionContext = useScrollDirection();
const renderErrorScreen = React.useCallback(() => {
return wrapChildren ?
<PageContent><AppError statusCode={ 500 } mt="50px"/></PageContent> :
<AppError statusCode={ 500 }/>;
}, [ wrapChildren ]);
const renderedChildren = wrapChildren ? (
<PageContent>{ children }</PageContent>
) : children;
......@@ -44,7 +52,9 @@ const Page = ({
<NavigationDesktop/>
<Flex flexDir="column" width="100%">
<Header hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
{ renderedChildren }
<ErrorBoundary renderErrorScreen={ renderErrorScreen }>
{ renderedChildren }
</ErrorBoundary>
</Flex>
</Flex>
</ScrollDirectionContext.Provider>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment