feat: add component stack to recoverable error #50943
Closed
Conversation
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
Attaches any component stack from error info to the error object on a recoverable error. This will help understanding hydration mismatch errors in production logs.
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
AndersDJohnson
commented
Jun 8, 2023
| : (error: any) => { | ||
| window.console.error(error) | ||
| : (error: any, errorInfo: ErrorInfo) => { | ||
| window.console.error(error, errorInfo) |
There was a problem hiding this comment.
Let me know whether we feel logging this to console is helpful here for use cases in production where reportError is not available. Otherwise we can reduce this PR down to only attaching err._componentStack above.
AndersDJohnson
requested review from
timneutkens,
ijjk,
shuding,
huozhi and
feedthejim
as code owners
Stats from current PRDefault BuildGeneral
Client Bundles (main, webpack)
Legacy Client Bundles (polyfills)
Client Pages
Client Build Manifests
Rendered Page Sizes
Edge SSR bundle Size
Middleware size
Next Runtimes
|
AndersDJohnson
commented
Aug 18, 2024
AndersDJohnson
commented
Aug 18, 2024
AndersDJohnson
commented
Aug 18, 2024
|
Checking the merge conflicts, it appears that this or something similar was later added via #65058 (see https://github.com/vercel/next.js/pull/65058/files#diff-40961531401a39b81aba34f10e895430cdd657ee928057817321fb857a068fd7)! 🎉 That's good news! I'll close this PR then. Thanks! |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What?
Attaches any component stack from error info to the error object on a recoverable error.
Why?
Hopefully this will help understanding hydration mismatch errors in production logs - not just in development, which we understand is already supported. I have confirmed that component stack is provided with error info in production builds. Apps can implement a custom
window.onerrororwindowerrorevent listener and grab the component stack from the error object to submit to their logging systems.How?
A simple code change to extend the error object with a
_componentStackproperty, aligning with what is already done in development with@next/react-dev-overlay. Open to other property names if preferred.Do we feel there is any risk in adding this property to the error object?
Is there a recommended way to unit test this, if needed?
Let me know if it would be necessary or useful to add documentation, and to where.
Related to #47542 and #36641 (comment).