Handling App Crashes & Logging Errors to Firebase in React Native

npm install react-native-error-boundary @react-native-firebase/app @react-native-firebase/analytics

import React from "react";
import { View, Text, Button } from "react-native";
import ErrorBoundary from "react-native-error-boundary";
import analytics from "@react-native-firebase/analytics"; // optional

// Function to log errors to Firebase Analytics
const logErrorToFirebase = async (error, stackTrace) => {
  try {
    await analytics().logEvent("app_crash", {
      error_message: error.toString().substring(0, 1000), // Firebase string length limit
      stack_trace: stackTrace.substring(0, 1000), // Trim stack trace
      timestamp: new Date().toISOString(),
    });
  } catch (err) {
    console.log("Firebase Analytics Logging Failed:", err);
  }
};

// Custom error handling function
// This onError function can be useful to log the errors that happen in your application to an error monitoring service such as: Crashlytics, Bugsnag, Sentry 🐛
const errorHandler = (error, stackTrace) => {
  console.error("🔥 Caught by Error Boundary:", error);
  logErrorToFirebase(error, stackTrace);
};

// Custom fallback UI when an error occurs
const CustomFallback = ({ error, resetError }) => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 20 }}>
    <Text style={{ fontSize: 18, fontWeight: "bold", color: "red" }}>
      Oops! Something went wrong. 😔
    </Text>
    <Text style={{ marginVertical: 10 }}>Error: {error.toString()}</Text>
    <Button title="Try Again" onPress={resetError} />
  </View>
);

// Reusable ErrorBoundary Wrapper Component
const ErrorBoundaryWrapper = ({ children }) => {
  return (
    <ErrorBoundary FallbackComponent={CustomFallback} onError={errorHandler}>
      {children}
    </ErrorBoundary>
  );
};

export default ErrorBoundaryWrapper;

import React from "react";
import { View, Text } from "react-native";
import AppErrorBoundary from "./AppErrorBoundary"; // Import Error Boundary

const App = () => {
  return (
    <AppErrorBoundary>
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Welcome to the App! 🎉</Text>
      </View>
    </AppErrorBoundary>
  );
};

export default App;