feat(gatsby): Don't crash the build process when in preview mode (#33184)

KyleAMathews · vladar · web-flow · commit c2d42ecc2dcc · 2021-10-01T13:56:13.000-07:00
* feat(gatsby): Don't crash the build process when in preview mode This causes problems to a number of Gatsby Cloud customers. When doing preview builds, there's often nodes that are missing information as the user is still filling out the content form. We do want to crash production builds in this case as we don't want 1/2 formed pages but for preview, we should error but not crash. Fixes this Gatsby Cloud feature request https://gatsby.canny.io/gatsby-cloud/p/errors-shouldnt-necessarily-break-preview The error page is very spartan but perhaps good enough for now. * Add more to error & customize it for Preview * make this conditional * cloud sets booleans as strings... * Better error html message * Revert chunkSize change + make pretty structured errors * Add the error name/stack to the generated error html page * restore breaking prod builds * just need stack * Improve error * fix lint error * Fix typescript errors * remove console.logs * Add page data & component id to preview error page * Update packages/gatsby/src/utils/worker/child/render-html.ts Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com> * fixes for reviews Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
diff --git a/packages/gatsby-cli/src/structured-errors/error-map.ts b/packages/gatsby-cli/src/structured-errors/error-map.ts
@@ -47,6 +47,11 @@ const errors = {
     level: Level.ERROR,
     docsUrl: `https://gatsby.dev/debug-html`,
   },
+  "95314": {
+    text: (context): string => context.errorMessage,
+    level: Level.ERROR,
+    docsUrl: `https://gatsby.dev/debug-html`,
+  },
   "98123": {
     text: (context): string =>
       `${context.stageLabel} failed\n\n${
diff --git a/packages/gatsby/src/commands/build-html.ts b/packages/gatsby/src/commands/build-html.ts
@@ -24,6 +24,8 @@ import { processNodeManifests } from "../utils/node-manifest"
 import type { GatsbyWorkerPool } from "../utils/worker/pool"
 type IActivity = any // TODO
 
+const isPreview = process.env.GATSBY_IS_PREVIEW === `true`
+
 export interface IBuildArgs extends IProgram {
   directory: string
   sitePackageJson: PackageJson
@@ -170,6 +172,7 @@ export const deleteRenderer = async (rendererPath: string): Promise<void> => {
 }
 export interface IRenderHtmlResult {
   unsafeBuiltinsUsageByPagePath: Record<string, Array<string>>
+  previewErrors: Record<string, any>
 }
 
 const renderHTMLQueue = async (
@@ -207,6 +210,50 @@ const renderHTMLQueue = async (
         sessionId,
       })
 
+      if (isPreview) {
+        const htmlRenderMeta = renderHTMLResult as IRenderHtmlResult
+        const seenErrors = new Set()
+        const errorMessages = new Map()
+        await Promise.all(
+          Object.entries(htmlRenderMeta.previewErrors).map(
+            async ([pagePath, error]) => {
+              if (!seenErrors.has(error.stack)) {
+                errorMessages.set(error.stack, {
+                  pagePaths: [pagePath],
+                })
+                seenErrors.add(error.stack)
+                const prettyError = await createErrorFromString(
+                  error.stack,
+                  `${htmlComponentRendererPath}.map`
+                )
+
+                const errorMessageStr = `${prettyError.stack}${
+                  prettyError.codeFrame ? `\n\n${prettyError.codeFrame}\n` : ``
+                }`
+
+                const errorMessage = errorMessages.get(error.stack)
+                errorMessage.errorMessage = errorMessageStr
+                errorMessages.set(error.stack, errorMessage)
+              } else {
+                const errorMessage = errorMessages.get(error.stack)
+                errorMessage.pagePaths.push(pagePath)
+                errorMessages.set(error.stack, errorMessage)
+              }
+            }
+          )
+        )
+
+        for (const value of errorMessages.values()) {
+          const errorMessage = `The following page(s) saw this error when building their HTML:\n\n${value.pagePaths
+            .map(p => `- ${p}`)
+            .join(`\n`)}\n\n${value.errorMessage}`
+          reporter.error({
+            id: `95314`,
+            context: { errorMessage },
+          })
+        }
+      }
+
       if (stage === `build-html`) {
         const htmlRenderMeta = renderHTMLResult as IRenderHtmlResult
         store.dispatch({
@@ -321,10 +368,23 @@ export const doBuildPages = async (
         error.context.path
       }": ${JSON.stringify(truncatedPageData, null, 2)}`
 
-      reporter.error(pageDataMessage)
+      // This is our only error during preview so customize it a bit + add the
+      // pretty build error.
+      if (isPreview) {
+        reporter.error({
+          id: `95314`,
+          context: { pageData: pageDataMessage },
+          error: buildError,
+        })
+      } else {
+        reporter.error(pageDataMessage)
+      }
     }
 
