2016-06-01 11:21:26 -07:00
|
|
|
/**
|
2018-09-07 15:11:23 -07:00
|
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
2016-06-01 11:21:26 -07:00
|
|
|
*
|
2017-09-24 13:48:13 -07:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2016-06-01 11:21:26 -07:00
|
|
|
*/
|
|
|
|
|
'use strict';
|
|
|
|
|
|
2020-02-06 12:46:32 +00:00
|
|
|
const parser = require('@babel/parser');
|
2017-04-05 16:47:29 +01:00
|
|
|
const fs = require('fs');
|
|
|
|
|
const path = require('path');
|
2019-08-08 17:46:35 -07:00
|
|
|
const traverse = require('@babel/traverse').default;
|
[RFC] Codemod invariant -> throw new Error (#22435)
* Hoist error codes import to module scope
When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.
Because `codes.json` is now checked into source, we can import it a
single time in module scope.
* Minify error constructors in production
We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92
This enables us to write helpful error messages without increasing the
bundle size.
Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.
So, I've updated the script to minify error constructors, too:
Input:
Error(`A ${adj} message that contains ${noun}`);
Output:
Error(formatProdErrorMessage(ERR_CODE, adj, noun));
It only works for constructors that are literally named Error, though we
could add support for other names, too.
As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.
* Minify "no fallback UI specified" error in prod
This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.
Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.
To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.
* Lint rule to detect unminified errors
Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.
We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.
There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.
* Temporarily add invariant codemod script
I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.
* [Automated] Codemod invariant -> Error
This commit contains only automated changes:
npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier
I will do any manual touch ups in separate commits so they're easier
to review.
* Remove temporary codemod script
This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.
* Manual touch ups
A few manual changes I made after the codemod ran.
* Enable error code transform per package
Currently we're not consistent about which packages should have their
errors minified in production and which ones should.
This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
2021-09-30 15:01:28 -04:00
|
|
|
const {evalStringConcat} = require('../shared/evalToString');
|
2017-04-05 16:47:29 +01:00
|
|
|
const invertObject = require('./invertObject');
|
|
|
|
|
|
|
|
|
|
const babylonOptions = {
|
2016-06-01 11:21:26 -07:00
|
|
|
sourceType: 'module',
|
|
|
|
|
// As a parser, babylon has its own options and we can't directly
|
|
|
|
|
// import/require a babel preset. It should be kept **the same** as
|
|
|
|
|
// the `babel-plugin-syntax-*` ones specified in
|
2021-07-30 18:26:55 +05:30
|
|
|
// https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
|
2016-06-01 11:21:26 -07:00
|
|
|
plugins: [
|
|
|
|
|
'classProperties',
|
|
|
|
|
'flow',
|
|
|
|
|
'jsx',
|
|
|
|
|
'trailingFunctionCommas',
|
|
|
|
|
'objectRestSpread',
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
module.exports = function(opts) {
|
|
|
|
|
if (!opts || !('errorMapFilePath' in opts)) {
|
2017-04-05 16:47:29 +01:00
|
|
|
throw new Error(
|
2016-06-01 11:21:26 -07:00
|
|
|
'Missing options. Ensure you pass an object with `errorMapFilePath`.'
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-28 23:13:12 -02:00
|
|
|
const errorMapFilePath = opts.errorMapFilePath;
|
|
|
|
|
let existingErrorMap;
|
2016-06-01 11:21:26 -07:00
|
|
|
try {
|
2017-08-02 11:38:27 +02:00
|
|
|
// Using `fs.readFileSync` instead of `require` here, because `require()`
|
|
|
|
|
// calls are cached, and the cache map is not properly invalidated after
|
|
|
|
|
// file changes.
|
|
|
|
|
existingErrorMap = JSON.parse(
|
|
|
|
|
fs.readFileSync(
|
|
|
|
|
path.join(__dirname, path.basename(errorMapFilePath)),
|
|
|
|
|
'utf8'
|
|
|
|
|
)
|
|
|
|
|
);
|
2016-06-01 11:21:26 -07:00
|
|
|
} catch (e) {
|
|
|
|
|
existingErrorMap = {};
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-28 23:13:12 -02:00
|
|
|
const allErrorIDs = Object.keys(existingErrorMap);
|
|
|
|
|
let currentID;
|
2016-06-01 11:21:26 -07:00
|
|
|
|
2017-04-05 16:47:29 +01:00
|
|
|
if (allErrorIDs.length === 0) {
|
|
|
|
|
// Map is empty
|
2016-06-01 11:21:26 -07:00
|
|
|
currentID = 0;
|
|
|
|
|
} else {
|
|
|
|
|
currentID = Math.max.apply(null, allErrorIDs) + 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Here we invert the map object in memory for faster error code lookup
|
|
|
|
|
existingErrorMap = invertObject(existingErrorMap);
|
|
|
|
|
|
2017-04-05 16:47:29 +01:00
|
|
|
function transform(source) {
|
2020-02-06 12:46:32 +00:00
|
|
|
const ast = parser.parse(source, babylonOptions);
|
2016-06-01 11:21:26 -07:00
|
|
|
|
|
|
|
|
traverse(ast, {
|
|
|
|
|
CallExpression: {
|
2017-11-28 23:13:12 -02:00
|
|
|
exit(astPath) {
|
2016-06-01 11:21:26 -07:00
|
|
|
if (astPath.get('callee').isIdentifier({name: 'invariant'})) {
|
2017-11-28 23:13:12 -02:00
|
|
|
const node = astPath.node;
|
2016-06-01 11:21:26 -07:00
|
|
|
|
|
|
|
|
// error messages can be concatenated (`+`) at runtime, so here's a
|
|
|
|
|
// trivial partial evaluator that interprets the literal value
|
[RFC] Codemod invariant -> throw new Error (#22435)
* Hoist error codes import to module scope
When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.
Because `codes.json` is now checked into source, we can import it a
single time in module scope.
* Minify error constructors in production
We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92
This enables us to write helpful error messages without increasing the
bundle size.
Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.
So, I've updated the script to minify error constructors, too:
Input:
Error(`A ${adj} message that contains ${noun}`);
Output:
Error(formatProdErrorMessage(ERR_CODE, adj, noun));
It only works for constructors that are literally named Error, though we
could add support for other names, too.
As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.
* Minify "no fallback UI specified" error in prod
This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.
Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.
To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.
* Lint rule to detect unminified errors
Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.
We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.
There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.
* Temporarily add invariant codemod script
I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.
* [Automated] Codemod invariant -> Error
This commit contains only automated changes:
npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier
I will do any manual touch ups in separate commits so they're easier
to review.
* Remove temporary codemod script
This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.
* Manual touch ups
A few manual changes I made after the codemod ran.
* Enable error code transform per package
Currently we're not consistent about which packages should have their
errors minified in production and which ones should.
This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
2021-09-30 15:01:28 -04:00
|
|
|
const errorMsgLiteral = evalStringConcat(node.arguments[1]);
|
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
2019-03-18 13:58:03 -07:00
|
|
|
addToErrorMap(errorMsgLiteral);
|
2016-06-01 11:21:26 -07:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
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
2019-03-18 13:58:03 -07:00
|
|
|
function addToErrorMap(errorMsgLiteral) {
|
|
|
|
|
if (existingErrorMap.hasOwnProperty(errorMsgLiteral)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
existingErrorMap[errorMsgLiteral] = '' + currentID++;
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-01 11:21:26 -07:00
|
|
|
function flush(cb) {
|
2017-04-05 16:47:29 +01:00
|
|
|
fs.writeFileSync(
|
2016-06-01 11:21:26 -07:00
|
|
|
errorMapFilePath,
|
|
|
|
|
JSON.stringify(invertObject(existingErrorMap), null, 2) + '\n',
|
2017-04-05 16:47:29 +01:00
|
|
|
'utf-8'
|
2016-06-01 11:21:26 -07:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-25 02:55:00 +03:00
|
|
|
return function extractErrors(source) {
|
2017-04-05 16:47:29 +01:00
|
|
|
transform(source);
|
|
|
|
|
flush();
|
|
|
|
|
};
|
2016-06-01 11:21:26 -07:00
|
|
|
};
|