Fix React Native PR review findings

Author: niemyjski

README.md

@@ -10,7 +10,7 @@ The definition of the word exceptionless is: to be without exception. Exceptionl
 
 You can install the npm package via `npm install @exceptionless/browser --save`
 or via cdn [`https://unpkg.com/@exceptionless/browser`](https://unpkg.com/@exceptionless/browser).
-Next, you just need to call startup during your apps startup to automatically
+Next, you just need to call startup during your app's startup to automatically
 capture unhandled errors.
 
 ```js

example/expo/screens/ErrorsScreen.tsx

@@ -8,6 +8,7 @@ function CrashyComponent(): ReactElement {
 }
 
 export default function ErrorsScreen() {
+  const [boundaryKey, setBoundaryKey] = useState(0);
   const [showCrashy, setShowCrashy] = useState(false);
   const [status, setStatus] = useState("");
   const stressRunning = useRef(false);
@@ -39,6 +40,7 @@ export default function ErrorsScreen() {
 
   const resetErrorBoundary = () => {
     setShowCrashy(false);
+    setBoundaryKey((key) => key + 1);
     setStatus("Error boundary reset");
   };
 
@@ -88,6 +90,7 @@ export default function ErrorsScreen() {
       <View style={styles.section}>
         <Text style={styles.sectionTitle}>Error Boundary</Text>
         <ExceptionlessErrorBoundary
+          key={boundaryKey}
           fallback={
             <View>
               <Text style={styles.errorText}>Component crashed! Error was sent to Exceptionless.</Text>

packages/react-native/expo-plugin/withExceptionless.cjs

@@ -2,7 +2,7 @@ const pkg = require("../package.json");
 
 const withExceptionless = (config) => config;
 
-let plugin = withExceptionless;
+let plugin;
 
 try {
   const { createRunOncePlugin } = require("@expo/config-plugins");

packages/react-native/src/ExceptionlessErrorBoundary.tsx

@@ -32,8 +32,8 @@ export class ExceptionlessErrorBoundary extends Component<PropsWithChildren<Erro
   }
 
   render(): ReactNode {
-    if (this.state.hasError && this.props.fallback) {
-      return this.props.fallback;
+    if (this.state.hasError) {
+      return this.props.fallback ?? null;
     }
 
     return this.props.children;

packages/react-native/src/native/ExceptionlessNativeModule.ts

@@ -2,7 +2,7 @@ import { NativeModules, Platform } from "react-native";
 
 export interface CrashReportFrame {
   address: string;
-  image: string;
+  image: string | null;
   symbol: string | null;
   offset: number | null;
 }

packages/react-native/src/plugins/NativeCrashPlugin.ts

@@ -39,6 +39,11 @@ export class NativeCrashPlugin implements IEventPlugin {
       }
 
       const reports = await nativeModule.getPendingCrashReports();
+      if (reports.length === 0) {
+        this._client.config.services.log.warn("Native crash reporter indicated a pending crash, but no crash reports were returned.");
+        return;
+      }
+
       for (const report of reports) {
         await this.submitCrashReport(report);
       }

packages/react-native/src/plugins/ReactNativeErrorPlugin.ts

@@ -76,7 +76,7 @@ export class ReactNativeErrorPlugin implements IEventPlugin {
     }
 
     const frames: StackFrameInfo[] = [];
-    const lines = stack.split(/\r?\n/);
+    const lines = stack.replaceAll("\r\n", "\n").replaceAll("\r", "\n").split("\n");
     for (const line of lines) {
       const frame = this.parseStackFrame(line.trim());
       if (frame) {
@@ -92,24 +92,27 @@ export class ReactNativeErrorPlugin implements IEventPlugin {
       return null;
     }
 
-    const reactNativeFrame = /^at\s+(.*?)\(\)\s+in\s+(.*)$/.exec(line);
-    if (reactNativeFrame) {
-      return this.createStackFrame(reactNativeFrame[1], reactNativeFrame[2]);
-    }
+    if (line.startsWith("at ")) {
+      const frame = line.slice(3).trim();
+      const reactNativeMarker = "() in ";
+      const reactNativeMarkerIndex = frame.indexOf(reactNativeMarker);
+      if (reactNativeMarkerIndex > 0) {
+        return this.createStackFrame(frame.slice(0, reactNativeMarkerIndex), frame.slice(reactNativeMarkerIndex + reactNativeMarker.length));
+      }
 
-    const atFrame = /^at\s+(.*?)\s+\((.*)\)$/.exec(line);
-    if (atFrame) {
-      return this.createStackFrame(atFrame[1], atFrame[2]);
-    }
+      if (frame.endsWith(")")) {
+        const locationStartIndex = frame.lastIndexOf(" (");
+        if (locationStartIndex > 0) {
+          return this.createStackFrame(frame.slice(0, locationStartIndex), frame.slice(locationStartIndex + 2, -1));
+        }
+      }
 
-    const anonymousAtFrame = /^at\s+(.*)$/.exec(line);
-    if (anonymousAtFrame) {
-      return this.createStackFrame("<anonymous>", anonymousAtFrame[1]);
+      return this.createStackFrame("<anonymous>", frame);
     }
 
-    const hermesFrame = /^(.*?)@(.*)$/.exec(line);
-    if (hermesFrame) {
-      return this.createStackFrame(hermesFrame[1] || "<anonymous>", hermesFrame[2]);
+    const hermesLocationIndex = line.indexOf("@");
+    if (hermesLocationIndex >= 0) {
+      return this.createStackFrame(line.slice(0, hermesLocationIndex) || "<anonymous>", line.slice(hermesLocationIndex + 1));
     }
 
     return null;
@@ -130,7 +133,7 @@ export class ReactNativeErrorPlugin implements IEventPlugin {
   }
 
   private parseLocation(location: string): ParsedLocation {
-    const trimmedLocation = location.trim();
+    let trimmedLocation = location.trim();
     if (trimmedLocation === "native" || trimmedLocation === "<anonymous>") {
       return {
         fileName: trimmedLocation,
@@ -140,53 +143,138 @@ export class ReactNativeErrorPlugin implements IEventPlugin {
       };
     }
 
-    const reactNativeLineAndColumn = /^(?:address at )?(.*):line (\d+):col (\d+)$/.exec(trimmedLocation);
-    if (reactNativeLineAndColumn) {
-      return {
-        fileName: reactNativeLineAndColumn[1],
-        lineNumber: Number(reactNativeLineAndColumn[2]),
-        column: Number(reactNativeLineAndColumn[3]),
-        isNative: false
-      };
+    if (trimmedLocation.startsWith("address at ")) {
+      trimmedLocation = trimmedLocation.slice("address at ".length);
     }
 
-    const lineAndColumn = /^(.*):(\d+):(\d+)$/.exec(trimmedLocation);
+    const reactNativeLocation = this.tryParseReactNativeLocation(trimmedLocation);
+    if (reactNativeLocation) {
+      return reactNativeLocation;
+    }
+
+    const lineAndColumn = this.tryParseDelimitedLocation(trimmedLocation, true);
     if (lineAndColumn) {
-      return {
-        fileName: lineAndColumn[1],
-        lineNumber: Number(lineAndColumn[2]),
-        column: Number(lineAndColumn[3]),
-        isNative: false
-      };
+      return lineAndColumn;
     }
 
-    const lineOnly = /^(.*):(\d+)$/.exec(trimmedLocation);
+    const lineOnly = this.tryParseDelimitedLocation(trimmedLocation, false);
     if (lineOnly) {
+      return lineOnly;
+    }
+
+    return {
+      fileName: trimmedLocation,
+      lineNumber: 0,
+      column: 0,
+      isNative: false
+    };
+  }
+
+  private tryParseReactNativeLocation(location: string): ParsedLocation | null {
+    const columnMarker = ":col ";
+    const lineMarker = ":line ";
+    const columnMarkerIndex = location.lastIndexOf(columnMarker);
+    if (columnMarkerIndex <= 0) {
+      return null;
+    }
+
+    const lineMarkerIndex = location.lastIndexOf(lineMarker, columnMarkerIndex);
+    if (lineMarkerIndex <= 0) {
+      return null;
+    }
+
+    const lineNumber = this.tryParseNonNegativeInteger(location.slice(lineMarkerIndex + lineMarker.length, columnMarkerIndex));
+    const column = this.tryParseNonNegativeInteger(location.slice(columnMarkerIndex + columnMarker.length));
+    if (lineNumber === null || column === null) {
+      return null;
+    }
+
+    return {
+      fileName: location.slice(0, lineMarkerIndex),
+      lineNumber,
+      column,
+      isNative: false
+    };
+  }
+
+  private tryParseDelimitedLocation(location: string, hasColumn: boolean): ParsedLocation | null {
+    const lastDelimiterIndex = location.lastIndexOf(":");
+    if (lastDelimiterIndex <= 0) {
+      return null;
+    }
+
+    const lastNumber = this.tryParseNonNegativeInteger(location.slice(lastDelimiterIndex + 1));
+    if (lastNumber === null) {
+      return null;
+    }
+
+    if (!hasColumn) {
       return {
-        fileName: lineOnly[1],
-        lineNumber: Number(lineOnly[2]),
+        fileName: location.slice(0, lastDelimiterIndex),
+        lineNumber: lastNumber,
         column: 0,
         isNative: false
       };
     }
 
+    const lineDelimiterIndex = location.lastIndexOf(":", lastDelimiterIndex - 1);
+    if (lineDelimiterIndex <= 0) {
+      return null;
+    }
+
+    const lineNumber = this.tryParseNonNegativeInteger(location.slice(lineDelimiterIndex + 1, lastDelimiterIndex));
+    if (lineNumber === null) {
+      return null;
+    }
+
     return {
-      fileName: trimmedLocation,
-      lineNumber: 0,
-      column: 0,
+      fileName: location.slice(0, lineDelimiterIndex),
+      lineNumber,
+      column: lastNumber,
       isNative: false
     };
   }
 
+  private tryParseNonNegativeInteger(value: string): number | null {
+    if (!value) {
+      return null;
+    }
+
+    for (let i = 0; i < value.length; i++) {
+      const charCode = value.charCodeAt(i);
+      if (charCode < 48 || charCode > 57) {
+        return null;
+      }
+    }
+
+    return Number(value);
+  }
+
   private normalizeFrameName(name: string): string {
-    const trimmedName = name.trim().replace(/\(\)$/, "");
+    const trimmed = name.trim();
+    const trimmedName = trimmed.endsWith("()") ? trimmed.slice(0, -2) : trimmed;
     if (!trimmedName || trimmedName === "?") {
       return "<anonymous>";
     }
 
-    const syntheticHermesName = /^\?anon_\d+_?(.*)$/.exec(trimmedName);
-    if (syntheticHermesName) {
-      return syntheticHermesName[1] || "<anonymous>";
+    const syntheticHermesPrefix = "?anon_";
+    if (trimmedName.startsWith(syntheticHermesPrefix)) {
+      let suffixIndex = syntheticHermesPrefix.length;
+      while (suffixIndex < trimmedName.length) {
+        const charCode = trimmedName.charCodeAt(suffixIndex);
+        if (charCode < 48 || charCode > 57) {
+          break;
+        }
+
+        suffixIndex++;
+      }
+
+      if (trimmedName[suffixIndex] === "_") {
+        const suffix = trimmedName.slice(suffixIndex + 1);
+        return suffix || "<anonymous>";
+      }
+
+      return "<anonymous>";
     }
 
     return trimmedName;

packages/react-native/src/plugins/ReactNativeLifeCyclePlugin.ts

@@ -33,7 +33,7 @@ export class ReactNativeLifeCyclePlugin implements IEventPlugin {
     AppState.addEventListener("change", (nextAppState: AppStateStatus) => {
       if (nextAppState === "active") {
         void this._client?.startup();
-      } else if (nextAppState === "background" || nextAppState === "inactive") {
+      } else if (nextAppState === "background") {
         if (this._client?.config.sessionsEnabled) {
           void this._client?.submitSessionEnd();
         }

packages/react-native/test/plugins/ReactNativeErrorPlugin.test.ts

@@ -163,6 +163,24 @@ describe("ReactNativeErrorPlugin", () => {
     ]);
   });
 
+  test("should not parse numeric error headers as stack frames", async () => {
+    const error = new Error("404");
+    error.stack = ["Error: 404", "at loadRoute() in http://localhost:8083/index.bundle:line 10:col 20"].join("\n");
+    context.eventContext.setException(error);
+
+    await plugin.run(context);
+
+    expect(getError(context.event)?.stack_trace).toEqual([
+      expect.objectContaining({
+        column: 20,
+        file_name: "http://localhost:8083/index.bundle",
+        is_signature_target: true,
+        line_number: 10,
+        name: "loadRoute"
+      })
+    ]);
+  });
+
   test("should attach React component stack to error data", async () => {
     const error = new Error("Component crashed inside error boundary!");
     const componentStack = "\n    at CrashyComponent (http://localhost:8083/index.bundle:10:20)";

packages/react-native/test/plugins/ReactNativeLifeCyclePlugin.test.ts

@@ -63,4 +63,29 @@ describe("ReactNativeLifeCyclePlugin", () => {
 
     addEventListenerSpy.mockRestore();
   });
+
+  test("should end native session only when app enters background", async () => {
+    const { Platform } = await import("react-native");
+    const { AppState } = await import("react-native");
+    Object.defineProperty(Platform, "OS", { value: "ios", writable: true });
+    client.config.useSessions();
+
+    const addEventListenerSpy = vi.spyOn(AppState, "addEventListener");
+    const submitSessionEndSpy = vi.spyOn(client, "submitSessionEnd").mockResolvedValue("reference-id");
+    const suspendSpy = vi.spyOn(client, "suspend").mockResolvedValue();
+
+    await plugin.startup({ client, log: client.config.services.log });
+
+    const appStateHandler = addEventListenerSpy.mock.calls[0]?.[1];
+    expect(appStateHandler).toBeDefined();
+    appStateHandler?.("inactive");
+    appStateHandler?.("background");
+
+    expect(submitSessionEndSpy).toHaveBeenCalledTimes(1);
+    expect(suspendSpy).toHaveBeenCalledTimes(1);
+
+    addEventListenerSpy.mockRestore();
+    submitSessionEndSpy.mockRestore();
+    suspendSpy.mockRestore();
+  });
 });