react-native-exception-handler

UPDATE - V2:

Screens

Without any error handling

Installation:

Mostly automatic installation

For react-native@0.60.0 or above

Manual installation

iOS

Using Cocoapods

Android

PLEASE READ BEFORE GOING TO USAGE SECTION

Usage

import{setJSExceptionHandler,getJSExceptionHandler}from'react-native-exception-handler';..// For most use cases:// registering the error handler (maybe u can do this in the index.android.js or index.ios.js)setJSExceptionHandler((error,isFatal)=>{// This is your custom global error handler// You do stuff like show an error dialog// or hit google analytics to track crashes// or hit a custom api to inform the dev team.});//=================================================// ADVANCED use case:constexceptionhandler=(error,isFatal)=>{// your error handler function};setJSExceptionHandler(exceptionhandler,allowInDevMode);// - exceptionhandler is the exception handler function// - allowInDevMode is an optional parameter is a boolean.//   If set to true the handler to be called in place of RED screen//   in development mode also.// getJSExceptionHandler gives the currently set JS exception handlerconstcurrentHandler=getJSExceptionHandler();

import{setNativeExceptionHandler}from"react-native-exception-handler";//For most use cases:setNativeExceptionHandler((exceptionString)=>{// This is your custom global error handler// You do stuff likehit google analytics to track crashes.// or hit a custom api to inform the dev team.//NOTE: alert or showing any UI change via JS//WILL NOT WORK in case of NATIVE ERRORS.});//====================================================// ADVANCED use case:constexceptionhandler=(exceptionString)=>{// your exception handler code here};setNativeExceptionHandler(exceptionhandler,forceAppQuit,executeDefaultHandler);// - exceptionhandler is the exception handler function// - forceAppQuit is an optional ANDROID specific parameter that defines//    if the app should be force quit on error.  default value is true.//    To see usecase check the common issues section.// - executeDefaultHandler is an optional boolean (both IOS, ANDROID)//    It executes previous exception handlers if set by some other module.//    It will come handy when you use any other crash analytics module along with this one//    Default value is set to false. Set to true if you are using other analytics modules.

CUSTOMIZATION

CustomizingsetJSExceptionHandler.

