react/scripts/error-codes
Sebastian Markbåge 6090cab099
Use a Wrapper Error for onRecoverableError with a "cause" Field for the real Error (#28736)
We basically have four kinds of recoverable errors:

- Hydration mismatches.
- Server errored but client didn't.
- Hydration render errored but client render didn't (in Root or Suspense
boundary).
- Concurrent render errored but synchronous render didn't.

For the first three we log an additional error that the root or Suspense
boundary didn't error. This provides some context about what happened.
However, the problem is that for hydration mismatches that's unnecessary
extra context that is confusing. We also don't log any additional
context for concurrent render errors that could recover. This used to be
the only recoverable error so it didn't need extra context but now we
need to distinguish them. When we log these to `reportError` it's
confusing to just see the error because you didn't see anything error on
the page. It's also hard to group them together as one.

In this PR, I remove the unnecessary context for hydration mismatches.

For hydration and concurrent errors, I now wrap them in an error that
describes that what happened but then use the new `cause` field to link
the original error so we can keep that as the cause. The error that
happened was that hydration client rendered or you deopted to sync
render, the cause of that error is some other error.

For server errors, we control the Error object so I already had added
some context to that error object's message. Since we hide the message
in prod, it's nice not to have the raw message in DEV neither. We could
potentially split these into two errors for parity though.
2024-04-03 21:53:07 -04:00
..
__tests__ Use a Wrapper Error for onRecoverableError with a "cause" Field for the real Error (#28736) 2024-04-03 21:53:07 -04:00
codes.json Use a Wrapper Error for onRecoverableError with a "cause" Field for the real Error (#28736) 2024-04-03 21:53:07 -04:00
extract-errors.js Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
invertObject.js [useFormState] Allow sync actions (#27571) 2023-10-31 23:32:31 -04:00
README.md Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
transform-error-messages.js Use a Wrapper Error for onRecoverableError with a "cause" Field for the real Error (#28736) 2024-04-03 21:53:07 -04:00
Types.js Upgrade prettier (#26081) 2023-01-31 08:25:05 -05: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.