feature(react-native): report react render errors that no error boundary catches

.github/scripts/android-js-fatal.sh

@@ -1,13 +1,21 @@
 #!/usr/bin/env bash
 # Asserts a fatal JS error produces one report, no duplicate from the rethrown JavascriptException, and no 5 s wait.
+# MODE=js-fatal throws from a timer, MODE=render-error throws while rendering, outside any error boundary.
 set -euo pipefail
 
+MODE="${MODE:-js-fatal}"
+case "$MODE" in
+    js-fatal) MESSAGE_PREFIX="BT_CI_JS_FATAL" ;;
+    render-error) MESSAGE_PREFIX="BT_CI_RENDER_ERROR" ;;
+    *) echo "::error::MODE must be js-fatal or render-error, got '$MODE'"; exit 2 ;;
+esac
+
 PACKAGE="com.reactnative"
 ACTIVITY="$PACKAGE/.MainActivity"
 APK="examples/sdk/reactNative/android/app/build/outputs/apk/release/app-release.apk"
-MARKER="ci-js-fatal-$(date +%s)"
-TRIGGER_URL="backtrace-example://ci-js-fatal?marker=$MARKER"
-LOGCAT_OUT="/tmp/js-fatal-logcat.txt"
+MARKER="ci-$MODE-$(date +%s)"
+TRIGGER_URL="backtrace-example://ci-$MODE?marker=$MARKER"
+LOGCAT_OUT="/tmp/$MODE-logcat.txt"
 FORWARD_BOUND_S=7
 EXIT_BOUND_S=2
 
@@ -46,7 +54,7 @@ wait_for_log "BT_CI_DRIVER_ARMED" 120
 PID="$(adb shell pidof "$PACKAGE" | tr -d '\r')"
 
 adb shell am start -n "$ACTIVITY" -a android.intent.action.VIEW -d "'$TRIGGER_URL'" >/dev/null
-echo "fatal JS error fired: $MARKER, pid $PID"
+echo "$MODE fired: $MARKER, pid $PID"
 
 for _ in $(seq 1 30); do
     if ! adb shell pidof "$PACKAGE" >/dev/null 2>&1; then
@@ -61,7 +69,7 @@ fi
 sleep 1
 adb logcat -d -v epoch > "$LOGCAT_OUT"
 
-FIRED_AT="$(awk '/BT_CI_DRIVER firing: backtrace-example:\/\/ci-js-fatal/ { print $1; exit }' "$LOGCAT_OUT")"
+FIRED_AT="$(awk -v url="BT_CI_DRIVER firing: backtrace-example://ci-$MODE" 'index($0, url) { print $1; exit }' "$LOGCAT_OUT")"
 RETHROWN_AT="$(awk -v pid="$PID" '$2 == pid && /AndroidRuntime: FATAL EXCEPTION/ { print $1; exit }' "$LOGCAT_OUT")"
 DIED_AT="$(grep -F "Process $PACKAGE (pid $PID) has died" "$LOGCAT_OUT" | head -1 | awk '{ print $1 }' || true)"
 if [ -z "$FIRED_AT" ] || [ -z "$RETHROWN_AT" ] || [ -z "$DIED_AT" ]; then
@@ -90,8 +98,12 @@ if [ "$COUNT" != "1" ]; then
     echo "::error::expected exactly one stored report, found $COUNT"
     exit 1
 fi
-if ! printf '%s\n' "$RECORDS" | grep -qF "Error \"BT_CI_JS_FATAL $MARKER\""; then
-    echo "::error::the stored report is not the fatal JS error"
+if ! printf '%s\n' "$RECORDS" | grep -qF "Error \"$MESSAGE_PREFIX $MARKER\" \"Unhandled exception\" fatal=true"; then
+    echo "::error::the stored report is not the $MODE error, typed as a fatal unhandled exception"
+    exit 1
+fi
+if [ "$MODE" = "render-error" ] && ! printf '%s\n' "$RECORDS" | grep -qF "component-stack"; then
+    echo "::error::the stored render error report has no component stack"
     exit 1
 fi
 echo "one report with the JS error, no JavascriptException duplicate, process died ${EXIT_S}s after the rethrow"

.github/scripts/ci-crash-driver.js

@@ -1,5 +1,6 @@
 // Appended to the example's index.js by the Android CI workflow. Never committed to the example.
