react/scripts/error-codes
Andrew Clark dc27b5aaae
useMutableSource: Use StrictMode double render to detect render phase mutation (#20698)
* Concurrent Mode test for uMS render mutation

Same test as the one added in #20665, but for Concurrent Mode.

* Use double render to detect render phase mutation

PR #20665 added a mechanism to detect when a `useMutableSource` source
is mutated during the render phase. It relies on the fact that we double
invoke components that error during development using
`invokeGuardedCallback`. If the version in the double render doesn't
match the first, that indicates there must have been a mutation during
render.

At first I thought it worked by detecting inside the *other* double
render, the one we do for Strict Mode. It turns out that while it does
warn then, the warning is suppressed, because we suppress all console
methods that occur during the Strict Mode double render. So it's really
the `invokeGuardedCallback` one that makes it work.

Anyway, let's set that aside that issue for a second. I realized during
review that errors that occur during the Strict Mode double render
reveal a useful property: A pure component will never throw during the
double render, because if it were pure, it would have also thrown during
the first render... in which case it wouldn't have double rendered! This
is true of all such errors, not just the one thrown by
`useMutableSource`.

Given this, we can simplify the `useMutableSource` mutation detection
mechanism. Instead of tracking and comparing the source's version, we
can instead check if we're inside a double render when the error is
thrown.

To get around the console suppression issue, I changed the warning to an
error. It errors regardless, in both dev and prod, so it doesn't have
semantic implications.

However, because of the paradox I described above, we arguably
_shouldn't_ throw an error in development, since we know that error
won't happen in production, because prod doesn't double render. (It's
still a tearing bug, but that doesn't mean the component will actually
throw.) I considered that, but that requires a larger conversation about
how to handle errors that we know are only possible in development. I
think we should probably be suppressing *all* errors (with a warning)
that occur during a double render.
2021-02-01 12:11:51 -08:00
..
__tests__ Fix spelling errors and typos (#19138) 2020-06-15 19:59:44 -04:00
codes.json useMutableSource: Use StrictMode double render to detect render phase mutation (#20698) 2021-02-01 12:11:51 -08:00
extract-errors.js Use babel parser rather than Babylon in extract errors (#17988) 2020-02-06 12:46:32 +00: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 Fix link on error-codes/README.md (#16595) 2019-08-28 15:49:45 +01:00
transform-error-messages.js Pass prod error messages directly to constructor (#17063) 2019-10-11 09:10:40 -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.
  • transform-error-messages is a Babel pass that rewrites error messages to IDs for a production (minified) build.