Handling Errors Gracefully with AppErrorBoundary

Introduction

In any robust React Native application, handling unexpected errors is crucial for delivering a smooth user experience. AppErrorBoundary is a custom error boundary component that catches JavaScript errors in its child component tree, logs them, and displays a fallback UI instead of crashing the whole app.

What is AppErrorBoundary?

• Catches render errors in child components
• Displays a customizable fallback UI
• Works in both development and production
• Supports custom fallback via props

Why Use AppErrorBoundary?

• Prevents the whole app from crashing due to a single component error
• Shows user-friendly error messages
• Logs errors for debugging and analytics
• Improves developer and user experience

Basic Usage

import { AppErrorBoundary } from './src/components/error/AppErrorBoundary';
export default function App() {
  return (
    <AppErrorBoundary>
      <MainAppComponents />
    </AppErrorBoundary>
  );
}

Custom Fallback UI (DEV & PROD)

<AppErrorBoundary
  fallbackDev={({ error, errorInfo, reset }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>DEV: Oops! Something went wrong.</Text>
      <Text>{error?.message}</Text>
      <Text onPress={reset} style={{ color: 'blue', marginTop: 16 }}>Try Again</Text>
    </View>
  )}
  fallbackProd={({ error, errorInfo, reset }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>PROD: Something went wrong. Please try again later.</Text>
      <Text onPress={reset} style={{ color: 'blue', marginTop: 16 }}>Try Again</Text>
    </View>
  )}
>
  <YourAppComponents />
</AppErrorBoundary>

You can also pass a React element directly:

<AppErrorBoundary
  fallbackDev={<Text>DEV: Something went wrong.</Text>}
  fallbackProd={<Text>PROD: Something went wrong.</Text>}
>
  <YourAppComponents />
</AppErrorBoundary>

Default Fallback UI

If you do not provide a fallbackDev or fallbackProd prop, AppErrorBoundary will display a helpful default error screen in development and a simple message in production.

How It Works

• Catches errors in rendering, lifecycle methods, and constructors of child components
• Updates its state to indicate an error has occurred
• Renders the fallback UI instead of the crashed subtree
• Logs error details to the console for debugging

Best Practices

• Place AppErrorBoundary high in your component tree (e.g., around your navigation or main app component)
• Use custom fallback UIs for a branded error experience
• Log errors to an external service for production monitoring

Example: Wrapping a Screen

<AppErrorBoundary>
  <ProfileScreen />
</AppErrorBoundary>

Example: With Custom Fallbacks for DEV and PROD

<AppErrorBoundary
  fallbackDev={({ error, reset }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>DEV: Something went wrong.</Text>
      <Text>{error?.message}</Text>
      <Text onPress={reset} style={{ color: 'blue', marginTop: 16 }}>Try Again</Text>
    </View>
  )}
  fallbackProd={<Text>PROD: Something went wrong. Please try again later.</Text>}
>
  <SettingsScreen />
</AppErrorBoundary>

Summary

Using AppErrorBoundary in your React Native app ensures that unexpected errors do not ruin the user experience. By catching and handling errors gracefully, you can provide helpful feedback to users and maintain a stable application.
For more advanced error handling, consider integrating global exception handlers and logging services as shown in the rest of this library.