react/scripts/error-codes
Andrew Clark cc24d0ea56
Invariant that throws when committing wrong tree (#15517)
If React finishes rendering a tree, delays committing it (e.g.
Suspense), then subsequently starts over or renders a new tree, the
pending tree is no longer valid. That's because rendering a new work-in
progress mutates the old one in place.

The current structure of the work loop makes this hard to reason about
because, although `renderRoot` and `commitRoot` are separate functions,
they can't be interleaved. If they are interleaved by accident, it
either results in inconsistent render output or invariant violations
that are hard to debug.

This commit adds an invariant that throws if the new tree is the same as
the old one. This won't prevent all bugs of this class, but it should
catch the most common kind.

To implement the invariant, I store the finished tree on a field on the
root. We already had a field for this, but it was only being used for
the unstable `createBatch` feature.

A more rigorous way to address this type of problem could be to unify
`renderRoot` and `commitRoot` into a single function, so that it's
harder to accidentally interleave the two phases. I plan to do something
like this in a follow-up.
2019-05-13 16:15:50 -07:00
..
__tests__ Include full error messages in React Native build (#15363) 2019-04-09 16:40:19 -07:00
codes.json Invariant that throws when committing wrong tree (#15517) 2019-05-13 16:15:50 -07:00
extract-errors.js Compile invariant directly to throw expressions (#15071) 2019-03-18 13:58:03 -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 Include full error messages in React Native build (#15363) 2019-04-09 16:40:19 -07:00
transform-error-messages.js Include full error messages in React Native build (#15363) 2019-04-09 16:40:19 -07:00
Types.js Drop the year from Facebook copyright headers and the LICENSE file. (#13593) 2018-09-07 15:11:23 -07: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 build -- --extract-errors, but you should only commit changes to this file when running a release. (The release tool will perform this step automatically.)
  • transform-error-messages is a Babel pass that rewrites error messages to IDs for a production (minified) build.