-    throw buildError
+    // Don't crash the builder when we're in preview-mode.
+    if (!isPreview) {
+      throw buildError
+    }
   }
 }
 
diff --git a/packages/gatsby/src/utils/worker/child/render-html.ts b/packages/gatsby/src/utils/worker/child/render-html.ts
@@ -4,6 +4,7 @@ import fs from "fs-extra"
 import Bluebird from "bluebird"
 import * as path from "path"
 import { generateHtmlPath, fixedPagePath } from "gatsby-core-utils"
+import { truncate } from "lodash"
 
 import {
   readWebpackStats,
@@ -111,6 +112,20 @@ async function getResourcesForTemplate(
   return resources
 }
 
+const truncateObjStrings = (obj): IPageDataWithQueryResult => {
+  // Recursively truncate strings nested in object
+  // These objs can be quite large, but we want to preserve each field
+  for (const key in obj) {
+    if (typeof obj[key] === `object` && obj[key] !== null) {
+      truncateObjStrings(obj[key])
+    } else if (typeof obj[key] === `string`) {
+      obj[key] = truncate(obj[key], { length: 250 })
+    }
+  }
+
+  return obj
+}
+
 export const renderHTMLProd = async ({
   htmlComponentRendererPath,
   paths,
@@ -123,8 +138,10 @@ export const renderHTMLProd = async ({
   sessionId: number
 }): Promise<IRenderHtmlResult> => {
   const publicDir = join(process.cwd(), `public`)
+  const isPreview = process.env.GATSBY_IS_PREVIEW === `true`
 
   const unsafeBuiltinsUsageByPagePath = {}
+  const previewErrors = {}
 
   // Check if we need to do setup and cache clearing. Within same session we can reuse memoized data,
   // but it's not safe to reuse them in different sessions. Check description of `lastSessionId` for more details
@@ -165,7 +182,7 @@ export const renderHTMLProd = async ({
           unsafeBuiltinsUsageByPagePath[pagePath] = unsafeBuiltinsUsage
         }
 
-        return fs.outputFile(generateHtmlPath(publicDir, pagePath), html)
+        await fs.outputFile(generateHtmlPath(publicDir, pagePath), html)
       } catch (e) {
         if (e.unsafeBuiltinsUsage && e.unsafeBuiltinsUsage.length > 0) {
           unsafeBuiltinsUsageByPagePath[pagePath] = e.unsafeBuiltinsUsage
@@ -175,13 +192,38 @@ export const renderHTMLProd = async ({
           path: pagePath,
           unsafeBuiltinsUsageByPagePath,
         }
-        throw e
+
+        // If we're in Preview-mode, write out a simple error html file.
+        if (isPreview) {
+          const pageData = await readPageData(publicDir, pagePath)
+          const truncatedPageData = truncateObjStrings(pageData)
+
+          const html = `<h1>Preview build error</h1>
+        <p>There was an error when building the preview page for this page ("${pagePath}").</p>
+        <h3>Error</h3>
+        <pre><code>${e.stack}</code></pre>
+        <h3>Page component id</h3>
+        <p><code>${pageData.componentChunkName}</code></p>
+        <h3>Page data</h3>
+        <pre><code>${JSON.stringify(truncatedPageData, null, 4)}</code></pre>`
+
+          await fs.outputFile(generateHtmlPath(publicDir, pagePath), html)
+          previewErrors[pagePath] = {
+            e,
+            message: e.message,
+            code: e.code,
+            stack: e.stack,
+            name: e.name,
+          }
+        } else {
+          throw e
+        }
       }
     },
     { concurrency: 2 }
   )
 
-  return { unsafeBuiltinsUsageByPagePath }
+  return { unsafeBuiltinsUsageByPagePath, previewErrors }
 }
 
 // TODO: remove when DEV_SSR is done
