Error Boundaries in React Native

README.md

Official docs: https://reactjs.org/docs/error-boundaries.html#new-behavior-for-uncaught-errors

• Error Boundaries does not catch errors for Event handlers, Asynchronous code (for ex. setTimeout), Server-side rendering.
• Error boundaries do not catch errors for Errors thrown in the error boundary itself.

Why Class Component?

Hooks not supported yet for Error boundaries: https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes

App.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import CounterApp from '../Components/CounterApp';
import ErrorBoundries from '../Components/ErrorBoundries';

export default class AppContainer extends Component {
  render() {
    return (
      <>
        <Text style={{alignSelf: 'center', marginTop: 20}}>Counter App</Text>
        <ErrorBoundries>
             <CounterApp />
        </ErrorBoundries>
      </>
    );
  }
}

ErrorBoundries.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class ErrorBoundries extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: '',
      errorInfo: '',
    };
  }

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

  componentDidCatch(error, errorInfo) {
    console.log('Error: ' + error);
    console.log('Error Info: ' + JSON.stringify(errorInfo));
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            marginHorizontal: 12,
          }}>
          <Text>Oops!!! Something went wrong..</Text>
          <Text>Error: {this.state.error.toString()}</Text>
          <Text>Error Info: {JSON.stringify(this.state.errorInfo)}</Text>
        </View>
      );
    }
    return this.props.children;
  }
}