react/scripts/error-codes
Josh Story aec575914a
[Fizz] Send errors down to client (#24551)
* use return from onError

* export getSuspenseInstanceFallbackError

* stringToChunk

* return string from onError in downstream type signatures

* 1 more type

* support encoding errors in html stream and escape user input

This commit adds another way to get errors to the suspense instance by encoding them as dataset properties of a template element at the head of the boundary. Previously if there was an error before the boundary flushed there was no way to stream the error to the client because there would never be a client render instruction.

Additionally the error is sent in 3 parts

1) error hash - this is always sent (dev or prod) if one is provided
2) error message - Dev only
3) error component stack - Dev only, this now captures the stack at the point of error

Another item addressed in this commit is the escaping of potentially unsafe data. all error components are escaped as test for browers when written into the html and as javascript strings when written into a client render instruction.

* nits

Co-authored-by: Marco Salazar <salazarm@fb.com>
2022-05-29 23:07:10 -07:00
..
__tests__ Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
codes.json [Fizz] Send errors down to client (#24551) 2022-05-29 23:07:10 -07:00
extract-errors.js Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
invertObject.js Drop the year from Facebook copyright headers and the LICENSE file. (#13593) 2018-09-07 15:11:23 -07:00
README.md Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
transform-error-messages.js Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
Types.js Update Flow to 0.84 (#17805) 2020-01-09 14:50:44 +00:00

The error code system substitutes React's error messages with error IDs to provide a better debugging support in production. Check out the blog post here.

  • codes.json contains the mapping from IDs to error messages. This file is generated by the Gulp plugin and is used by both the Babel plugin and the error decoder page in our documentation. This file is append-only, which means an existing code in the file will never be changed/removed.
  • extract-errors.js is an node script that traverses our codebase and updates codes.json. You can test it by running yarn extract-errors. It works by crawling the build artifacts directory, so you need to have either run the build script or downloaded pre-built artifacts (e.g. with yarn download build). It works with partial builds, too.
  • transform-error-messages is a Babel pass that rewrites error messages to IDs for a production (minified) build.