Enhancing User Experience: Why You Need Error Boundaries in React Native

In mobile applications, handling errors gracefully is crucial for maintaining a positive user experience. One of the most effective ways to manage errors in React Native is through Error Boundaries. In this blog post, we will explore what Error Boundaries are, why they are essential, and how you can implement them in your React Native project to catch errors and improve user experience.

Why Do You Need Error Boundaries?

Errors that are not caught by any error boundary will result in the unmounting of the whole React component tree ??. This means that if an error occurs and goes uncaught, users will see an empty white screen ??, often without any feedback. This scenario is not just frustrating; it’s a poor user experience (UX) ?. Fortunately, this issue can be addressed by using Error Boundaries ?.

The Problem

When an error is thrown in a React component, it can lead to the entire component tree being unmounted. This abrupt behavior can confuse users, as they may not understand why the app suddenly crashes or what they should do next. Without proper error handling, users are left with no information about the failure, leading to frustration and abandonment of the app.

The Solution

Introducing Error Boundaries in your project can significantly enhance user experience. The react-native-error-boundary library allows you to catch JavaScript errors anywhere in their child component tree, providing a user-friendly fallback UI instead of crashing the entire application. However, it's essential to note that native errors are not handled by Error Boundaries.

Example Code

• Create a file ErrorBoundary.tsx: This file will handle the error boundary logic, providing a fallback UI when an error occurs in the child component tree

import React, {ReactNode} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

export class ErrorBoundary extends React.Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {hasError: false, error: null};
  }

  static getDerivedStateFromError(error: Error) {
    return {hasError: true, error};
  }

  componentDidCatch(error: Error, errorInfo: any) {
    console.log('Error:', error, errorInfo);
  }

  handleReset = () => {
    this.setState({hasError: false, error: null});
  };

  render() {
    if (this.state.hasError) {
      return (
        <View style={styles.errorContainer}>
          <Text style={styles.errorTitle}>Oops!</Text>
          <Text style={styles.errorMessage}>There's an error</Text>
          <Text style={styles.errorDetail}>
            Error: {this.state.error?.message}
          </Text>
          <Button title="Try again" onPress={this.handleReset} />
        </View>
      );
    }

    return this.props.children;
  }
}

const styles = StyleSheet.create({
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  errorTitle: {
    fontSize: 48,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  errorMessage: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  errorDetail: {
    fontSize: 16,
    color: 'gray',
    marginBottom: 24,
  },
});        

• Create a file ComponentWithError.tsx: This file contains the component that will throw an error when the button is clicked, allowing you to test the error handling functionality.

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

export const ComponentWithError: React.FC = () => {
  const [shouldThrowError, setShouldThrowError] = useState(false);

  if (shouldThrowError) {
    throw new Error('This is a test error thrown by ComponentWithError.');
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>?? react-native-error-boundary</Text>
      <Text style={styles.description}>
        Click on the following button to render a component that will throw an
        error.
      </Text>
      <Button title="THROW ERROR" onPress={() => setShouldThrowError(true)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#F5F5F5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 16,
  },
});        

• Use the code in the App.tsx file: Integrate the error boundary and the component that throws an error in your main application file, ensuring that errors are caught and managed effectively.

import React from 'react';
import {ErrorBoundary} from './src/components/ErrorBoundary';
import {ComponentWithError} from './src/components/ComponentWithError';

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <ComponentWithError />
    </ErrorBoundary>
  );
};

export default App;