From 2b9ac138758a609befd77b0aa0f7fd2f30c3b06e Mon Sep 17 00:00:00 2001
From: hkwongax <wongkenny88888@gmail.com>
Date: Fri, 16 Oct 2026 17:58:23 +0800
Subject: [PATCH 1/2] Document syntax that is unsupported inside try/catch

---
 src/content/learn/react-compiler/debugging.md | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
index a2981e09470..02e07a77e9a 100644
--- a/src/content/learn/react-compiler/debugging.md
+++ b/src/content/learn/react-compiler/debugging.md
@@ -37,6 +37,32 @@ Common scenarios where this occurs:
 - **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
 - **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization
 
+## Unsupported Syntax {/*unsupported-syntax*/}
+
+A few syntax patterns are not supported inside `try/catch` statements yet. When React Compiler encounters one of them, it skips the whole component instead of compiling it:
+
+- **Conditional expressions** - ternaries (`condition ? a : b`) and the logical operators `&&`, `||`, and `??`
+- **Optional chaining** - `object?.property`
+- **`throw` statements**
+- **Loops** - `for`, `for...of`, and `while` loops
+
+These patterns are fully supported outside of `try/catch`, so moving them out of the `try/catch` (or extracting the fallible code into a separate function) restores compilation:
+
+```js
+function WeatherReport({report}) {
+  // ✅ Good: computed outside of try/catch
+  const description = report.temperature > 30 ? "Warm" : "Mild";
+
+  try {
+    return <div>{description}: {report.summary}</div>;
+  } catch (error) {
+    return <div>Report unavailable</div>;
+  }
+}
+```
+
+Skipped components still build and run normally, so the only difference is that they are not optimized. To notice them, check that the component shows the ✨ badge in React DevTools, or log skipped components with the [`logger`](/reference/react-compiler/logger) option.
+
 ## Debugging Workflow {/*debugging-workflow*/}
 
 Follow these steps when you encounter issues:
@@ -90,4 +116,4 @@ If you believe you've found a compiler bug:
 ## Next Steps {/*next-steps*/}
 
 - Review the [Rules of React](/reference/rules) to prevent issues
-- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
\ No newline at end of file
+- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies

From 52924f42d1d3e65f8b7bf8e9041d46bd352f8ee9 Mon Sep 17 00:00:00 2001
From: hkwongax <wongkenny88888@gmail.com>
Date: Fri, 16 Oct 2026 18:01:25 +0800
Subject: [PATCH 2/2] Document syntax that is unsupported inside try/catch

---
 src/content/learn/react-compiler/debugging.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
index 02e07a77e9a..a2d66b45d9a 100644
--- a/src/content/learn/react-compiler/debugging.md
+++ b/src/content/learn/react-compiler/debugging.md
@@ -53,11 +53,14 @@ function WeatherReport({report}) {
   // ✅ Good: computed outside of try/catch
   const description = report.temperature > 30 ? "Warm" : "Mild";
 
+  let summary = null;
   try {
-    return <div>{description}: {report.summary}</div>;
+    summary = parseSummary(report.data);
   } catch (error) {
-    return <div>Report unavailable</div>;
+    summary = "Report unavailable";
   }
+
+  return <div>{description}: {summary}</div>;
 }
 ```