diff --git a/pages/_app.js b/pages/_app.js index 85250ae..f02efda 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -9,10 +9,22 @@ import Header from '~/components/header' import Footer from '~/components/footer' import AdminNav from '~/components/admin/nav' import ErrorBoundary from '~/components/errorBoundary' +import ErrorPage from '~/pages/_error' import "~/styles/layout.css" import 'react-infinite-calendar/styles.css' +const errorCodes = { + 404: { + name: 'Not Found', + message: `We couldn't find the item you're looking for. Sorry!` + }, + 500: { + name: 'Error', + message: `Our server encountered an unexpected error. Please try again.` + } +} + Layout.getInitialProps = async ({Component, ctx}) => { // Configure axios instance ctx.axios = axios.create({ @@ -43,16 +55,31 @@ Layout.getInitialProps = async ({Component, ctx}) => { const {data: cart} = await promises.cart let pageProps = {}; - if(Component.getInitialProps) - pageProps = await Component.getInitialProps({ctx, user}) + let error = null; + if(Component.getInitialProps) { + try { + pageProps = await Component.getInitialProps({ctx, user}) + } catch (err) { + if(err.status && errorCodes[err.status]) + error = errorCodes[err.status] + else + error = errorCodes[500] - return {pageProps, user, cart} + console.error(err) + } + } + + return {pageProps, error, user, cart} } -function Layout({ Component, pageProps, user, cart }){ +function Layout({ Component, pageProps, error, user, cart }){ const cartState = useState(cart) const userState = useState(user) + let page = error + ? + : + return ( <> @@ -63,7 +90,7 @@ function Layout({ Component, pageProps, user, cart }){
- + {page}