[Babel] Format errors for console logging
Sathya Gunasekaran committed
May 15, 2023 at 14:45 UTC
41a897797d92d1e5d43826da8340495b347f2f4f
5 files changed
+24
-71
compiler/forget/src/Babel/BabelPlugin.ts
+22
-5
@@ -25,6 +25,7 @@ import {
25
26
type BabelPluginPass = {
27
opts: PluginOptions;
28
+ filename: string | null;
29
};
30
31
function hasUseForgetDirective(directive: t.Directive): boolean {
@@ -108,7 +109,7 @@ export default function ReactForgetBabelPlugin(
109
) {
110
throw err;
111
} else {
111
- console.error(err);
112
+ console.error(formatErrorsForConsole(err, pass.filename ?? null));
113
}
114
} finally {
115
// We are generating a new FunctionDeclaration node, so we must skip over it or this
@@ -149,7 +150,7 @@ export default function ReactForgetBabelPlugin(
150
if (options.panicOnBailout || error.isCritical()) {
151
throw error;
152
} else {
152
- console.error(error);
153
+ console.error(formatErrorsForConsole(error, pass.filename));
154
}
155
return;
156
}
@@ -192,7 +193,7 @@ export default function ReactForgetBabelPlugin(
193
},
194
});
195
195
- const reason = `Skipped compilation as it disables one or more React eslint rules`;
196
+ const reason = `One or more React eslint rules is disabled`;
197
const error = new CompilerError();
198
for (const violation of violations) {
199
if (options.logger != null) {
@@ -218,7 +219,9 @@ export default function ReactForgetBabelPlugin(
219
if (options.panicOnBailout || error.isCritical()) {
220
throw error;
221
} else {
221
- console.error(error);
222
+ console.error(
223
+ formatErrorsForConsole(error, pass.filename ?? null)
224
+ );
225
}
226
}
227
@@ -228,6 +231,7 @@ export default function ReactForgetBabelPlugin(
231
path.traverse(visitor, {
232
...pass,
233
opts: { ...pass.opts, ...options },
234
+ filename: pass.filename ?? null,
235
});
236
237
// If there isn't already an import of * as React, insert it so useMemoCache doesn't
@@ -327,6 +331,19 @@ function shouldCompile(
331
return true;
332
}
333
334
+function formatErrorsForConsole(
335
+ error: CompilerError,
336
+ filename: string | null
337
+): string {
338
+ const filenameStr = filename ? `in ${filename}` : "";
339
+ return error.details
340
+ .map(
341
+ (e) =>
342
+ `[ReactForget] Skipping compilation of component ${filenameStr}: ${e.printErrorMessage()}`
343
+ )
344
+ .join("\n");
345
+}
346
+
347
function makeError(
348
reason: string,
349
loc: t.SourceLocation | null
@@ -349,7 +366,7 @@ function buildFunctionDeclaration(
366
): BabelCore.NodePath<t.FunctionDeclaration> | CompilerError {
367
if (!fn.parentPath.isVariableDeclarator()) {
368
return makeError(
352
- "Skipping compilation: ArrowFunctionExpression must be declared in variable declaration",
369
+ "ArrowFunctionExpression must be declared in variable declaration",
370
fn.node.loc ?? null
371
);
372
}
compiler/forget/src/__tests__/fixtures/compiler/error._todo.multi-arrow-expr-export-default-gating-test.expect.md
+1
-1
@@ -18,7 +18,7 @@ export default Renderer = (props) => (
18
## Error
19
20
```
21
-[ReactForget] InvalidInput: Skipping compilation: ArrowFunctionExpression must be declared in variable declaration (4:9)
21
+[ReactForget] InvalidInput: ArrowFunctionExpression must be declared in variable declaration (4:9)
22
```
23
24
\ No newline at end of file
compiler/forget/src/__tests__/fixtures/compiler/error.file-has-non-critical-errors.expect.md
deleted
-54
@@ -1,54 +0,0 @@
1
-
2
-## Input
3
-
4
-```javascript
5
-// @panicOnBailout false
6
-function Bad() {
7
- var x = 1;
8
- return <div>{x}</div>;
9
-}
10
-
11
-function Good() {
12
- const x = 1;
13
- return <div>{x}</div>;
14
-}
15
-
16
-```
17
-
18
-## Code
19
-
20
-```javascript
21
-import { unstable_useMemoCache as useMemoCache } from "react"; // @panicOnBailout false
22
-function Bad() {
23
- var x = 1;
24
- return <div>{x}</div>;
25
-}
26
-
27
-function Good() {
28
- const $ = useMemoCache(1);
29
- let t0;
30
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
31
- t0 = <div>{1}</div>;
32
- $[0] = t0;
33
- } else {
34
- t0 = $[0];
35
- }
36
- return t0;
37
-}
38
-
39
-```
40
-
41
-## Error
42
-
43
-```
44
-[ReactForget] TodoError: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
45
- 1 | // @panicOnBailout false
46
- 2 | function Bad() {
47
-> 3 | var x = 1;
48
- | ^^^^^^^^^^
49
- 4 | return <div>{x}</div>;
50
- 5 | }
51
- 6 |
52
-```
53
-
54
-
\ No newline at end of file
compiler/forget/src/__tests__/fixtures/compiler/error.file-has-non-critical-errors.js
deleted
-10
@@ -1,10 +0,0 @@
1
-// @panicOnBailout false
2
-function Bad() {
3
- var x = 1;
4
- return <div>{x}</div>;
5
-}
6
-
7
-function Good() {
8
- const x = 1;
9
- return <div>{x}</div>;
10
-}
compiler/forget/src/__tests__/fixtures/compiler/error.sketchy-code-use-forget.expect.md
+1
-1
@@ -16,7 +16,7 @@ function lowercasecomponent() {
16
## Error
17
18
```
19
-[ReactForget] UnsafeInput: Skipped compilation as it disables one or more React eslint rules. eslint-disable react-hooks/rules-of-hooks (1:1)
19
+[ReactForget] UnsafeInput: One or more React eslint rules is disabled. eslint-disable react-hooks/rules-of-hooks (1:1)
20
```
21
22
\ No newline at end of file