feat(gatsby): New overlay for DEV_SSR (#31061)

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com> Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
gatsbyjs · May 7, 2021 · 7110189 · 7110189
1 parent 48eea6f
commit 7110189
Show file tree

Hide file tree

Showing 22 changed files with 400 additions and 549 deletions.
diff --git a/e2e-tests/development-runtime/cypress/integration/navigation/redirect.js b/e2e-tests/development-runtime/cypress/integration/navigation/redirect.js
@@ -5,34 +5,38 @@ Cypress.on(`window:before:load`, win => {
 
 const runTests = () => {
   it(`should redirect page to index page when there is no such page`, () => {
-    cy.visit(`/redirect-without-page`).waitForRouteChange()
+    cy.visit(`/redirect-without-page`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
 
     cy.location(`pathname`).should(`equal`, `/`)
     cy.then(() => {
       const calls = spy.getCalls()
 
-      const callsAboutRedirectMatchingPage = calls.filter(call => {
-        return call.args[0].includes(
-          "matches both a page and a redirect; this is probably not intentional."
+      const callsAboutRedirectMatchingPage = calls.filter(call =>
+        call.args[0].includes(
+          `matches both a page and a redirect; this is probably not intentional.`
         )
-      })
+      )
 
       expect(callsAboutRedirectMatchingPage.length).to.equal(0)
     })
   })
 
   it(`should redirect page to index page even there is a such page`, () => {
-    cy.visit(`/redirect`).waitForRouteChange()
+    cy.visit(`/redirect`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
 
     cy.location(`pathname`).should(`equal`, `/`)
     cy.then(() => {
       const calls = spy.getCalls()
 
-      const callsAboutRedirectMatchingPage = calls.filter(call => {
-        return call.args[0].includes(
-          "matches both a page and a redirect; this is probably not intentional."
+      const callsAboutRedirectMatchingPage = calls.filter(call =>
+        call.args[0].includes(
+          `matches both a page and a redirect; this is probably not intentional.`
         )
-      })
+      )
 
       expect(callsAboutRedirectMatchingPage.length).not.to.equal(0)
       expect(spy).to.be.calledWith(
@@ -42,43 +46,47 @@ const runTests = () => {
   })
 
   it(`should redirect to a dynamically-created replacement page`, () => {
-    cy.visit(`/redirect-me/`).waitForRouteChange()
+    cy.visit(`/redirect-me/`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
 
     cy.location(`pathname`).should(`equal`, `/pt/redirect-me/`)
     cy.then(() => {
       expect(spy).not.to.be.calledWith(
         `The route "/redirect" matches both a page and a redirect; this is probably not intentional.`
       )
 
-      cy.findByText("This should be at /pt/redirect-me/", {
+      cy.findByText(`This should be at /pt/redirect-me/`, {
         exact: false,
       }).should(`exist`)
     })
   })
 }
 
 describe(`redirect`, () => {
-  describe("404 is present", () => {
+  describe(`404 is present`, () => {
     before(() => {
       cy.task(`restoreAllBlockedResources`)
     })
 
     // this is sanity check for this group
     it(`make sure 404 is present`, () => {
-      cy.visit(`/______not_existing_page`).waitForRouteChange()
-      cy.findByText("Preview custom 404 page").click()
-      cy.findByText("A custom 404 page wasn't detected", {
+      cy.visit(`/______not_existing_page`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
+      cy.findByText(`Preview custom 404 page`).click()
+      cy.findByText(`A custom 404 page wasn't detected`, {
         exact: false,
       }).should(`not.exist`)
       cy.findByText(
-        "You just hit a route that does not exist... the sadness."
+        `You just hit a route that does not exist... the sadness.`
       ).should(`exist`)
     })
 
     runTests()
   })
 
-  describe("no 404", () => {
+  describe(`no 404`, () => {
     before(() => {
       cy.task(`restoreAllBlockedResources`)
 
@@ -100,13 +108,15 @@ describe(`redirect`, () => {
     })
 
     it(`make sure 404 is NOT present`, () => {
-      cy.visit(`/______not_existing_page`).waitForRouteChange()
-      cy.findByText("Preview custom 404 page").click()
-      cy.findByText("A custom 404 page wasn't detected", {
+      cy.visit(`/______not_existing_page`, {
+        failOnStatusCode: false,
+      }).waitForRouteChange()
+      cy.findByText(`Preview custom 404 page`).click()
+      cy.findByText(`A custom 404 page wasn't detected`, {
         exact: false,
       }).should(`exist`)
       cy.findByText(
-        "You just hit a route that does not exist... the sadness.",
+        `You just hit a route that does not exist... the sadness.`,
         { exact: false }
       ).should(`not.exist`)
     })

diff --git a/e2e-tests/development-runtime/cypress/integration/page-not-found/404.js b/e2e-tests/development-runtime/cypress/integration/page-not-found/404.js
@@ -1,6 +1,8 @@
 describe(`page not found`, () => {
   beforeEach(() => {
-    cy.visit(`/__404__`)
+    cy.visit(`/__404__`, {
+      failOnStatusCode: false,
+    })
   })
   it(`should display message `, () => {
     cy.get(`h1`).invoke(`text`).should(`eq`, `Gatsby.js development 404 page`)

diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
@@ -3,134 +3,15 @@
 exports[`SSR is run for a page when it is requested 1`] = `"<!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\\"/><link data-identity=\\"gatsby-dev-css\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/commons.css\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"><div><h1 class=\\"hi\\">Hello world</h1></div></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 src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/framework.js\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
 exports[`SSR it generates an error page correctly 1`] = `
-"<head>
-       <title>Develop SSR Error</title>
-       <style>
-          * {
-            --gatsby: #663399;
-            --gatsbyLight: #9158ca;
-            --dimmedWhite: rgba(255, 255, 255, 0.8);
-            --white: #ffffff;
-            --black: #000000;
-            --color-ansi-selection: rgba(95, 126, 151, 0.48);
-            --color-ansi-bg: #fafafa;
-            --color-ansi-fg: #545454;
-            --color-ansi-white: #969896;
-            --color-ansi-black: #141414;
-            --color-ansi-blue: #183691;
-            --color-ansi-cyan: #007faa;
-            --color-ansi-green: #008000;
-            --color-ansi-magenta: #795da3;
-            --color-ansi-red: #d91e18;
-            --color-ansi-yellow: #aa5d00;
-            --color-ansi-bright-white: #ffffff;
-            --color-ansi-bright-black: #545454;
-            --color-ansi-bright-blue: #183691;
-            --color-ansi-bright-cyan: #007faa;
-            --color-ansi-bright-green: #008000;
-            --color-ansi-bright-magenta: #795da3;
-            --color-ansi-bright-red: #d91e18;
-            --color-ansi-bright-yellow: #aa5d00;
-            --radii: 5px;
-            --z-index-normal: 5;
-            --z-index-elevated: 10;
-            --space: 1.5em;
-            --space-sm: 1em;
-            --space-lg: 2.5em;
-          }
-          [data-gatsby-overlay=\\"backdrop\\"] {
-            background: rgba(72, 67, 79, 0.5);
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            height: 100%;
-            width: 100%;
-            z-index: var(--z-index-normal);
-            backdrop-filter: blur(10px);
-          }
-          body {
-            font: 18px/1.5 -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto,
-              Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\",
-              \\"Segoe UI Symbol\\" !important;
-            background: var(--color-ansi-bright-white);
-            padding: var(--space);
-            overflow: auto;
-          }
-          h1,
-          h2,
-          h3 {
-            display: flex;
-            align-items: center;
-            color: var(--dimmedWhite);
-            background: var(--gatsby);
-            padding: var(--space);
-            border-top-left-radius: var(--radii);
-            border-top-right-radius: var(--radii);
-          }
-          code {
-            font-family: Consolas, \\"Andale Mono WT\\", \\"Andale Mono\\", \\"Lucida Console\\", \\"Lucida Sans Typewriter\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", \\"Liberation Mono\\", \\"Nimbus Mono L\\", Monaco, \\"Courier New\\", Courier, monospace;
-          }
-          pre {
-            margin: 0;
-            color: var(--color-ansi-fg);
-            padding: var(--space-sm);
-            border-radius: var(--radii);
-          }
-          button {
-            cursor: pointer;
-            border: 1px;
-            padding: 10px;
-            background-color: var(--gatsbyLight);
-            color: var(--white);
-            appearance: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--radii);
-          }
-        </style>
-       </head>
-        <h1>Error</h1>
-        <h2>The page didn't server render (SSR) correctly</h2>
-        <p style=\\"padding-left: var(--space-sm);\\">
-          React components in Gatsby must render successfully in the browser and in a
-          node.js environment. When we tried to render your page component in
-          node.js, it errored.
-        </p>
-        <ul>
-          <li><strong>URL path:</strong> <code>/bad-page/</code></li>
-          <li><strong>File path:</strong> <code>src/pages/bad-page.js</code></li>
-        </ul>
-        <h3>error</h3>
-        <code style=\\"padding: var(--space);padding-left: var(--space-sm);\\">window is not defined</code>
-        <pre><span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 2 |</span></span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 3 |</span> <span style=\\"color:#006500;\\">const</span> <span style=\\"color:#DB3A00;\\">Component</span> <span style=\\"color:#DB3A00;\\">=</span> () <span style=\\"color:#DB3A00;\\">=></span> {</span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"><span style=\\"color:#096fb3;\\"><span style=\\"font-weight:bold;\\">></span></span><span style=\\"color:#527713;\\"> 4 |</span>   <span style=\\"color:#006500;\\">const</span> a <span style=\\"color:#DB3A00;\\">=</span> window<span style=\\"color:#DB3A00;\\">.</span>width</span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\">   |</span>             <span style=\\"color:#096fb3;\\"><span style=\\"font-weight:bold;\\">^</span></span></span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 5 |</span></span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 6 |</span>   <span style=\\"color:#006500;\\">return</span> <span style=\\"color:#DB3A00;\\"><</span><span style=\\"color:#DB3A00;\\">div</span><span style=\\"color:#DB3A00;\\">></span>hi<span style=\\"color:#DB3A00;\\"><</span><span style=\\"color:#DB3A00;\\">/</span><span style=\\"color:#DB3A00;\\">div</span><span style=\\"color:#DB3A00;\\">></span></span>
-<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 7 |</span> }</span></pre>
-      <p>For help debugging SSR errors, see this docs page: <a
-      href=\\"https://www.gatsbyjs.com/docs/debugging-html-builds/\\">https://www.gatsbyjs.com/docs/debugging-html-builds/</a></p>
-        <h3>Skip SSR</h3>
-        <p style=\\"padding-left: var(--space-sm);\\">
-        If you don't wish to fix the SSR error at the moment, press the
-        button below to reload the page without attempting SSR</p>
-        <p style=\\"padding-left: var(--space-sm);\\">
-        <strong>Note</strong>: this error will show up in when you build your site so must be fixed before then.</p>
-        <p style=\\"padding-left: var(--space-sm);\\">
-        <strong>Caveat</strong>: SSR errors in module scope i.e. outside of your components can't be skipped so will need fixed before you can continue</p>
-        <button style=\\"margin-left: var(--space-sm);\\" onclick='refreshWithQueryString()'>Skip SSR</button>
-        <script>
-          function refreshWithQueryString() {
-            if ('URLSearchParams' in window) {
-              var searchParams = new URLSearchParams(window.location.search);
-              searchParams.set(\\"skip-ssr\\", \\"true\\");
-              window.location.search = searchParams.toString();
-            }
-          }
-          </script>
-        "
+"<!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\\"/><link data-identity=\\"gatsby-dev-css\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/commons.css\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></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>window._gatsbyEvents = window._gatsbyEvents || []; window._gatsbyEvents.push([\\"FAST_REFRESH\\", { action: \\"SHOW_DEV_SSR_ERROR\\", payload: {\\"codeFrame\\":\\"  2 |/n  3 | const Component = () => {/n> 4 |   const a = window.width/n    |             ^/n  5 |/n  6 |   return <div>hi</div>/n  7 | }\\",\\"source\\":\\"src/pages/bad-page.js\\",\\"line\\":4,\\"column\\":13,\\"sourceMessage\\":\\"window is not defined\\",\\"stack\\":\\"ReferenceError: window is not defined/n    at Component (<PROJECT_ROOT>/public/webpack:/ssr/src/pages/bad-page.js:4:13)/n    at d (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)/n    at $a (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)/n    at a.b.render (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)/n    at a.b.read (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)/n    at renderToString (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)/n    at generateBodyHTML (<PROJECT_ROOT>/public/webpack:/ssr/.cache/ssr-develop-static-entry.js:293:34)/n    at Object.__WEBPACK_DEFAULT_EXPORT__ [as default] (<PROJECT_ROOT>/public/webpack:/ssr/.cache/ssr-develop-static-entry.js:323:19)/n    at <PROJECT_ROOT>/node_modules/gatsby/src/utils/dev-ssr/render-dev-html-child.js:95:9/n    at new Promise (<anonymous>)\\"} }])</script><noscript><h1>Failed to Server Render (SSR)</h1><h2>Error message:</h2><p>window is not defined</p><h2>File:</h2><p>src/pages/bad-page.js:4:13</p><h2>Stack:</h2><pre><code>ReferenceError: window is not defined
+    at Component (<PROJECT_ROOT>/public/webpack:/ssr/src/pages/bad-page.js:4:13)
+    at d (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
+    at $a (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
+    at a.b.render (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
+    at a.b.read (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
+    at renderToString (<PROJECT_ROOT>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
+    at generateBodyHTML (<PROJECT_ROOT>/public/webpack:/ssr/.cache/ssr-develop-static-entry.js:293:34)
+    at Object.__WEBPACK_DEFAULT_EXPORT__ [as default] (<PROJECT_ROOT>/public/webpack:/ssr/.cache/ssr-develop-static-entry.js:323:19)
+    at <PROJECT_ROOT>/node_modules/gatsby/src/utils/dev-ssr/render-dev-html-child.js:95:9
+    at new Promise (&lt;anonymous&gt;)</code></pre></noscript><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/framework.js\\"></script><script src=\\"/commons.js\\"></script></body></html>"
 `;
diff --git a/integration-tests/ssr/__tests__/ssr.js b/integration-tests/ssr/__tests__/ssr.js
@@ -38,7 +38,7 @@ describe(`SSR`, () => {
     const pageUrl = `http://localhost:8000/bad-page/`
     // Poll until the new page is bundled (so starts returning a non-404 status).
     const rawDevHtml = await fetchUntil(pageUrl, res => {
-      return res.status === 500
+      return res
     }).then(res => res.text())
     expect(rawDevHtml).toMatchSnapshot()
     await fs.remove(dest)

diff --git a/integration-tests/ssr/jest.config.js b/integration-tests/ssr/jest.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  snapshotSerializers: [`jest-serializer-path`],
   testPathIgnorePatterns: [
     `/node_modules/`,
     `__tests__/fixtures`,

diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json
@@ -18,6 +18,7 @@
     "fs-extra": "^9.0.0",
     "jest": "^24.0.0",
     "jest-diff": "^24.0.0",
+    "jest-serializer-path": "^0.1.15",
     "npm-run-all": "4.1.5",
     "start-server-and-test": "^1.11.3"
   },
@@ -30,7 +31,7 @@
   "scripts": {
     "build": "gatsby build",
     "clean": "gatsby clean",
-    "develop": "cross-env GATSBY_EXPERIMENTAL_DEV_SSR=true gatsby develop",
+    "develop": "cross-env GATSBY_EXPERIMENTAL_DEV_SSR=true CI=1 FORCE_COLOR=0 gatsby develop",
     "serve": "gatsby serve",
     "start-dev-server": "start-server-and-test develop http://localhost:8000 test:jest",
     "test": "cross-env GATSBY_EXPERIMENTAL_DEV_SSR=true npm-run-all -s build start-dev-server",

diff --git a/packages/gatsby-cli/src/structured-errors/error-map.ts b/packages/gatsby-cli/src/structured-errors/error-map.ts
@@ -549,18 +549,29 @@ const errors = {
     docsUrl: `https://www.gatsbyjs.com/docs/reference/gatsby-cli#new`,
   },
   "11614": {
-    text: ({
-      path,
-      filePath,
-      line,
-      column,
-    }): string => `The path "${path}" errored during SSR.
-
-    Edit its component ${filePath}${
-      line ? `:${line}:${column}` : ``
-    } to resolve the error.`,
+    text: (context): string =>
+      stripIndent(`
+        The path "${context.path}" errored during SSR.
+        Edit its component ${context.filePath}${
+        context.line ? `:${context.line}:${context.column}` : ``
+      } to resolve the error.`),
     level: Level.WARNING,
-    docsUrl: `https://gatsby.dev/debug-html`,
+  },
+  "11615": {
+    text: (context): string =>
+      stripIndent(`
+        There was an error while trying to load dev-404-page:
+        ${context.sourceMessage}`),
+    level: Level.ERROR,
+    category: ErrorCategory.SYSTEM,
+  },
+  "11616": {
+    text: (context): string =>
+      stripIndent(`
+        There was an error while trying to create the client-only shell for displaying SSR errors:
+        ${context.sourceMessage}`),
+    level: Level.ERROR,
+    category: ErrorCategory.SYSTEM,
   },
   // Watchdog
   "11701": {