Skip to content

Commit

Permalink
feature(gatsby): style the SSR error page (#28416) (#28426)
Browse files Browse the repository at this point in the history 
* Add styles & tweak language

* Fix small error noticed w/ source-maps

* fix snapshot

* update snapshot

(cherry picked from commit 239589a)

Co-authored-by: Kyle Mathews <[email protected]>
  • Loading branch information
@KyleAMathews
GatsbyJS Bot and KyleAMathews authored Dec 1, 2020
1 parent bbd97c2 commit 7239e96
Show file tree
Hide file tree
Showing 4 changed files with 236 additions and 32 deletions.
126 changes: 112 additions & 14 deletions integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,126 @@
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\\"/><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>Hello world</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=\\"/commons.js\\"></script></body></html>"`;
exports[`SSR it generates an error page correctly 1`] = `
"<title>Develop SSR Error</title><h1>Error<h1>
<h2>The page didn't SSR correctly</h2>
"<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 message</h3>
<p><code>window is not defined</code></p><pre style=\\"background:#fdfaf6;padding:8px;\\"><span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 2 | </span></span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <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:#fdfaf6;\\"><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:#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>
<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>If you don't wish to fix the SSR error at the moment, press the
<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><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>
<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) {
Expand Down
14 changes: 7 additions & 7 deletions packages/gatsby/src/utils/__tests__/__snapshots__/develop-html-route.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

exports[`error parsing returns an object w/ the parsed error & codeframe 1`] = `
Object {
"codeFrame": "<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 14 | </span> <span style=\\"color:#527713;\\">//console.log(post)</span></span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 15 | </span></span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"><span style=\\"color:#096fb3;\\"><span style=\\"font-weight:bold;\\">></span></span><span style=\\"color:#527713;\\"> 16 | </span> let pizza <span style=\\"color:#DB3A00;\\">=</span> window<span style=\\"color:#DB3A00;\\">.</span>width2</span>
<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;\\"> 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>",
"codeFrame": "<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 14 | </span> <span style=\\"color:#527713;\\">//console.log(post)</span></span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 15 | </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;\\"> 16 | </span> let pizza <span style=\\"color:#DB3A00;\\">=</span> window<span style=\\"color:#DB3A00;\\">.</span>width2</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;\\"> 17 | </span> let tags</span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <span style=\\"color:#527713;\\"> 18 | </span> let tagsSection</span>
<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#ffffff;\\"> <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": "fixtures/blog-post.js",
"line": 16,
"message": "window is not defined",
Expand Down
117 changes: 108 additions & 9 deletions packages/gatsby/src/utils/dev-ssr/develop-html-route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,112 @@ export const route = ({ app, program, store }): any =>
column: error.row,
},
})
let errorHtml = `<title>Develop SSR Error</title><h1>Error<h1>
<h2>The page didn't SSR correctly</h2>
let errorHtml = `<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>${req.path}</code></li>
<li><strong>File path:</strong> <code>${error.filename}</code></li>
</ul>
<h3>error message</h3>
<p><code>${error.message}</code></p>`
<h3>error</h3>
<code style="padding: var(--space);padding-left: var(--space-sm);">${error.message}</code>
`

if (error.codeFrame) {
errorHtml += `<pre style="background:#fdfaf6;padding:8px;">${error.codeFrame}</pre>`
errorHtml += `<pre>${error.codeFrame}</pre>`
}

// Add link to help page
Expand All @@ -72,11 +168,14 @@ export const route = ({ app, program, store }): any =>
// 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
<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><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>
<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) {
Expand Down
Loading

0 comments on commit 7239e96

Please sign in to comment.