@samitouri / QOS-React / commits / 42c3c967d1

Compile invariant directly to throw expressions (#15071)

* Transform invariant to custom error type This transforms calls to the invariant module: ```js invariant(condition, 'A %s message that contains %s', adj, noun); ``` Into throw statements: ```js if (!condition) { if (__DEV__) { throw ReactError(`A ${adj} message that contains ${noun}`); } else { throw ReactErrorProd(ERR_CODE, adj, noun); } } ``` The only thing ReactError does is return an error whose name is set to "Invariant Violation" to match the existing behavior. ReactErrorProd is a special version used in production that throws a minified error code, with a link to see to expanded form. This replaces the reactProdInvariant module. As a next step, I would like to replace our use of the invariant module for user facing errors by transforming normal Error constructors to ReactError and ReactErrorProd. (We can continue using invariant for internal React errors that are meant to be unreachable, which was the original purpose of invariant.) * Use numbers instead of strings for error codes * Use arguments instead of an array I wasn't sure about this part so I asked Sebastian, and his rationale was that using arguments will make ReactErrorProd slightly slower, but using an array will likely make all the functions that throw slightly slower to compile, so it's hard to say which way is better. But since ReactErrorProd is in an error path, and fewer bytes is generally better, no array is good. * Casing nit

Andrew Clark committed Mar 18, 2019 at 13:58 UTC 42c3c967d1e4ca4731b47866f2090bc34caa086c
17 files changed +462 -360
packages/shared/ReactError.js new
+19
@@ -0,0 +1,19 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + */
8 +
9 +// Do not require this module directly! Use a normal error constructor with
10 +// template literal strings. The messages will be converted to ReactError during
11 +// build, and in production they will be minified.
12 +
13 +function ReactError(message) {
14 + const error = new Error(message);
15 + error.name = 'Invariant Violation';
16 + return error;
17 +}
18 +
19 +export default ReactError;
packages/shared/ReactErrorProd.js new
+25
@@ -0,0 +1,25 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + */
8 +
9 +// Do not require this module directly! Use a normal error constructor with
10 +// template literal strings. The messages will be converted to ReactError during
11 +// build, and in production they will be minified.
12 +
13 +function ReactErrorProd(code) {
14 + let url = 'https://reactjs.org/docs/error-decoder.html?invariant=' + code;
15 + for (let i = 1; i < arguments.length; i++) {
16 + url += '&args[]=' + encodeURIComponent(arguments[i]);
17 + }
18 + return new Error(
19 + `Minified React error #${code}; visit ${url} for the full message or ` +
20 + 'use the non-minified dev environment for full errors and additional ' +
21 + 'helpful warnings. ',
22 + );
23 +}
24 +
25 +export default ReactErrorProd;
packages/shared/__tests__/ReactError-test.internal.js new
+72
@@ -0,0 +1,72 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @emails react-core
8 + */
9 +'use strict';
10 +
11 +let React;
12 +let ReactDOM;
13 +
14 +describe('ReactError', () => {
15 + let globalErrorMock;
16 +
17 + beforeEach(() => {
18 + if (!__DEV__) {
19 + // In production, our Jest environment overrides the global Error
20 + // class in order to decode error messages automatically. However
21 + // this is a single test where we actually *don't* want to decode
22 + // them. So we assert that the OriginalError exists, and temporarily
23 + // set the global Error object back to it.
24 + globalErrorMock = global.Error;
25 + global.Error = globalErrorMock.OriginalError;
26 + expect(typeof global.Error).toBe('function');
27 + }
28 + jest.resetModules();
29 + React = require('react');
30 + ReactDOM = require('react-dom');
31 + });
32 +
33 + afterEach(() => {
34 + if (!__DEV__) {
35 + global.Error = globalErrorMock;
36 + }
37 + });
38 +
39 + if (__DEV__) {
40 + it('should throw errors whose name is "Invariant Violation"', () => {
41 + let error;
42 + try {
43 + React.useState();
44 + } catch (e) {
45 + error = e;
46 + }
47 + expect(error.name).toEqual('Invariant Violation');
48 + });
49 + } else {
50 + it('should error with minified error code', () => {
51 + expect(() => ReactDOM.render('Hi', null)).toThrowError(
52 + 'Minified React error #200; visit ' +
53 + 'https://reactjs.org/docs/error-decoder.html?invariant=200' +
54 + ' for the full message or use the non-minified dev environment' +
55 + ' for full errors and additional helpful warnings.',
56 + );
57 + });
58 + it('should serialize arguments', () => {
59 + function Oops() {
60 + return;
61 + }
62 + Oops.displayName = '#wtf';
63 + const container = document.createElement('div');
64 + expect(() => ReactDOM.render(<Oops />, container)).toThrowError(
65 + 'Minified React error #152; visit ' +
66 + 'https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=%23wtf' +
67 + ' for the full message or use the non-minified dev environment' +
68 + ' for full errors and additional helpful warnings.',
69 + );
70 + });
71 + }
72 +});
packages/shared/__tests__/ReactErrorProd-test.internal.js renamed
+6 -6
@@ -8,9 +8,9 @@
8 */
9 'use strict';
10
11 -let reactProdInvariant;
11 +let ReactErrorProd;
12
13 -describe('reactProdInvariant', () => {
13 +describe('ReactErrorProd', () => {
14 let globalErrorMock;
15
16 beforeEach(() => {
@@ -25,7 +25,7 @@ describe('reactProdInvariant', () => {
25 expect(typeof global.Error).toBe('function');
26 }
27 jest.resetModules();
28 - reactProdInvariant = require('shared/reactProdInvariant').default;
28 + ReactErrorProd = require('shared/ReactErrorProd').default;
29 });
30
31 afterEach(() => {
@@ -36,7 +36,7 @@ describe('reactProdInvariant', () => {
36
37 it('should throw with the correct number of `%s`s in the URL', () => {
38 expect(function() {
39 - reactProdInvariant(124, 'foo', 'bar');
39 + throw ReactErrorProd(124, 'foo', 'bar');
40 }).toThrowError(
41 'Minified React error #124; visit ' +
42 'https://reactjs.org/docs/error-decoder.html?invariant=124&args[]=foo&args[]=bar' +
@@ -45,7 +45,7 @@ describe('reactProdInvariant', () => {
45 );
46
47 expect(function() {
48 - reactProdInvariant(20);
48 + throw ReactErrorProd(20);
49 }).toThrowError(
50 'Minified React error #20; visit ' +
51 'https://reactjs.org/docs/error-decoder.html?invariant=20' +
@@ -54,7 +54,7 @@ describe('reactProdInvariant', () => {
54 );
55
56 expect(function() {
57 - reactProdInvariant(77, '<div>', '&?bar');
57 + throw ReactErrorProd(77, '<div>', '&?bar');
58 }).toThrowError(
59 'Minified React error #77; visit ' +
60 'https://reactjs.org/docs/error-decoder.html?invariant=77&args[]=%3Cdiv%3E&args[]=%26%3Fbar' +
packages/shared/forks/invariant.www.js deleted
-8
@@ -1,8 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - */
7 -
8 -export default require('invariant');
packages/shared/invariant.js
+4 -33
@@ -17,38 +17,9 @@
17 * will remain to ensure logic does not differ in production.
18 */
19
20 -let validateFormat = () => {};
21 -
22 -if (__DEV__) {
23 - validateFormat = function(format) {
24 - if (format === undefined) {
25 - throw new Error('invariant requires an error message argument');
26 - }
27 - };
28 -}
29 -
20 export default function invariant(condition, format, a, b, c, d, e, f) {
31 - validateFormat(format);
32 -
33 - if (!condition) {
34 - let error;
35 - if (format === undefined) {
36 - error = new Error(
37 - 'Minified exception occurred; use the non-minified dev environment ' +
38 - 'for the full error message and additional helpful warnings.',
39 - );
40 - } else {
41 - const args = [a, b, c, d, e, f];
42 - let argIndex = 0;
43 - error = new Error(
44 - format.replace(/%s/g, function() {
45 - return args[argIndex++];
46 - }),
47 - );
48 - error.name = 'Invariant Violation';
49 - }
50 -
51 - error.framesToPop = 1; // we don't care about invariant's own frame
52 - throw error;
53 - }
21 + throw new Error(
22 + 'Internal React error: invariant() is meant to be replaced at compile ' +
23 + 'time. There is no runtime version.',
24 + );
25 }
packages/shared/reactProdInvariant.js deleted
-43
@@ -1,43 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -// Relying on the `invariant()` implementation lets us
11 -// preserve the format and params in the www builds.
12 -import invariant from 'shared/invariant';
13 -
14 -/**
15 - * WARNING: DO NOT manually require this module.
16 - * This is a replacement for `invariant(...)` used by the error code system
17 - * and will _only_ be required by the corresponding babel pass.
18 - * It always throws.
19 - */
20 -function reactProdInvariant(code: string): void {
21 - const argCount = arguments.length - 1;
22 - let url = 'https://reactjs.org/docs/error-decoder.html?invariant=' + code;
23 - for (let argIdx = 0; argIdx < argCount; argIdx++) {
24 - url += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]);
25 - }
26 - // Rename it so that our build transform doesn't attempt
27 - // to replace this invariant() call with reactProdInvariant().
28 - const i = invariant;
29 - i(
30 - false,
31 - // The error code is intentionally part of the message (and
32 - // not the format argument) so that we could deduplicate
33 - // different errors in logs based on the code.
34 - 'Minified React error #' +
35 - code +
36 - '; visit %s ' +
37 - 'for the full message or use the non-minified dev environment ' +
38 - 'for full errors and additional helpful warnings. ',
39 - url,
40 - );
41 -}
42 -
43 -export default reactProdInvariant;
scripts/error-codes/README.md
+16 -13
@@ -1,14 +1,17 @@
1 -The error code system substitutes React's invariant error messages with error IDs to provide a better debugging support in production. Check out the blog post [here](https://reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html).
1 +The error code system substitutes React's error messages with error IDs to
2 +provide a better debugging support in production. Check out the blog post
3 +[here](https://reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html).
4
3 -## Note for cutting a new React release
4 -1. For each release, we run `yarn build -- --extract-errors` to update the error codes before calling `yarn build`. The build step uses `codes.json` for a production (minified) build; there should be no warning like `Error message "foo" cannot be found` for a successful release.
5 -2. The updated `codes.json` file should be synced back to the master branch. The error decoder page in our documentation site uses `codes.json` from master; if the json file has been updated, the docs site should also be rebuilt (`rake copy_error_codes` is included in the default `rake release` task).
6 -3. Be certain to run `yarn build -- --extract-errors` directly in the release branch (if not master) to ensure the correct error codes are generated. These error messages might be changed/removed before cutting a new release, and we don't want to add intermediate/temporary error messages to `codes.json`. However, if a PR changes an existing error message and there's a specific production test (which is rare), it's ok to update `codes.json` for that. Please use `yarn build -- --extract-errors` and don't edit the file manually.
7 -
8 -## Structure
9 -The error code system consists of 5 parts:
10 -- [`codes.json`](https://github.com/facebook/react/blob/master/scripts/error-codes/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.
11 -- [`extract-errors.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js) is an node script that traverses our codebase and updates `codes.json`. Use it by calling `yarn build -- --extract-errors`.
12 -- [`replace-invariant-error-codes.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) is a Babel pass that rewrites error messages to IDs for a production (minified) build.
13 -- [`reactProdInvariant.js`](https://github.com/facebook/react/blob/master/src/shared/utils/reactProdInvariant.js) is the replacement for `invariant` in production. This file gets imported by the Babel plugin and should _not_ be used manually.
14 -- [`ErrorDecoderComponent`](https://github.com/facebook/react/blob/master/docs/_js/ErrorDecoderComponent.js) is a React component that lives at https://reactjs.org/docs/error-decoder.html. This page takes parameters like `?invariant=109&args[]=Foo` and displays a corresponding error message. Our documentation site's [`Rakefile`](https://github.com/facebook/react/blob/master/docs/Rakefile#L64-L69) has a task (`bundle exec rake copy_error_codes`) for adding the latest `codes.json` to the error decoder page. This task is included in the default `bundle exec rake release` task.
5 +- [`codes.json`](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json)
6 + contains the mapping from IDs to error messages. This file is generated by the
7 + Gulp plugin and is used by both the Babel plugin and the error decoder page in
8 + our documentation. This file is append-only, which means an existing code in
9 + the file will never be changed/removed.
10 +- [`extract-errors.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js)
11 + is an node script that traverses our codebase and updates `codes.json`. You
12 + can test it by running `yarn build -- --extract-errors`, but you should only
13 + commit changes to this file when running a release. (The release tool will
14 + perform this step automatically.)
15 +- [`minify-error-codes`](https://github.com/facebook/react/blob/master/scripts/error-codes/minify-error-codes)
16 + is a Babel pass that rewrites error messages to IDs for a production
17 + (minified) build.
scripts/error-codes/__tests__/__snapshots__/minify-error-messages.js.snap new
+96
@@ -0,0 +1,96 @@
1 +// Jest Snapshot v1, https://goo.gl/fbAQLP
2 +
3 +exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
4 +"import _ReactError from 'shared/ReactError';
5 +
6 +import invariant from 'shared/invariant';
7 +(function () {
8 + if (!condition) {
9 + throw _ReactError(\`This is not a real error message.\`);
10 + }
11 +})();"
12 +`;
13 +
14 +exports[`error transform should handle escaped characters 1`] = `
15 +"import _ReactError from 'shared/ReactError';
16 +
17 +import invariant from 'shared/invariant';
18 +(function () {
19 + if (!condition) {
20 + throw _ReactError(\`What's up?\`);
21 + }
22 +})();"
23 +`;
24 +
25 +exports[`error transform should only add \`ReactError\` and \`ReactErrorProd\` once each 1`] = `
26 +"import _ReactErrorProd from 'shared/ReactErrorProd';
27 +import _ReactError from 'shared/ReactError';
28 +
29 +import invariant from 'shared/invariant';
30 +(function () {
31 + if (!condition) {
32 + if (__DEV__) {
33 + throw _ReactError(\`Do not override existing functions.\`);
34 + } else {
35 + throw _ReactErrorProd(16);
36 + }
37 + }
38 +})();
39 +(function () {
40 + if (!condition) {
41 + if (__DEV__) {
42 + throw _ReactError(\`Do not override existing functions.\`);
43 + } else {
44 + throw _ReactErrorProd(16);
45 + }
46 + }
47 +})();"
48 +`;
49 +
50 +exports[`error transform should replace simple invariant calls 1`] = `
51 +"import _ReactErrorProd from 'shared/ReactErrorProd';
52 +import _ReactError from 'shared/ReactError';
53 +
54 +import invariant from 'shared/invariant';
55 +(function () {
56 + if (!condition) {
57 + if (__DEV__) {
58 + throw _ReactError(\`Do not override existing functions.\`);
59 + } else {
60 + throw _ReactErrorProd(16);
61 + }
62 + }
63 +})();"
64 +`;
65 +
66 +exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
67 +"import _ReactErrorProd from 'shared/ReactErrorProd';
68 +import _ReactError from 'shared/ReactError';
69 +
70 +import invariant from 'shared/invariant';
71 +(function () {
72 + if (!condition) {
73 + if (__DEV__) {
74 + throw _ReactError(\`Expected a component class, got \${Foo}.\${Bar}\`);
75 + } else {
76 + throw _ReactErrorProd(18, Foo, Bar);
77 + }
78 + }
79 +})();"
80 +`;
81 +
82 +exports[`error transform should support invariant calls with args 1`] = `
83 +"import _ReactErrorProd from 'shared/ReactErrorProd';
84 +import _ReactError from 'shared/ReactError';
85 +
86 +import invariant from 'shared/invariant';
87 +(function () {
88 + if (!condition) {
89 + if (__DEV__) {
90 + throw _ReactError(\`Expected \${foo} target to be an array; got \${bar}\`);
91 + } else {
92 + throw _ReactErrorProd(7, foo, bar);
93 + }
94 + }
95 +})();"
96 +`;
scripts/error-codes/__tests__/minify-error-messages.js new
+85
@@ -0,0 +1,85 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + */
7 +/* eslint-disable quotes */
8 +'use strict';
9 +
10 +let babel = require('babel-core');
11 +let devExpressionWithCodes = require('../minify-error-messages');
12 +
13 +function transform(input) {
14 + return babel.transform(input, {
15 + plugins: [devExpressionWithCodes],
16 + }).code;
17 +}
18 +
19 +let oldEnv;
20 +
21 +describe('error transform', () => {
22 + beforeEach(() => {
23 + oldEnv = process.env.NODE_ENV;
24 + process.env.NODE_ENV = '';
25 + });
26 +
27 + afterEach(() => {
28 + process.env.NODE_ENV = oldEnv;
29 + });
30 +
31 + it('should replace simple invariant calls', () => {
32 + expect(
33 + transform(`
34 +import invariant from 'shared/invariant';
35 +invariant(condition, 'Do not override existing functions.');
36 +`)
37 + ).toMatchSnapshot();
38 + });
39 +
40 + it('should only add `ReactError` and `ReactErrorProd` once each', () => {
41 + expect(
42 + transform(`
43 +import invariant from 'shared/invariant';
44 +invariant(condition, 'Do not override existing functions.');
45 +invariant(condition, 'Do not override existing functions.');
46 +`)
47 + ).toMatchSnapshot();
48 + });
49 +
50 + it('should support invariant calls with args', () => {
51 + expect(
52 + transform(`
53 +import invariant from 'shared/invariant';
54 +invariant(condition, 'Expected %s target to be an array; got %s', foo, bar);
55 +`)
56 + ).toMatchSnapshot();
57 + });
58 +
59 + it('should support invariant calls with a concatenated template string and args', () => {
60 + expect(
61 + transform(`
62 +import invariant from 'shared/invariant';
63 +invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', Foo, Bar);
64 +`)
65 + ).toMatchSnapshot();
66 + });
67 +
68 + it('should correctly transform invariants that are not in the error codes map', () => {
69 + expect(
70 + transform(`
71 +import invariant from 'shared/invariant';
72 +invariant(condition, 'This is not a real error message.');
73 +`)
74 + ).toMatchSnapshot();
75 + });
76 +
77 + it('should handle escaped characters', () => {
78 + expect(
79 + transform(`
80 +import invariant from 'shared/invariant';
81 +invariant(condition, 'What\\'s up?');
82 +`)
83 + ).toMatchSnapshot();
84 + });
85 +});
scripts/error-codes/__tests__/replace-invariant-error-codes-test.js deleted
-102
@@ -1,102 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - */
7 -/* eslint-disable quotes */
8 -'use strict';
9 -
10 -let babel = require('babel-core');
11 -let devExpressionWithCodes = require('../replace-invariant-error-codes');
12 -
13 -function transform(input) {
14 - return babel.transform(input, {
15 - plugins: [devExpressionWithCodes],
16 - }).code;
17 -}
18 -
19 -function compare(input, output) {
20 - const compiled = transform(input);
21 - expect(compiled).toEqual(output);
22 -}
23 -
24 -let oldEnv;
25 -
26 -describe('error codes transform', () => {
27 - beforeEach(() => {
28 - oldEnv = process.env.NODE_ENV;
29 - process.env.NODE_ENV = '';
30 - });
31 -
32 - afterEach(() => {
33 - process.env.NODE_ENV = oldEnv;
34 - });
35 -
36 - it('should replace simple invariant calls', () => {
37 - compare(
38 - "import invariant from 'shared/invariant';\n" +
39 - "invariant(condition, 'Do not override existing functions.');",
40 - "import _prodInvariant from 'shared/reactProdInvariant';\n" +
41 - "import invariant from 'shared/invariant';\n" +
42 - '!condition ? ' +
43 - '__DEV__ ? ' +
44 - "invariant(false, 'Do not override existing functions.') : " +
45 - `_prodInvariant('16') : void 0;`
46 - );
47 - });
48 -
49 - it('should only add `reactProdInvariant` once', () => {
50 - const expectedInvariantTransformResult =
51 - '!condition ? ' +
52 - '__DEV__ ? ' +
53 - "invariant(false, 'Do not override existing functions.') : " +
54 - `_prodInvariant('16') : void 0;`;
55 -
56 - compare(
57 - `import invariant from 'shared/invariant';
58 -invariant(condition, 'Do not override existing functions.');
59 -invariant(condition, 'Do not override existing functions.');`,
60 - `import _prodInvariant from 'shared/reactProdInvariant';
61 -import invariant from 'shared/invariant';
62 -${expectedInvariantTransformResult}
63 -${expectedInvariantTransformResult}`
64 - );
65 - });
66 -
67 - it('should support invariant calls with args', () => {
68 - compare(
69 - "import invariant from 'shared/invariant';\n" +
70 - "invariant(condition, 'Expected %s target to be an array; got %s', 'foo', 'bar');",
71 - "import _prodInvariant from 'shared/reactProdInvariant';\n" +
72 - "import invariant from 'shared/invariant';\n" +
73 - '!condition ? ' +
74 - '__DEV__ ? ' +
75 - "invariant(false, 'Expected %s target to be an array; got %s', 'foo', 'bar') : " +
76 - `_prodInvariant('7', 'foo', 'bar') : void 0;`
77 - );
78 - });
79 -
80 - it('should support invariant calls with a concatenated template string and args', () => {
81 - compare(
82 - "import invariant from 'shared/invariant';\n" +
83 - "invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', 'Foo', 'Bar');",
84 - "import _prodInvariant from 'shared/reactProdInvariant';\n" +
85 - "import invariant from 'shared/invariant';\n" +
86 - '!condition ? ' +
87 - '__DEV__ ? ' +
88 - "invariant(false, 'Expected a component class, got %s.%s', 'Foo', 'Bar') : " +
89 - `_prodInvariant('18', 'Foo', 'Bar') : void 0;`
90 - );
91 - });
92 -
93 - it('should correctly transform invariants that are not in the error codes map', () => {
94 - compare(
95 - "import invariant from 'shared/invariant';\n" +
96 - "invariant(condition, 'This is not a real error message.');",
97 - "import _prodInvariant from 'shared/reactProdInvariant';\n" +
98 - "import invariant from 'shared/invariant';\n" +
99 - "!condition ? invariant(false, 'This is not a real error message.') : void 0;"
100 - );
101 - });
102 -});
scripts/error-codes/extract-errors.js
+8 -5
@@ -76,17 +76,20 @@ module.exports = function(opts) {
76 // error messages can be concatenated (`+`) at runtime, so here's a
77 // trivial partial evaluator that interprets the literal value
78 const errorMsgLiteral = evalToString(node.arguments[1]);
79 - if (existingErrorMap.hasOwnProperty(errorMsgLiteral)) {
80 - return;
81 - }
82 -
83 - existingErrorMap[errorMsgLiteral] = '' + currentID++;
79 + addToErrorMap(errorMsgLiteral);
80 }
81 },
82 },
83 });
84 }
85
86 + function addToErrorMap(errorMsgLiteral) {
87 + if (existingErrorMap.hasOwnProperty(errorMsgLiteral)) {
88 + return;
89 + }
90 + existingErrorMap[errorMsgLiteral] = '' + currentID++;
91 + }
92 +
93 function flush(cb) {
94 fs.writeFileSync(
95 errorMapFilePath,
scripts/error-codes/minify-error-messages.js new
+128
@@ -0,0 +1,128 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + */
7 +'use strict';
8 +
9 +const fs = require('fs');
10 +const evalToString = require('../shared/evalToString');
11 +const invertObject = require('./invertObject');
12 +
13 +module.exports = function(babel) {
14 + const t = babel.types;
15 +
16 + const DEV_EXPRESSION = t.identifier('__DEV__');
17 +
18 + return {
19 + visitor: {
20 + CallExpression(path, file) {
21 + const node = path.node;
22 + if (path.get('callee').isIdentifier({name: 'invariant'})) {
23 + // Turns this code:
24 + //
25 + // invariant(condition, 'A %s message that contains %s', adj, noun);
26 + //
27 + // into this:
28 + //
29 + // if (!condition) {
30 + // if (__DEV__) {
31 + // throw ReactError(`A ${adj} message that contains ${noun}`);
32 + // } else {
33 + // throw ReactErrorProd(ERR_CODE, adj, noun);
34 + // }
35 + // }
36 + //
37 + // where ERR_CODE is an error code: a unique identifier (a number
38 + // string) that references a verbose error message. The mapping is
39 + // stored in `scripts/error-codes/codes.json`.
40 + const condition = node.arguments[0];
41 + const errorMsgLiteral = evalToString(node.arguments[1]);
42 + const errorMsgExpressions = Array.from(node.arguments.slice(2));
43 + const errorMsgQuasis = errorMsgLiteral
44 + .split('%s')
45 + .map(raw => t.templateElement({raw, cooked: String.raw({raw})}));
46 +
47 + // Import ReactError
48 + const reactErrorIdentfier = file.addImport(
49 + 'shared/ReactError',
50 + 'default',
51 + 'ReactError'
52 + );
53 +
54 + // Outputs:
55 + // throw ReactError(`A ${adj} message that contains ${noun}`);
56 + const devThrow = t.throwStatement(
57 + t.callExpression(reactErrorIdentfier, [
58 + t.templateLiteral(errorMsgQuasis, errorMsgExpressions),
59 + ])
60 + );
61 +
62 + // Avoid caching because we write it as we go.
63 + const existingErrorMap = JSON.parse(
64 + fs.readFileSync(__dirname + '/codes.json', 'utf-8')
65 + );
66 + const errorMap = invertObject(existingErrorMap);
67 +
68 + let prodErrorId = errorMap[errorMsgLiteral];
69 + if (prodErrorId === undefined) {
70 + // There is no error code for this message. We use a lint rule to
71 + // enforce that messages can be minified, so assume this is
72 + // intentional and exit gracefully.
73 + //
74 + // Outputs:
75 + // if (!condition) {
76 + // throw ReactError(`A ${adj} message that contains ${noun}`);
77 + // }
78 + path.replaceWith(
79 + t.ifStatement(
80 + t.unaryExpression('!', condition),
81 + t.blockStatement([devThrow])
82 + )
83 + );
84 + return;
85 + }
86 + prodErrorId = parseInt(prodErrorId, 10);
87 +
88 + // Import ReactErrorProd
89 + const reactErrorProdIdentfier = file.addImport(
90 + 'shared/ReactErrorProd',
91 + 'default',
92 + 'ReactErrorProd'
93 + );
94 +
95 + // Outputs:
96 + // throw ReactErrorProd(ERR_CODE, adj, noun);
97 + const prodThrow = t.throwStatement(
98 + t.callExpression(reactErrorProdIdentfier, [
99 + t.numericLiteral(prodErrorId),
100 + ...errorMsgExpressions,
101 + ])
102 + );
103 +
104 + // Outputs:
105 + // if (!condition) {
106 + // if (__DEV__) {
107 + // throw ReactError(`A ${adj} message that contains ${noun}`);
108 + // } else {
109 + // throw ReactErrorProd(ERR_CODE, adj, noun);
110 + // }
111 + // }
112 + path.replaceWith(
113 + t.ifStatement(
114 + t.unaryExpression('!', condition),
115 + t.blockStatement([
116 + t.ifStatement(
117 + DEV_EXPRESSION,
118 + t.blockStatement([devThrow]),
119 + t.blockStatement([prodThrow])
120 + ),
121 + ])
122 + )
123 + );
124 + }
125 + },
126 + },
127 + };
128 +};
scripts/error-codes/replace-invariant-error-codes.js deleted
-135
@@ -1,135 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - */
7 -'use strict';
8 -
9 -const fs = require('fs');
10 -const evalToString = require('../shared/evalToString');
11 -const invertObject = require('./invertObject');
12 -
13 -module.exports = function(babel) {
14 - const t = babel.types;
15 -
16 - const SEEN_SYMBOL = Symbol('replace-invariant-error-codes.seen');
17 -
18 - // Generate a hygienic identifier
19 - function getProdInvariantIdentifier(path, file, localState) {
20 - if (!localState.prodInvariantIdentifier) {
21 - localState.prodInvariantIdentifier = file.addImport(
22 - 'shared/reactProdInvariant',
23 - 'default',
24 - 'prodInvariant'
25 - );
26 - }
27 - return localState.prodInvariantIdentifier;
28 - }
29 -
30 - const DEV_EXPRESSION = t.identifier('__DEV__');
31 -
32 - return {
33 - pre() {
34 - this.prodInvariantIdentifier = null;
35 - },
36 -
37 - visitor: {
38 - CallExpression: {
39 - exit(path, file) {
40 - const node = path.node;
41 - // Ignore if it's already been processed
42 - if (node[SEEN_SYMBOL]) {
43 - return;
44 - }
45 - // Insert `import PROD_INVARIANT from 'reactProdInvariant';`
46 - // before all `invariant()` calls.
47 - if (path.get('callee').isIdentifier({name: 'invariant'})) {
48 - // Turns this code:
49 - //
50 - // invariant(condition, argument, 'foo', 'bar');
51 - //
52 - // into this:
53 - //
54 - // if (!condition) {
55 - // if ("production" !== process.env.NODE_ENV) {
56 - // invariant(false, argument, 'foo', 'bar');
57 - // } else {
58 - // PROD_INVARIANT('XYZ', 'foo', 'bar');
59 - // }
60 - // }
61 - //
62 - // where
63 - // - `XYZ` is an error code: a unique identifier (a number string)
64 - // that references a verbose error message.
65 - // The mapping is stored in `scripts/error-codes/codes.json`.
66 - // - `PROD_INVARIANT` is the `reactProdInvariant` function that always throws with an error URL like
67 - // http://reactjs.org/docs/error-decoder.html?invariant=XYZ&args[]=foo&args[]=bar
68 - //
69 - // Specifically this does 3 things:
70 - // 1. Checks the condition first, preventing an extra function call.
71 - // 2. Adds an environment check so that verbose error messages aren't
72 - // shipped to production.
73 - // 3. Rewrites the call to `invariant` in production to `reactProdInvariant`
74 - // - `reactProdInvariant` is always renamed to avoid shadowing
75 - // The generated code is longer than the original code but will dead
76 - // code removal in a minifier will strip that out.
77 - const condition = node.arguments[0];
78 - const errorMsgLiteral = evalToString(node.arguments[1]);
79 -
80 - const devInvariant = t.callExpression(
81 - node.callee,
82 - [
83 - t.booleanLiteral(false),
84 - t.stringLiteral(errorMsgLiteral),
85 - ].concat(node.arguments.slice(2))
86 - );
87 -
88 - devInvariant[SEEN_SYMBOL] = true;
89 -
90 - // Avoid caching because we write it as we go.
91 - const existingErrorMap = JSON.parse(
92 - fs.readFileSync(__dirname + '/codes.json', 'utf-8')
93 - );
94 - const errorMap = invertObject(existingErrorMap);
95 -
96 - const localInvariantId = getProdInvariantIdentifier(
97 - path,
98 - file,
99 - this
100 - );
101 - const prodErrorId = errorMap[errorMsgLiteral];
102 - let body = null;
103 -
104 - if (prodErrorId === undefined) {
105 - // The error wasn't found in the map.
106 - // This is only expected to occur on master since we extract codes before releases.
107 - // Keep the original invariant.
108 - body = t.expressionStatement(devInvariant);
109 - } else {
110 - const prodInvariant = t.callExpression(
111 - localInvariantId,
112 - [t.stringLiteral(prodErrorId)].concat(node.arguments.slice(2))
113 - );
114 - prodInvariant[SEEN_SYMBOL] = true;
115 - // The error was found in the map.
116 - // Switch between development and production versions depending on the env.
117 - body = t.ifStatement(
118 - DEV_EXPRESSION,
119 - t.blockStatement([t.expressionStatement(devInvariant)]),
120 - t.blockStatement([t.expressionStatement(prodInvariant)])
121 - );
122 - }
123 -
124 - path.replaceWith(
125 - t.ifStatement(
126 - t.unaryExpression('!', condition),
127 - t.blockStatement([body])
128 - )
129 - );
130 - }
131 - },
132 - },
133 - },
134 - };
135 -};
scripts/jest/preprocessor.js
+1 -1
@@ -15,7 +15,7 @@ const pathToBabel = path.join(
15 'package.json'
16 );
17 const pathToBabelPluginDevWithCode = require.resolve(
18 - '../error-codes/replace-invariant-error-codes'
18 + '../error-codes/minify-error-messages'
19 );
20 const pathToBabelPluginWrapWarning = require.resolve(
21 '../babel/wrap-warning-with-env-check'
scripts/rollup/build.js
+2 -2
@@ -113,7 +113,7 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
113 return Object.assign({}, options, {
114 plugins: options.plugins.concat([
115 // Minify invariant messages
116 - require('../error-codes/replace-invariant-error-codes'),
116 + require('../error-codes/minify-error-messages'),
117 // Wrap warning() calls in a __DEV__ check so they are stripped from production.
118 require('../babel/wrap-warning-with-env-check'),
119 ]),
@@ -141,7 +141,7 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
141 // Use object-assign polyfill in open source
142 path.resolve('./scripts/babel/transform-object-assign-require'),
143 // Minify invariant messages
144 - require('../error-codes/replace-invariant-error-codes'),
144 + require('../error-codes/minify-error-messages'),
145 // Wrap warning() calls in a __DEV__ check so they are stripped from production.
146 require('../babel/wrap-warning-with-env-check'),
147 ]),
scripts/rollup/forks.js
-12
@@ -180,18 +180,6 @@ const forks = Object.freeze({
180 return 'scheduler/src/forks/SchedulerHostConfig.default';
181 },
182
183 - // This logic is forked on www to fork the formatting function.
184 - 'shared/invariant': (bundleType, entry) => {
185 - switch (bundleType) {
186 - case FB_WWW_DEV:
187 - case FB_WWW_PROD:
188 - case FB_WWW_PROFILING:
189 - return 'shared/forks/invariant.www.js';
190 - default:
191 - return null;
192 - }
193 - },
194 -
183 // This logic is forked on www to ignore some warnings.
184 'shared/lowPriorityWarning': (bundleType, entry) => {
185 switch (bundleType) {