From c92c448020168bf46523b9719b588a5000bc6a6f Mon Sep 17 00:00:00 2001 From: Lennart Date: Tue, 6 Dec 2022 15:40:22 +0100 Subject: [PATCH] feat(gatsby): Better renderHtml Preview Error (#37195) --- .../src/utils/worker/child/render-html.ts | 237 +++++++++++++++++- 1 file changed, 226 insertions(+), 11 deletions(-) diff --git a/packages/gatsby/src/utils/worker/child/render-html.ts b/packages/gatsby/src/utils/worker/child/render-html.ts index 333ca11462a1b..d6176ad85f5fa 100644 --- a/packages/gatsby/src/utils/worker/child/render-html.ts +++ b/packages/gatsby/src/utils/worker/child/render-html.ts @@ -149,6 +149,227 @@ const truncateObjStrings = (obj): IPageDataWithQueryResult => { return obj } +interface IPreviewErrorProps { + pagePath: string + publicDir: string + error: IRenderHTMLError +} + +const generatePreviewErrorPage = async ({ + pagePath, + publicDir, + error, +}: IPreviewErrorProps): Promise => { + const pageData = await readPageData(publicDir, pagePath) + const truncatedPageData = truncateObjStrings(pageData) + + const html = ` + + + + Failed to render HTML for "${pagePath}" + + + +
+

Failed to render HTML

+

The error occurred on the page: ${pagePath}

+
+
+

While trying to render the HTML for "${pagePath}" an error occurred. In order to make the build succeed you'll need to fix the error in your site. See the stacktrace below to find the culprit. Also be sure to read Debugging HTML Builds if you need more help.

+

Error

+ 
${
+        error.stack ? error.stack : `No codeFrame could be generated.`
+      }
+

Extra Details

+

Below you'll find additional data that might help you debug the error.

+
+ Page Data +

The page data contains some metadata about the affected page but also the GraphQL data if you have queries in your page. If e.g. data from the GraphQL query is undefined, check if it's available here.

+ 
${JSON.stringify(truncatedPageData, null, 2)}
+
+
+ + +` + + return html +} + export const renderHTMLProd = async ({ htmlComponentRendererPath, paths, @@ -229,17 +450,11 @@ export const renderHTMLProd = async ({ // 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 = `

Preview build error

-

There was an error when building the preview page for this page ("${pagePath}").

-

Error

- 
${htmlRenderError?.stack}
-

Page component id

-

${pageData.componentChunkName}

-

Page data

- 
${JSON.stringify(truncatedPageData, null, 4)}
` + const html = await generatePreviewErrorPage({ + pagePath, + publicDir, + error: htmlRenderError, + }) await fs.outputFile(generateHtmlPath(publicDir, pagePath), html) previewErrors[pagePath] = {