feat: add support for custom error pages (#244)

Author: ascorbic

demo/src/pages/500.js

@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+// styles
+const pageStyles = {
+  color: '#232129',
+  padding: '96px',
+  fontFamily: '-apple-system, Roboto, sans-serif, serif',
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+
+const ErrorPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Internal Server Error</title>
+      <h1 style={headingStyles}>Internal Server Error</h1>
+      <p style={paragraphStyles}>
+        Sorry{' '}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{' '}
+        there was an error.
+      </p>
+    </main>
+  )
+}
+
+export default ErrorPage

demo/src/pages/bad-dog.js

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Layout } from '../layout/default'
+
+const BadPage = ({ serverData }) => (
+  <Layout>
+    <h1>SSR Page with a random dog</h1>
+    <img alt="Happy dog" src={serverData.message} />
+  </Layout>
+)
+
+export default BadPage
+
+export async function getServerData() {
+  throw new Error('Bad dog')
+}

demo/src/pages/index.js

@@ -38,6 +38,12 @@ const links = [
   { text: 'Blog', url: 'blog', description: 'DSG demo' },
   { text: 'Dog of the day', url: 'dog', description: 'SSR demo' },
   { text: 'Hello World', url: 'api/hello-world', description: '' },
+  {
+    text: 'Error Page',
+    url: 'bad-dog',
+    description: 'SSR page that throws an error',
+  },
+
   {
     text: 'I Am Capitalized',
     url: 'api/I-Am-Capitalized',

plugin/src/helpers/config.ts

@@ -107,6 +107,7 @@ export function mutateConfig({
   netlifyConfig.functions.__dsg = {
     included_files: [
       'public/404.html',
+      'public/500.html',
       path.posix.join(CACHE_DIR, 'data', '**'),
       path.posix.join(CACHE_DIR, 'query-engine', '**'),
       path.posix.join(CACHE_DIR, 'page-ssr', '**'),

plugin/src/templates/handlers.ts

@@ -10,7 +10,6 @@ import type { IGatsbyPage } from 'gatsby/cache-dir/query-engine'
 
 // These are "require()"d rather than imported so the symbol names are not munged,
 // as we need them to match the hard-coded values
-const { readFileSync } = require('fs')
 const { join } = require('path')
 
 const etag = require('etag')
@@ -19,6 +18,7 @@ const {
   getPagePathFromPageDataPath,
   getGraphQLEngine,
   prepareFilesystem,
+  getErrorResponse,
 } = require('./utils')
 
 type SSRReq = Pick<GatsbyFunctionRequest, 'query' | 'method' | 'url'> & {
@@ -39,6 +39,8 @@ export type RenderMode = 'SSR' | 'DSG'
  * the actual handler code, with the correct paths and render mode injected.
  */
 const getHandler = (renderMode: RenderMode, appDir: string): Handler => {
+  process.chdir(appDir)
+
   const DATA_SUFFIX = '/page-data.json'
   const DATA_PREFIX = '/page-data/'
   const cacheDir = join(appDir, '.cache')
@@ -68,17 +70,7 @@ const getHandler = (renderMode: RenderMode, appDir: string): Handler => {
       graphqlEngine.findPageByPath(pathName)
 
     if (page?.mode !== renderMode) {
-      const body = readFileSync(join(appDir, 'public', '404.html'), 'utf8')
-
-      return {
-        statusCode: 404,
-        body,
-        headers: {
-          Tag: etag(body),
-          'Content-Type': 'text/html; charset=utf-8',
-          'X-Mode': renderMode,
-        },
-      }
+      return getErrorResponse({ statusCode: 404, renderMode })
     }
     const req: SSRReq =
       renderMode === 'SSR'
@@ -95,48 +87,52 @@ const getHandler = (renderMode: RenderMode, appDir: string): Handler => {
             headers: {},
           }
 
-    const data = await getData({
-      pathName,
-      graphqlEngine,
-      req,
-    })
+    console.log(`[${req.method}] ${event.path} (${renderMode})`)
+
+    try {
+      const data = await getData({
+        pathName,
+        graphqlEngine,
+        req,
+      })
+      if (isPageData) {
+        const body = JSON.stringify(await renderPageData({ data }))
+        return {
+          statusCode: 200,
+          body,
+          headers: {
+            ETag: etag(body),
+            'Content-Type': 'application/json',
+            'X-Render-Mode': renderMode,
+            ...data.serverDataHeaders,
+          },
+        }
+      }
+
+      const body = await renderHTML({ data })
 
-    if (isPageData) {
-      const body = JSON.stringify(await renderPageData({ data }))
       return {
         statusCode: 200,
         body,
         headers: {
           ETag: etag(body),
-          'Content-Type': 'application/json',
-          'X-Mode': renderMode,
+          'Content-Type': 'text/html; charset=utf-8',
+          'X-Render-Mode': renderMode,
           ...data.serverDataHeaders,
         },
       }
-    }
-
-    const body = await renderHTML({ data })
-
-    return {
-      statusCode: 200,
-      body,
-      headers: {
-        ETag: etag(body),
-        'Content-Type': 'text/html; charset=utf-8',
-        'X-Mode': renderMode,
-        ...data.serverDataHeaders,
-      },
+    } catch (error) {
+      return getErrorResponse({ error, renderMode })
     }
   }
 }
 
 export const makeHandler = (appDir: string, renderMode: RenderMode): string =>
   // This is a string, but if you have the right editor plugin it should format as js
   javascript`
-    // @ts-check
     const { readFileSync } = require('fs');
     const { builder } = require('@netlify/functions');
-    const { getPagePathFromPageDataPath, getGraphQLEngine, prepareFilesystem } = require('./utils')
+    const { getPagePathFromPageDataPath, getGraphQLEngine, prepareFilesystem, getErrorResponse } = require('./utils')
     const { join, resolve } = require("path");
     const etag = require('etag');
     const pageRoot = resolve(join(__dirname, "${appDir}"));

plugin/src/templates/utils.ts

@@ -3,7 +3,9 @@ import os from 'os'
 import { join } from 'path'
 import process from 'process'
 
-import { existsSync, copySync } from 'fs-extra'
+import { HandlerResponse } from '@netlify/functions'
+import etag from 'etag'
+import { existsSync, copySync, readFileSync } from 'fs-extra'
 import type { GraphQLEngine } from 'gatsby/cache-dir/query-engine'
 import { link } from 'linkfs'
 
@@ -23,6 +25,7 @@ declare global {
  * Hacks to deal with the fact that functions execute on a readonly filesystem
  */
 export function prepareFilesystem(cacheDir: string): void {
+  console.log('Preparing Gatsby filesystem')
   const rewrites = [
     [join(cacheDir, 'caches'), join(TEMP_CACHE_DIR, 'caches')],
     [join(cacheDir, 'caches-lmdb'), join(TEMP_CACHE_DIR, 'caches-lmdb')],
@@ -86,3 +89,41 @@ export function getGraphQLEngine(cacheDir: string): GraphQLEngine {
     dbPath,
   })
 }
+
+/**
+ * Gets an error page to return from a function
+ */
+
+export function getErrorResponse({
+  statusCode = 500,
+  error,
+  renderMode,
+}: {
+  statusCode?: number
+  error?: Error
+  renderMode: 'DSG' | 'SSR'
+}): HandlerResponse {
+  let body = `<html><body><h1>${statusCode}</h1><p>${
+    statusCode === 404 ? 'Not found' : 'Internal Server Error'
+  }</p></body></html>`
+
+  if (error) {
+    console.error(error)
+  }
+
+  if (statusCode === 500 || statusCode === 404) {
+    const filename = join(process.cwd(), 'public', `${statusCode}.html`)
+    if (existsSync(filename)) {
+      body = readFileSync(filename, 'utf8')
+    }
+  }
+  return {
+    statusCode,
+    body,
+    headers: {
+      Tag: etag(body),
+      'Content-Type': 'text/html; charset=utf-8',
+      'X-Render-Mode': renderMode,
+    },
+  }
+}

plugin/test/fixtures/functions-without-gatsby-plugin/e2e-tests/test-helpers.js

@@ -8,6 +8,8 @@ const FormData = require('form-data')
 // Source: https://github.com/gatsbyjs/gatsby/blob/master/integration-tests/functions/test-helpers.js
 
 exports.runTests = function runTests(env, host) {
+  jest.setTimeout(10_000)
+
   async function fetchTwice(url, options) {
     const result = await fetch(url, options)
     if (!result.headers.has('x-forwarded-host')) {