feat(gatsby): New overlay for DEV_SSR #31061
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -549,18 +549,12 @@ const errors = { | |
| docsUrl: `https://www.gatsbyjs.com/docs/reference/gatsby-cli#new`, | ||
| }, | ||
| "11614": { | ||
| text: (context): string => | ||
| stripIndent(`The path "${context.path}" errored during SSR. | ||
|
There was a problem hiding this comment. Since it's a There was a problem hiding this comment.
There was a problem hiding this comment. above comment addressed in 9eb5a5b |
||
| Edit its component ${context.filePath}${ | ||
| context.line ? `:${context.line}:${context.column}` : `` | ||
| } to resolve the error.`), | ||
| level: Level.WARNING, | ||
| }, | ||
| // Watchdog | ||
| "11701": { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import * as React from "react" | ||
| import { Overlay, Header, Body, Footer, HeaderOpenClose } from "./overlay" | ||
| import { CodeFrame } from "./code-frame" | ||
| import { prettifyStack, openInEditor, skipSSR, reloadPage } from "../utils" | ||
|
|
||
| export function DevSsrError({ error }) { | ||
| const { codeFrame, source, line } = error | ||
| const decoded = prettifyStack(codeFrame) | ||
|
|
||
| return ( | ||
| <Overlay> | ||
| <Header data-gatsby-error-type="build-error"> | ||
| <div data-gatsby-overlay="header__cause-file"> | ||
| <h1 id="gatsby-overlay-labelledby">Failed to server render (SSR)</h1> | ||
| <span>{source}</span> | ||
| </div> | ||
| <HeaderOpenClose | ||
| open={() => openInEditor(source, line)} | ||
| dismiss={false} | ||
| /> | ||
| </Header> | ||
| <Body> | ||
| <p | ||
| id="gatsby-overlay-describedby" | ||
| data-gatsby-overlay="body__describedby" | ||
| > | ||
| React Components in Gatsby must render both successfully in the | ||
| browser and in a Node.js environment. When we tried to render your | ||
| page component in Node.js, it errored. | ||
| </p> | ||
| <h2>Source</h2> | ||
| <CodeFrame decoded={decoded} /> | ||
| <div data-gatsby-overlay="codeframe__bottom"> | ||
| See our docs page for more info on SSR errors:{` `} | ||
| <a href="https://www.gatsbyjs.com/docs/debugging-html-builds/"> | ||
| Debugging HTML Builds | ||
| </a> | ||
| </div> | ||
| <p> | ||
| If you fixed the error, saved your file, and want to retry server | ||
| rendering this page, please reload the page. | ||
| </p> | ||
| <button | ||
| onClick={() => reloadPage()} | ||
| data-gatsby-overlay="primary-button" | ||
| > | ||
| Reload page | ||
| </button> | ||
| <h2 style={{ marginTop: `var(--space)` }}>Skip SSR</h2> | ||
| <p> | ||
| If you don't wish to fix the SSR error at the moment, press the button | ||
| below to reload the page without attempting to do SSR. | ||
| </p> | ||
| <button onClick={() => skipSSR()} data-gatsby-overlay="primary-button"> | ||
| Skip SSR | ||
| </button> | ||
| <Footer> | ||
| <span data-font-weight="bold">Note:</span> This error will show up | ||
| during "gatsby build" so it must be fixed before then. SSR errors in | ||
| module scope, e.g. outside of your own React components can't be | ||
| skipped. | ||
| </Footer> | ||
| </Body> | ||
| </Overlay> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,17 @@ | ||
| import Anser from "anser" | ||
|
|
||
| export function prettifyStack(errorInformation) { | ||
| let txt | ||
| if (Array.isArray(errorInformation)) { | ||
| txt = errorInformation.join(`\n`) | ||
| } else { | ||
| txt = errorInformation | ||
| } | ||
| return Anser.ansiToJson(txt, { | ||
|
There was a problem hiding this comment. I was seeing weird behavior with removing the first line for all different errors. The underlying error format must have improved so this isn't necessary anymore There was a problem hiding this comment. 🤞 This doesn't give me much confidence 😛 Maybe it happened because of #30801 There was a problem hiding this comment.
Should rephrase that: The indentation for the now first line was slightly incorrect as the previously existing new line wasn't there anymore. The PR you linked might have caused this, yeah |
||
| remove_empty: true, | ||
| use_classes: true, | ||
| json: true, | ||
| }) | ||
| } | ||
|
|
||
| export function openInEditor(file, lineNumber = 1) { | ||
|
|
@@ -31,6 +23,18 @@ export function openInEditor(file, lineNumber = 1) { | |
| ) | ||
| } | ||
|
|
||
| export function reloadPage() { | ||
| window.location.reload() | ||
| } | ||
|
|
||
| export function skipSSR() { | ||
| if (`URLSearchParams` in window) { | ||
| const searchParams = new URLSearchParams(window.location.search) | ||
| searchParams.set(`skip-ssr`, `true`) | ||
| window.location.search = searchParams.toString() | ||
| } | ||
| } | ||
|
|
||
| export function getCodeFrameInformation(stackTrace) { | ||
| const callSite = stackTrace.find(CallSite => CallSite.getFileName()) | ||
| if (!callSite) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't explicitly send
500status anymore as other errors (runtime, build, graphql) also don't do that