Skip to content

Commit d2413bf

Browse files
committed
[compiler] Validate against JSX in try statements
Per comments on the new validation pass, this disallows creating JSX (expression/fragment) within a try statement. Developers sometimes use this pattern thinking that they can catch errors during the rendering of the element, without realizing that rendering is lazy. The validation allows us to teach developers about the error boundary pattern. ghstack-source-id: 0bc722a Pull Request resolved: #30725
1 parent 6ebfd5b commit d2413bf

11 files changed

+281
-0
lines changed

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ import {outlineFunctions} from '../Optimization/OutlineFunctions';
105105
import {propagatePhiTypes} from '../TypeInference/PropagatePhiTypes';
106106
import {lowerContextAccess} from '../Optimization/LowerContextAccess';
107107
import {validateNoSetStateInPassiveEffects} from '../Validation/ValidateNoSetStateInPassiveEffects';
108+
import {validateNoJSXInTryStatement} from '../Validation/ValidateNoJSXInTryStatement';
108109

109110
export type CompilerPipelineValue =
110111
| {kind: 'ast'; name: string; value: CodegenFunction}
@@ -249,6 +250,10 @@ function* runWithEnvironment(
249250
validateNoSetStateInPassiveEffects(hir);
250251
}
251252

253+
if (env.config.validateNoJSXInTryStatements) {
254+
validateNoJSXInTryStatement(hir);
255+
}
256+
252257
inferReactivePlaces(hir);
253258
yield log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
254259

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,12 @@ const EnvironmentConfigSchema = z.object({
237237
*/
238238
validateNoSetStateInPassiveEffects: z.boolean().default(false),
239239

240+
/**
241+
* Validates against creating JSX within a try block and recommends using an error boundary
242+
* instead.
243+
*/
244+
validateNoJSXInTryStatements: z.boolean().default(false),
245+
240246
/**
241247
* Validates that the dependencies of all effect hooks are memoized. This helps ensure
242248
* that Forget does not introduce infinite renders caused by a dependency changing,
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
import {CompilerError, ErrorSeverity} from '..';
9+
import {BlockId, HIRFunction} from '../HIR';
10+
import {retainWhere} from '../Utils/utils';
11+
12+
/**
13+
* Developers may not be aware of error boundaries and lazy evaluation of JSX, leading them
14+
* to use patterns such as `let el; try { el = <Component /> } catch { ... }` to attempt to
15+
* catch rendering errors. Such code will fail to catch errors in rendering, but developers
16+
* may not realize this right away.
17+
*
18+
* This validation pass validates against this pattern: specifically, it errors for JSX
19+
* created within a try block. JSX is allowed within a catch statement, unless that catch
20+
* is itself nested inside an outer try.
21+
*/
22+
export function validateNoJSXInTryStatement(fn: HIRFunction): void {
23+
const activeTryBlocks: Array<BlockId> = [];
24+
const errors = new CompilerError();
25+
for (const [, block] of fn.body.blocks) {
26+
retainWhere(activeTryBlocks, id => id !== block.id);
27+
28+
if (activeTryBlocks.length !== 0) {
29+
for (const instr of block.instructions) {
30+
const {value} = instr;
31+
switch (value.kind) {
32+
case 'JsxExpression':
33+
case 'JsxFragment': {
34+
errors.push({
35+
severity: ErrorSeverity.InvalidReact,
36+
reason: `Unexpected JSX element within a try statement. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)`,
37+
loc: value.loc,
38+
});
39+
break;
40+
}
41+
}
42+
}
43+
}
44+
45+
if (block.terminal.kind === 'try') {
46+
activeTryBlocks.push(block.terminal.handler);
47+
}
48+
}
49+
if (errors.hasErrors()) {
50+
throw errors;
51+
}
52+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
## Input
3+
4+
```javascript
5+
// @validateNoJSXInTryStatements
6+
import {identity} from 'shared-runtime';
7+
8+
function Component(props) {
9+
let el;
10+
try {
11+
let value;
12+
try {
13+
value = identity(props.foo);
14+
} catch {
15+
el = <div value={value} />;
16+
}
17+
} catch {
18+
return null;
19+
}
20+
return el;
21+
}
22+
23+
```
24+
25+
26+
## Error
27+
28+
```
29+
9 | value = identity(props.foo);
30+
10 | } catch {
31+
> 11 | el = <div value={value} />;
32+
| ^^^^^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected JSX element within a try statement. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) (11:11)
33+
12 | }
34+
13 | } catch {
35+
14 | return null;
36+
```
37+
38+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @validateNoJSXInTryStatements
2+
import {identity} from 'shared-runtime';
3+
4+
function Component(props) {
5+
let el;
6+
try {
7+
let value;
8+
try {
9+
value = identity(props.foo);
10+
} catch {
11+
el = <div value={value} />;
12+
}
13+
} catch {
14+
return null;
15+
}
16+
return el;
17+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
## Input
3+
4+
```javascript
5+
// @validateNoJSXInTryStatements
6+
function Component(props) {
7+
let el;
8+
try {
9+
el = <div />;
10+
} catch {
11+
return null;
12+
}
13+
return el;
14+
}
15+
16+
```
17+
18+
19+
## Error
20+
21+
```
22+
3 | let el;
23+
4 | try {
24+
> 5 | el = <div />;
25+
| ^^^^^^^ InvalidReact: Unexpected JSX element within a try statement. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) (5:5)
26+
6 | } catch {
27+
7 | return null;
28+
8 | }
29+
```
30+
31+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// @validateNoJSXInTryStatements
2+
function Component(props) {
3+
let el;
4+
try {
5+
el = <div />;
6+
} catch {
7+
return null;
8+
}
9+
return el;
10+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
## Input
3+
4+
```javascript
5+
// @validateNoJSXInTryStatements
6+
import {identity} from 'shared-runtime';
7+
8+
function Component(props) {
9+
let el;
10+
try {
11+
let value;
12+
try {
13+
value = identity(props.foo);
14+
} catch {
15+
el = <div value={value} />;
16+
}
17+
} finally {
18+
console.log(el);
19+
}
20+
return el;
21+
}
22+
23+
```
24+
25+
26+
## Error
27+
28+
```
29+
4 | function Component(props) {
30+
5 | let el;
31+
> 6 | try {
32+
| ^^^^^
33+
> 7 | let value;
34+
| ^^^^^^^^^^^^^^
35+
> 8 | try {
36+
| ^^^^^^^^^^^^^^
37+
> 9 | value = identity(props.foo);
38+
| ^^^^^^^^^^^^^^
39+
> 10 | } catch {
40+
| ^^^^^^^^^^^^^^
41+
> 11 | el = <div value={value} />;
42+
| ^^^^^^^^^^^^^^
43+
> 12 | }
44+
| ^^^^^^^^^^^^^^
45+
> 13 | } finally {
46+
| ^^^^^^^^^^^^^^
47+
> 14 | console.log(el);
48+
| ^^^^^^^^^^^^^^
49+
> 15 | }
50+
| ^^^^ Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (6:15)
51+
16 | return el;
52+
17 | }
53+
18 |
54+
```
55+
56+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @validateNoJSXInTryStatements
2+
import {identity} from 'shared-runtime';
3+
4+
function Component(props) {
5+
let el;
6+
try {
7+
let value;
8+
try {
9+
value = identity(props.foo);
10+
} catch {
11+
el = <div value={value} />;
12+
}
13+
} finally {
14+
console.log(el);
15+
}
16+
return el;
17+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
## Input
3+
4+
```javascript
5+
// @validateNoJSXInTryStatements
6+
function Component(props) {
7+
let el;
8+
try {
9+
el = <div />;
10+
} finally {
11+
console.log(el);
12+
}
13+
return el;
14+
}
15+
16+
```
17+
18+
19+
## Error
20+
21+
```
22+
2 | function Component(props) {
23+
3 | let el;
24+
> 4 | try {
25+
| ^^^^^
26+
> 5 | el = <div />;
27+
| ^^^^^^^^^^^^^^^^^
28+
> 6 | } finally {
29+
| ^^^^^^^^^^^^^^^^^
30+
> 7 | console.log(el);
31+
| ^^^^^^^^^^^^^^^^^
32+
> 8 | }
33+
| ^^^^ Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (4:8)
34+
9 | return el;
35+
10 | }
36+
11 |
37+
```
38+
39+

0 commit comments

Comments
 (0)