react/scripts/error-codes
Josh Story bcbeb52bf3
[Fizz] Disallow complex children in <title> elements (#24679)
* [Fizz] Disallow complex children in <title> elements

<title> Elements in the DOM can only have Text content. In Fizz if more than one text node is emitted an HTML comment node is used as a text separator. Unfortunately because of the content restriction of the DOM representation of the title element this separator is displayed as escaped text which is not what the component author intended.

This commit special cases title handling, primarily to issue warnings if you pass complex children to <title>. At the moment title expects to receive a single child or an array of length 1. In both cases the type of that child must be string or number. If anything more complex is provided a warning will be logged to the console explaining why this is problematic.

There is no runtime behavior change so broken things are still broken (e.g. returning two text nodes which will cause a separator or using Suspense inside title children) but they should at least be accompanied by warnings that are useful.

One edge case that will now warn but won't technically break an application is if you use a Component that returns a single string as a child of title. This is a form of indirection that works but becasue we cannot discriminate between a Component that will follow the rules and one that violates them the warning is issued regardless.

* fixup dev warning conditional logic

* lints

* fix bugs
2022-06-07 00:33:36 -07:00
..
__tests__ Follow-up improvements to error code extraction infra (#22516) 2021-10-31 15:37:32 -07:00
codes.json [Fizz] Disallow complex children in <title> elements (#24679) 2022-06-07 00:33:36 -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.