feat: add error boundary demo

Author: velocitysystems

ExpoDemo/app/index.tsx

@@ -1,27 +1,63 @@
+import { useState } from "react";
 import { Button, Text, View } from "react-native";
-import RaygunClient, { LogLevel, RaygunClientOptions } from "raygun4reactnative";
+import RaygunClient, {
+  LogLevel,
+  RaygunClientOptions,
+  RaygunErrorBoundary,
+} from "raygun4reactnative";
 
-export default function Index() {
+const options: RaygunClientOptions = {
+  apiKey: "INSERT_YOUR_API_KEY_HERE",
+  version: "0.1.2",
+  enableCrashReporting: true,
+  logLevel: LogLevel.verbose,
+};
+
+RaygunClient.init(options);
+
+function Crasher() {
+  const [shouldCrash, setShouldCrash] = useState(false);
 
-  const options: RaygunClientOptions = {
-    apiKey: "INSERT_YOUR_API_KEY_HERE",
-    version: "0.1.2",
-    enableCrashReporting: true,
-    logLevel: LogLevel.verbose,
-  };
-  
-  RaygunClient.init(options);
+  if (shouldCrash) {
+    throw new Error("Render-time error from Expo demo");
+  }
 
+  return (
+    <Button
+      title="Trigger render error"
+      onPress={() => setShouldCrash(true)}
+    />
+  );
+}
+
+export default function Index() {
   return (
     <View
       style={{
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
+        gap: 16,
       }}
     >
       <Text>Raygun Demo</Text>
-      <Button title="Send Error" onPress={() => RaygunClient.sendError(Error("Error from Expo app"))} />
+      <Button
+        title="Send Error"
+        onPress={() => RaygunClient.sendError(Error("Error from Expo app"))}
+      />
+
+      <RaygunErrorBoundary
+        tags={["demo:expo"]}
+        fallback={({ error, reset }) => (
+          <View style={{ alignItems: "center", gap: 8 }}>
+            <Text>Caught by RaygunErrorBoundary:</Text>
+            <Text>{error.message}</Text>
+            <Button title="Reset" onPress={reset} />
+          </View>
+        )}
+      >
+        <Crasher />
+      </RaygunErrorBoundary>
     </View>
   );
 }

demo/App.tsx

@@ -4,6 +4,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import Home from "./screens/Home";
 import CrashReporting from "./screens/CrashReporting";
 import RealUserMonitoring from "./screens/RealUserMonitoring";
+import ErrorBoundaryScreen from "./screens/ErrorBoundary";
 import {raygunClient} from "./utils/Utils";
 import {LogLevel, RaygunClientOptions} from "raygun4reactnative";
 
@@ -48,6 +49,13 @@ function Tabs() {
           tabBarLabel: 'RUM'
         }}
       />
+      <Tab.Screen
+        name="ErrorBoundary"
+        component={ErrorBoundaryScreen}
+        options={{
+          tabBarLabel: 'Boundary'
+        }}
+      />
     </Tab.Navigator>
   );
 }

demo/screens/ErrorBoundary.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from "react";
+import {Button, SafeAreaView, ScrollView, Text, View} from "react-native";
+import {RaygunErrorBoundary} from "raygun4reactnative";
+import {styles} from "../utils/Utils";
+
+function Crasher() {
+  const [shouldCrash, setShouldCrash] = useState(false);
+
+  if (shouldCrash) {
+    throw new Error("Test Error: render-time error from ErrorBoundary demo");
+  }
+
+  return (
+    <Button
+      title={"Trigger render error"}
+      color={"red"}
+      onPress={() => setShouldCrash(true)}
+    />
+  );
+}
+
+export default function ErrorBoundaryScreen() {
+  return (
+    <SafeAreaView>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.mainView}>
+          <View style={styles.secondView}>
+            <Text style={styles.title}>RaygunErrorBoundary</Text>
+            <Text style={styles.subtitle}>
+              Render-time errors thrown inside the boundary are reported to
+              Raygun (with React `componentStack` as custom data) and the
+              fallback UI is shown until reset.
+            </Text>
+          </View>
+
+          <View style={styles.secondView}>
+            <RaygunErrorBoundary
+              tags={["demo:error-boundary"]}
+              customData={{screen: "ErrorBoundary"}}
+              onError={(error) => {
+                console.log("[ErrorBoundary] caught:", error.message);
+              }}
+              fallback={({error, reset}) => (
+                <View style={{alignItems: "center"}}>
+                  <Text style={styles.subtitle}>
+                    Caught: {error.message}
+                  </Text>
+                  <Button title={"Reset"} color={"green"} onPress={reset} />
+                </View>
+              )}
+            >
+              <Crasher />
+            </RaygunErrorBoundary>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}