gatsbyjs · pieh · Feb 13, 2023 · Feb 13, 2023 · Feb 13, 2023 · Feb 13, 2023
diff --git a/packages/gatsby-cli/src/structured-errors/error-map.ts b/packages/gatsby-cli/src/structured-errors/error-map.ts
@@ -65,6 +65,12 @@ const errors: Record<string, IErrorMapEntry> = {
     category: ErrorCategory.USER,
     type: Type.ENGINE_EXECUTION,
   },
+  "95316": {
+    text: (): string => `Non fatal error during static HTML generation`,
+    level: Level.WARNING,
+    category: ErrorCategory.USER,
+    type: Type.HTML_GENERATION,
+  },
   "98001": {
     text: (): string =>
       `Built Rendering Engines failed validation.\n\nPlease open an issue with a reproduction at https://gatsby.dev/new-issue for more help.`,

diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap
@@ -15,6 +15,7 @@ exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComp
 exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `
 Object {
   "html": "<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.___webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>",
+  "nonFatalErrors": Array [],
   "sliceData": Object {},
   "unsafeBuiltinsUsage": Array [],
 }
@@ -23,6 +24,7 @@ Object {
 exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `
 Object {
   "html": "<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.___webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>",
+  "nonFatalErrors": Array [],
   "sliceData": Object {},
   "unsafeBuiltinsUsage": Array [],
 }
@@ -31,6 +33,7 @@ Object {
 exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `
 Object {
   "html": "<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.___webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>",
+  "nonFatalErrors": Array [],
   "sliceData": Object {},
   "unsafeBuiltinsUsage": Array [],
 }

diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -333,6 +333,8 @@ export default async function staticPage({
       pathPrefix: __PATH_PREFIX__,
     })
 
+    const nonFatalErrors = []
+
     // If no one stepped up, we'll handle it.
     if (!bodyHtml) {
       try {
@@ -342,6 +344,12 @@ export default async function staticPage({
             pipe(writableStream)
           },
           onError(error) {
+            // onError is triggered for fatal onShellError as well
+            // but in this case we do throw fatal error and non fatal errors
+            // are just discarded
+            nonFatalErrors.push(error.stack)
+          },
+          onShellError(error) {
             writableStream.destroy(error)
           },
         })
@@ -528,6 +536,7 @@ export default async function staticPage({
     return {
       html,
       unsafeBuiltinsUsage: global.unsafeBuiltinUsage,
+      nonFatalErrors,
       sliceData: sliceProps,
     }
   } catch (e) {
@@ -575,6 +584,8 @@ export async function renderSlice({ slice, staticQueryContext, props = {} }) {
     </SlicesContext.Provider>
   )
 
+  const nonFatalErrors = []
+
   const writableStream = new WritableAsPromise()
   const { pipe } = renderToPipeableStream(
     sliceWrappedWithWrapRootElementAndContexts,
@@ -583,10 +594,21 @@ export async function renderSlice({ slice, staticQueryContext, props = {} }) {
         pipe(writableStream)
       },
       onError(error) {
+        // onError is triggered for fatal onShellError as well
+        // but in this case we do throw fatal error and non fatal errors
+        // are just discarded
+        nonFatalErrors.push(error.stack)
+      },
+      onShellError(error) {
         writableStream.destroy(error)
       },
     }
   )
 
-  return await writableStream
+  const html = await writableStream
+
+  return {
+    html,
+    nonFatalErrors,
+  }
 }
diff --git a/packages/gatsby/src/commands/build-html.ts b/packages/gatsby/src/commands/build-html.ts
@@ -317,6 +317,7 @@ export const deleteRenderer = async (rendererPath: string): Promise<void> => {
 }
 export interface IRenderHtmlResult {
   unsafeBuiltinsUsageByPagePath: Record<string, Array<string>>
+  nonFatalErrorsByPagePath: Record<string, Array<string>>
   previewErrors: Record<string, any>
 
   slicesPropsPerPage: Record<
@@ -359,6 +360,7 @@ const renderHTMLQueue = async (
       : workerPool.single.renderHTMLDev
 
   const uniqueUnsafeBuiltinUsedStacks = new Set<string>()
+  const uniqueNonFatalErrorStacks = new Set<string>()
 
   try {
     await Bluebird.map(segments, async pageSegment => {
@@ -435,6 +437,27 @@ const renderHTMLQueue = async (
             uniqueUnsafeBuiltinUsedStacks.add(unsafeUsageStack)
           }
         }
+
+        for (const arrayOfErrors of Object.values(
+          htmlRenderMeta.nonFatalErrorsByPagePath
+        )) {
+          for (const nonFatalErrorStack of arrayOfErrors) {
+            if (!uniqueNonFatalErrorStacks.has(nonFatalErrorStack)) {
+              uniqueNonFatalErrorStacks.add(nonFatalErrorStack)
+
+              const prettyError = createErrorFromString(
+                nonFatalErrorStack,
+                `${htmlComponentRendererPath}.map`
+              )
+
+              reporter.error({
+                id: `95316`,
+                context: {},
+                error: prettyError,
+              })
+            }
+          }
+        }
       }
 
       if (activity && activity.tick) {
@@ -765,6 +788,8 @@ export async function buildSlices({
     }
   }
 
+  const uniqueNonFatalErrorStacks = new Set<string>()
+
   if (slicesProps.length > 0) {
     const buildHTMLActivityProgress = reporter.activityTimer(
       `Building slices HTML (${slicesProps.length})`,
@@ -778,12 +803,33 @@ export async function buildSlices({
     try {
       const slices = Array.from(state.slices.entries())
 
-      await workerPool.single.renderSlices({
+      const { nonFatalErrors } = await workerPool.single.renderSlices({
         publicDir: path.join(program.directory, `public`),
         htmlComponentRendererPath,
         slices,
         slicesProps,
       })
+
+      try {
+        for (const nonFatalErrorStack of nonFatalErrors) {
+          if (!uniqueNonFatalErrorStacks.has(nonFatalErrorStack)) {
+            uniqueNonFatalErrorStacks.add(nonFatalErrorStack)
+
+            const prettyError = createErrorFromString(
+              nonFatalErrorStack,
+              `${htmlComponentRendererPath}.map`
+            )
+
+            reporter.error({
+              id: `95316`,
+              context: {},
+              error: prettyError,
+            })
+          }
+        }
+      } catch (e) {
+        console.log({ e })
+      }
     } catch (err) {
       const prettyError = createErrorFromString(
         err.stack,

diff --git a/packages/gatsby/src/utils/page-ssr-module/entry.ts b/packages/gatsby/src/utils/page-ssr-module/entry.ts
@@ -445,6 +445,12 @@ export async function renderHTML({
         sliceData,
       })
 
+      if (results.nonFatalErrors && results.nonFatalErrors.length > 0) {
+        for (const error of results.nonFatalErrors) {
+          reporter.error(error)
+        }
+      }
+
       return results.html.replace(
         `<slice-start id="_gatsby-scripts-1"></slice-start><slice-end id="_gatsby-scripts-1"></slice-end>`,
         GATSBY_SLICES_SCRIPT

diff --git a/packages/gatsby/src/utils/worker/child/render-html.ts b/packages/gatsby/src/utils/worker/child/render-html.ts
@@ -377,6 +377,7 @@ export const renderHTMLProd = async ({
   const isPreview = process.env.GATSBY_IS_PREVIEW === `true`
 
   const unsafeBuiltinsUsageByPagePath = {}
+  const nonFatalErrorsByPagePath = {}
   const previewErrors = {}
   const allSlicesProps = {}
 
@@ -408,7 +409,7 @@ export const renderHTMLProd = async ({
         const pageData = await readPageData(publicDir, pagePath)
         const resourcesForTemplate = await getResourcesForTemplate(pageData)
 
-        const { html, unsafeBuiltinsUsage, sliceData } =
+        const { html, unsafeBuiltinsUsage, sliceData, nonFatalErrors } =
           await htmlComponentRenderer.default({
             pagePath,
             pageData,
@@ -425,6 +426,10 @@ export const renderHTMLProd = async ({
           unsafeBuiltinsUsageByPagePath[pagePath] = unsafeBuiltinsUsage
         }
 
+        if (nonFatalErrors.length > 0) {
+          nonFatalErrorsByPagePath[pagePath] = nonFatalErrors
+        }
+
         await fs.outputFile(generateHtmlPath(publicDir, pagePath), html)
       } catch (e) {
         if (e.unsafeBuiltinsUsage && e.unsafeBuiltinsUsage.length > 0) {
@@ -466,6 +471,7 @@ export const renderHTMLProd = async ({
     unsafeBuiltinsUsageByPagePath,
     previewErrors,
     slicesPropsPerPage: allSlicesProps,
+    nonFatalErrorsByPagePath,
   }
 }
 
@@ -708,8 +714,11 @@ export async function renderSlices({
   slices: Array<[string, IGatsbySlice]>
   slicesProps: Array<ISlicePropsEntry>
   htmlComponentRendererPath: string
-}): Promise<void> {
+}): Promise<{
+  nonFatalErrors: Array<string>
+}> {
   const htmlComponentRenderer = require(htmlComponentRendererPath)
+  const nonFatalErrors: Array<string> = []
 
   for (const { sliceId, props, sliceName, hasChildren } of slicesProps) {
     const sliceEntry = slices.find(f => f[0] === sliceName)
@@ -729,17 +738,21 @@ export async function renderSlices({
     const sliceData = await readSliceData(publicDir, slice.name)
 
     try {
-      const html = await htmlComponentRenderer.renderSlice({
-        slice,
-        staticQueryContext,
-        props: {
-          data: sliceData?.result?.data,
-          ...(hasChildren ? { children: MAGIC_CHILDREN_STRING } : {}),
-          ...props,
-        },
-      })
+      const { html, nonFatalErrors: nonFatalErrorsForCurrentSlice } =
+        await htmlComponentRenderer.renderSlice({
+          slice,
+          staticQueryContext,
+          props: {
+            data: sliceData?.result?.data,
+            ...(hasChildren ? { children: MAGIC_CHILDREN_STRING } : {}),
+            ...props,
+          },
+        })
       const split = html.split(MAGIC_CHILDREN_STRING)
 
+      if (nonFatalErrorsForCurrentSlice.length > 0) {
+        nonFatalErrors.push(...nonFatalErrorsForCurrentSlice)
+      }
       // TODO always generate both for now
       let index = 1
       for (const htmlChunk of split) {
@@ -759,4 +772,6 @@ export async function renderSlices({
       throw renderSliceError
     }
   }
+
+  return { nonFatalErrors }
 }