consterrorHandler=(error,isFatal)=>{// This is your custom global error handler// You do stuff like show an error dialog// or hit google analytics to track crashes// or hit a custom api to inform the dev team.})//Second argument is a boolean with a default value of false if unspecified.//If set to true the handler to be called in place of RED screen//in development mode also.setJSExceptionHandler(errorHandler,true);

CustomizingsetNativeExceptionHandler

importcom.masteratul.exceptionhandler.ReactNativeExceptionHandlerModule;importcom.masteratul.exceptionhandler.NativeExceptionHandlerIfc.........publicclassMainApplicationextendsApplicationimplementsReactApplication {......@OverridepublicvoidonCreate() {    ....    ....    ....ReactNativeExceptionHandlerModule.setNativeExceptionHandler(newNativeExceptionHandlerIfc() {@OverridepublicvoidhandleNativeException(Threadthread,Throwablethrowable,Thread.UncaughtExceptionHandleroriginalHandler) {// Put your error handling code here      }    });//This will override the default behaviour of displaying the recover activity.  }

importcom.masteratul.exceptionhandler.ReactNativeExceptionHandlerModule;import <yourpackage>.YourCustomActivity;//This is your CustomErrorDialog.java.........publicclassMainApplicationextendsApplicationimplementsReactApplication {......@OverridepublicvoidonCreate() {    ....    ....    ....ReactNativeExceptionHandlerModule.replaceErrorScreenActivityClass(YourCustomActivity.class);//This will replace the native error handler popup with your own custom activity.  }

#import "AppDelegate.h"#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>//Add the header file#import "ReactNativeExceptionHandler.h"......@implementationAppDelegate- (BOOL)application:(UIApplication*)applicationdidFinishLaunchingWithOptions:(NSDictionary*)launchOptions{......[ReactNativeExceptionHandlerreplaceNativeExceptionHandlerBlock:^(NSException*exception,NSString*readeableException){// THE CODE YOU WRITE HERE WILL REPLACE THE EXISTING NATIVE POPUP THAT COMES WITH THIS MODULE.//We create an alert boxUIAlertController*alert= [UIAlertControlleralertControllerWithTitle:@"Critical error occurred"message: [NSStringstringWithFormat:@"%@\n%@",                                          @"Apologies..The app will close now \nPlease restart the app\n",readeableException]preferredStyle:UIAlertControllerStyleAlert];// We show the alert box using the rootViewController    [rootViewControllerpresentViewController:alertanimated:YEScompletion:nil];// THIS IS THE IMPORTANT PART// By default when an exception is raised we will show an alert box as per our code.// But since our buttons wont work because our click handlers wont work.// to close the app or to remove the UI lockup on exception.// we need to call this method// [ReactNativeExceptionHandler releaseExceptionHold]; // to release the lock and let the app crash.// Hence we set a timer of 4 secs and then call the method releaseExceptionHold to quit the app after// 4 secs of showing the popup    [NSTimerscheduledTimerWithTimeInterval:4.0target:[ReactNativeExceptionHandlerclass]selector:@selector(releaseExceptionHold)userInfo:nilrepeats:NO];// or  you can call// [ReactNativeExceptionHandler releaseExceptionHold]; when you are done to release the UI lock.  }];.........returnYES;}@end

[NSTimerscheduledTimerWithTimeInterval:4.0target:[ReactNativeExceptionHandlerclass]selector:@selector(releaseExceptionHold)userInfo:nilrepeats:NO];

Examples

Restart on error example

import{Alert}from'react-native';importRNRestartfrom'react-native-restart';import{setJSExceptionHandler}from'react-native-exception-handler';consterrorHandler=(e,isFatal)=>{if(isFatal){Alert.alert('Unexpected error occurred',`        Error:${(isFatal) ?'Fatal:' :''}${e.name}${e.message}        We will need to restart the app.        `,[{text:'Restart',onPress:()=>{RNRestart.Restart();}}]);}else{console.log(e);// So that we can see it in the ADB logs in case of Android if needed}};setJSExceptionHandler(errorHandler);setNativeExceptionHandler((errorString)=>{//You can do something like call an api to report to dev team here    ...    ...// When you call setNativeExceptionHandler, react-native-exception-handler sets a// Native Exception Handler popup which supports restart on error in case of android.// In case of iOS, it is not possible to restart the app programmatically, so we just show an error popup and close the app.// To customize the popup screen take a look at CUSTOMIZATION section.});

Bug Capture to dev team example

import{Alert}from"react-native";import{BackAndroid}from"react-native";import{setJSExceptionHandler}from"react-native-exception-handler";constreporter=(error)=>{// Logic for reporting to devs// Example : Log issues to github issues using github apis.console.log(error);// sample};consterrorHandler=(e,isFatal)=>{if(isFatal){reporter(e);Alert.alert("Unexpected error occurred",`        Error:${isFatal ?"Fatal:" :""}${e.name}${e.message}        We have reported this to our team ! Please close the app and start again!        `,[{text:"Close",onPress:()=>{BackAndroid.exitApp();},},]);}else{console.log(e);// So that we can see it in the ADB logs in case of Android if needed}};setJSExceptionHandler(errorHandler);setNativeExceptionHandler((errorString)=>{//You can do something like call an api to report to dev team here//example// fetch('http://<YOUR API TO REPORT TO DEV TEAM>?error='+errorString);//});

Known issues and fixes:

react-native-navigation (Wix)

setNativeExceptionHandler(nativeErrorCallback,false);

Previously defined exception handlers are not executed anymore

CONTRIBUTORS

TESTING NATIVE EXCEPTIONS/ERRORS