[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: 5f00467
Pull Request resolved: #30725

Author: josephsavona

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

@@ -105,6 +105,7 @@ import {outlineFunctions} from '../Optimization/OutlineFunctions';
 import {propagatePhiTypes} from '../TypeInference/PropagatePhiTypes';
 import {lowerContextAccess} from '../Optimization/LowerContextAccess';
 import {validateNoSetStateInPassiveEffects} from '../Validation/ValidateNoSetStateInPassiveEffects';
+import {validateNoJSXInTryStatement} from '../Validation/ValidateNoJSXInTryStatement';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -249,6 +250,8 @@ function* runWithEnvironment(
     validateNoSetStateInPassiveEffects(hir);
   }
 
+  validateNoJSXInTryStatement(hir);
+
   inferReactivePlaces(hir);
   yield log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
 

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, ErrorSeverity} from '..';
+import {BlockId, HIRFunction} from '../HIR';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * Developers may not be aware of error boundaries and lazy evaluation of JSX, leading them
+ * to use patterns such as `let el; try { el = <Component /> } catch { ... }` to attempt to
+ * catch rendering errors. Such code will fail to catch errors in rendering, but developers
+ * may not realize this right away.
+ *
+ * This validation pass validates against this pattern: specifically, it errors for JSX
+ * created within a try block. JSX is allowed within a catch statement, unless that catch
+ * is itself nested inside an outer try.
+ */
+export function validateNoJSXInTryStatement(fn: HIRFunction): void {
+  const activeTryBlocks: Array<BlockId> = [];
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    retainWhere(activeTryBlocks, id => id !== block.id);
+
+    if (activeTryBlocks.length !== 0) {
+      for (const instr of block.instructions) {
+        const {value} = instr;
+        switch (value.kind) {
+          case 'JsxExpression':
+          case 'JsxFragment': {
+            errors.push({
+              severity: ErrorSeverity.InvalidReact,
+              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)`,
+              loc: value.loc,
+            });
+            break;
+          }
+        }
+      }
+    }
+
+    if (block.terminal.kind === 'try') {
+      activeTryBlocks.push(block.terminal.handler);
+    }
+  }
+  if (errors.hasErrors()) {
+    throw errors;
+  }
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-in-catch-in-outer-try-with-catch.expect.md

@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+   8 |       value = identity(props.foo);
+   9 |     } catch {
+> 10 |       el = <div value={value} />;
+     |            ^^^^^^^^^^^^^^^^^^^^^ 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) (10:10)
+  11 |     }
+  12 |   } catch {
+  13 |     return null;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-in-catch-in-outer-try-with-catch.js

@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-in-try-with-catch.expect.md

@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+  2 |   let el;
+  3 |   try {
+> 4 |     el = <div />;
+    |          ^^^^^^^ 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) (4:4)
+  5 |   } catch {
+  6 |     return null;
+  7 |   }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-jsx-in-try-with-catch.js

@@ -0,0 +1,9 @@
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md

@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+   3 | function Component(props) {
+   4 |   let el;
+>  5 |   try {
+     |   ^^^^^
+>  6 |     let value;
+     | ^^^^^^^^^^^^^^
+>  7 |     try {
+     | ^^^^^^^^^^^^^^
+>  8 |       value = identity(props.foo);
+     | ^^^^^^^^^^^^^^
+>  9 |     } catch {
+     | ^^^^^^^^^^^^^^
+> 10 |       el = <div value={value} />;
+     | ^^^^^^^^^^^^^^
+> 11 |     }
+     | ^^^^^^^^^^^^^^
+> 12 |   } finally {
+     | ^^^^^^^^^^^^^^
+> 13 |     console.log(el);
+     | ^^^^^^^^^^^^^^
+> 14 |   }
+     | ^^^^ Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (5:14)
+  15 |   return el;
+  16 | }
+  17 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js

@@ -0,0 +1,16 @@
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md

@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+
+## Error
+
+```
+   1 | function Component(props) {
+   2 |   let el;
+>  3 |   try {
+     |   ^^^^^
+>  4 |     el = <div />;
+     | ^^^^^^^^^^^^^^^^^
+>  5 |   } finally {
+     | ^^^^^^^^^^^^^^^^^
+>  6 |     console.log(el);
+     | ^^^^^^^^^^^^^^^^^
+>  7 |   }
+     | ^^^^ Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (3:7)
+   8 |   return el;
+   9 | }
+  10 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js

@@ -0,0 +1,9 @@
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}