Handling App Crashes & Logging Errors to Firebase in React Native

When working with React Native, handling errors and crashes gracefully is critical for improving user experience and debugging. This guide will cover:

✅ Using react-native-error-boundary to catch errors.

✅ Sending crash logs to Firebase Analytics for monitoring.

---

1️⃣ Why Use react-native-error-boundary?

• Catches uncaught JavaScript errors and prevents app crashes.
• Displays a custom fallback UI instead of a blank screen.
• Helps in tracking and debugging errors efficiently.

---

2️⃣ Install Dependencies

First, install the required dependencies:
@react-native-firebase/app @react-native-firebase/analytics are optional

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

---

3️⃣ Create a Global Error Boundary Component

This component will wrap the entire app and catch unhandled JavaScript errors.

📌 AppErrorBoundary.js

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;

---

4️⃣ Wrap the App with Error Boundary

Now, wrap your main app component with AppErrorBoundary in App.js.

📌 App.js

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;

---

5️⃣ What Happens When an Error Occurs?

🔴 Without Error Boundary: The app crashes and closes unexpectedly.

🟢 With react-native-error-boundary:

✅ The error is caught and logged to Firebase Analytics.

✅ A friendly UI is shown to users instead of a blank screen.

✅ Users can recover using a “Try Again” button.

---

6️⃣ Viewing Firebase Analytics Logs

To check error logs in Firebase:

1. Go to Firebase Console → Analytics.
2. Click on Events → Look for "app_crash".
3. View error messages and stack traces.

---

🎯 Conclusion

By integrating react-native-error-boundary with Firebase Analytics, you:
✅ Prevent app crashes from unhandled JavaScript errors.

✅ Log detailed crash reports to Firebase for debugging.

✅ Show a user-friendly fallback UI to prevent app disruption.

🚀 Would you like to extend this by sending logs to Sentry or Crashlytics as well? Let me know!