Don't leak error info

4 years ago · 88b724134f
parent 249d1b757e
commit 88b724134f
2 changed files with 33 additions and 22 deletions
--- 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
+    ? <ErrorPage error={error}/>
+    : <Component {...pageProps} />
+
  return (
    <>
      <Head>
@ -63,7 +90,7 @@ function Layout({ Component, pageProps, user, cart }){
          <Header/>
          <ErrorBoundary>
            <AdminNav>
-              <Component {...pageProps} />
+              {page}
            </AdminNav>
          </ErrorBoundary>
          <Footer/>
--- a/pages/_error.js
+++ b/pages/_error.js
@ -9,7 +9,7 @@ const ErrorPage = ({error}) => {
    return (
      <>
        <h2>Not Found</h2>
-        <p>This page was not found</p>
+        <p>We couldn't find the item you're looking for.  Sorry!</p>
      </>
    )

@ -17,22 +17,6 @@ const ErrorPage = ({error}) => {
    <>
      <h2>{error.name}</h2>
      <p>{error.message}</p>
-      {env === 'development' && (
-        <>
-          {error.stack && (
-            <p>
-              <pre>
-                {error.stack}
-              </pre>
-            </p>
-          )}
-          <p>
-            <pre>
-              {JSON.stringify(error, null, 2)}
-            </pre>
-          </p>
-        </>
-      )}
    </>
  )
 }