feature(gatsby): let users skip out of dev SSR (#28396)

* feature(gatsby): let users skip out of dev SSR * update snapshot * update snapshot * Add link on ssr error page to the docs * copy fix * update snapshot Co-authored-by: Michal Piechowiak <[email protected]>
gatsbyjs · Dec 1, 2020 · 7577e3f · 7577e3f
1 parent 4d14e22
commit 7577e3f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
@@ -16,5 +16,23 @@ exports[`SSR it generates an error page correctly 1`] = `
 <span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <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:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 5 | </span></span>
 <span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <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:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 7 | </span>}</span></pre>"
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <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>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><strong>Note</strong>: this error will show up in when you build your site so must be fixed before then.</p>
+        <p><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 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>
+        "
 `;
diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/develop-html-route.ts.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/develop-html-route.ts.snap
@@ -9,7 +9,7 @@ Object {
 <span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 17 | </span>    let tags</span>
 <span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 18 | </span>    let tagsSection</span>
 <span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 19 | </span>    <span style=\\"color:#006500;\\">if</span> (<span style=\\"color:#006500;\\">this</span><span style=\\"color:#DB3A00;\\">.</span>props<span style=\\"color:#DB3A00;\\">.</span>data<span style=\\"color:#DB3A00;\\">.</span>markdownRemark<span style=\\"color:#DB3A00;\\">.</span>fields<span style=\\"color:#DB3A00;\\">.</span>tagSlugs) {</span>",
-  "filename": "develop-html-route.ts",
+  "filename": "fixtures/blog-post.js",
   "line": 16,
   "message": "window is not defined",
   "row": 17,

diff --git a/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts b/packages/gatsby/src/utils/dev-ssr/develop-html-route.ts
@@ -22,6 +22,7 @@ export const route = ({ app, program, store }): any =>
       const renderResponse = await renderDevHTML({
         path: pathObj.path,
         page: pathObj,
+        skipSsr: req.query[`skip-ssr`] || false,
         store,
         htmlComponentRendererPath: `${program.directory}/public/render-page.js`,
         directory: program.directory,
@@ -62,6 +63,30 @@ export const route = ({ app, program, store }): any =>
       if (error.codeFrame) {
         errorHtml += `<pre style="background:#fdfaf6;padding:8px;">${error.codeFrame}</pre>`
       }
+
+      // Add link to help page
+      errorHtml += `
+      <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>`
+
+      // Add skip ssr button
+      errorHtml += `
+        <h3>Skip SSR</h3>
+        <p>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><strong>Note</strong>: this error will show up in when you build your site so must be fixed before then.</p>
+        <p><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 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>
+        `
       res.status(500).send(errorHtml)
     }
 

diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html-child.js b/packages/gatsby/src/utils/dev-ssr/render-dev-html-child.js
@@ -69,7 +69,7 @@ const parseError = function ({ err, directory, componentPath }) {
   const type = err.type ? err.type : err.name
 
   const data = {
-    filename: sysPath.relative(directory, componentPath),
+    filename: sysPath.relative(directory, filename),
     message: message,
     type: type,
     stack: stack,

diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts
@@ -110,6 +110,7 @@ const ensurePathComponentInSSRBundle = async (
 export const renderDevHTML = ({
   path,
   page,
+  skipSsr = false,
   store,
   htmlComponentRendererPath,
   directory,
@@ -156,6 +157,11 @@ export const renderDevHTML = ({
       isClientOnlyPage = true
     }
 
+    // If the user added the query string `skip-ssr`, we always just render an empty shell.
+    if (skipSsr) {
+      isClientOnlyPage = true
+    }
+
     try {
       const htmlString = await worker.renderHTML({
         path,