react-native-site24x7-rn/lib/site24x7ErrorBoundary.js

Monitor react native mobile applications with site24x7 Mobile RUM

import React from 'react';
import utils from './site24x7Utils';
import { captureException } from './site24x7RnWrapper';

const INITIAL_STATE = {
      error : null,
      errorInfo : null,
      hasError : false
}

class ErrorBoundary extends React.Component{
    constructor(props) {
      super(props);
      this.state = INITIAL_STATE;
    }
    //Use setState in componentDidCatch, inorder to avoid usage of getDerivedStateFromError
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
      captureException(error);
      // You can also log error messages to an error reporting service here
    }
    
    render() {
      const { fallback } = this.props;
      if (utils.isBoolean(this.state.hasError) && this.state.hasError) {  
        if(fallback){
          if(typeof fallback === 'function' && React.isValidElement(fallback())){
            return fallback();
          }else{
            throw new Error("Invalid fallback or not a valid react element for site24x7 error boundary");// no I18N
          }
        }else{
          console.warn("provide fallback in site24x7 error boundary, for better debugging");//no I18N
        }
      }
      return this.props?.children; 
  }
}
module.exports = ErrorBoundary;