-import { Linking } from 'react-native';
+import * as CiReact from 'react';
+import { AppRegistry as CiAppRegistry, Linking } from 'react-native';
 
 Linking.addEventListener('url', ({ url }) => {
     const fatal = /^backtrace-example:\/\/ci-js-fatal\?marker=([A-Za-z0-9-]+)$/.exec(url ?? '');
@@ -22,10 +23,34 @@ Linking.addEventListener('url', ({ url }) => {
 
 BacktraceClient.instance?.database?.on('added', (record) => {
     if (record.type === 'report') {
+        const { attributes, classifiers, threads } = record.data;
         console.log(
-            `BT_CI_RECORD ${record.data.classifiers?.[0]} ${JSON.stringify(record.data.attributes?.['error.message'] ?? '')}`,
+            `BT_CI_RECORD ${classifiers?.[0]} ${JSON.stringify(attributes?.['error.message'] ?? '')} ` +
+                `${JSON.stringify(attributes?.['error.type'] ?? '')} fatal=${attributes?.fatal} ` +
+                `threads=${Object.keys(threads ?? {}).join(',')}`,
         );
     }
 });
 
-console.log('BT_CI_DRIVER_ARMED');
+function CiRenderError({ marker }) {
+    throw new Error(`BT_CI_RENDER_ERROR ${marker}`);
+}
+
+// Sits outside the example's ErrorBoundary.
+function CiRenderErrorRoot({ children }) {
+    const [marker, setMarker] = CiReact.useState();
+    CiReact.useEffect(() => {
+        const subscription = Linking.addEventListener('url', ({ url }) => {
+            const match = /^backtrace-example:\/\/ci-render-error\?marker=([A-Za-z0-9-]+)$/.exec(url ?? '');
+            if (match) {
+                console.log(`BT_CI_DRIVER firing: ${url}`);
+                setTimeout(() => setMarker(match[1]), 0);
+            }
+        });
+        console.log('BT_CI_DRIVER_ARMED');
+        return () => subscription.remove();
+    }, []);
+    return marker ? CiReact.createElement(CiRenderError, { marker }) : children;
+}
+
+CiAppRegistry.setWrapperComponentProvider(() => CiRenderErrorRoot);

.github/workflows/android.yml

@@ -113,7 +113,7 @@ jobs:
                   disable-animations: false
                   script: echo "Generated AVD snapshot for caching."
 
-            - name: Capture a native crash, single APK then Play-style split install, and a fatal JS error on the emulator
+            - name: Capture a native crash, single APK then Play-style split install, a fatal JS error and a render error on the emulator
               uses: reactivecircus/android-emulator-runner@v2
               env:
                   BUNDLETOOL_JAR: ${{ runner.temp }}/bundletool.jar
@@ -128,6 +128,7 @@ jobs:
                       INSTALL=apk bash .github/scripts/android-native-crash.sh
                       INSTALL=split bash .github/scripts/android-native-crash.sh
                       bash .github/scripts/android-js-fatal.sh
+                      MODE=render-error bash .github/scripts/android-js-fatal.sh
 
             - name: Upload crash evidence
               if: failure()
@@ -138,5 +139,6 @@ jobs:
                       /tmp/native-crash-*.dmp
                       /tmp/logcat-*.txt
                       /tmp/js-fatal-logcat.txt
+                      /tmp/render-error-logcat.txt
                   if-no-files-found: warn
                   retention-days: 7

packages/react-native/src/common/exceptionsManagerHelper.ts

@@ -0,0 +1,19 @@
+export interface ExceptionsManager {
+    handleException(error: unknown, isFatal: boolean): void;
+}
+
+type ExceptionsManagerModule = Partial<ExceptionsManager> & { default?: Partial<ExceptionsManager> };
+
+export function exceptionsManager(): ExceptionsManager | undefined {
+    let exported: ExceptionsManagerModule | undefined;
+    try {
+        // Metro bundles a missing module as optional only when its require sits directly inside a try block.
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        exported = require('react-native/Libraries/Core/ExceptionsManager');
+    } catch {
+        return undefined;
+    }
+
+    const manager = typeof exported?.default?.handleException === 'function' ? exported.default : exported;
+    return typeof manager?.handleException === 'function' ? (manager as ExceptionsManager) : undefined;
+}