A React Native Module that Lets You To Register a Global Error Handler

react-native-exception-handler

A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught exceptions. The module helps prevent abrupt crashing of RN Apps without a graceful message to the user.

In the current scenario:

  • In DEV mode , you get a RED Screen error pointing your errors.
  • In Bundled mode , the app just quits without any prompt !

To tackle this we register a global error handler that could be used to for example:

  1. Send bug reports to dev team when the app crashes
  2. Show a creative dialog saying the user should restart the application

UPDATE - V2:

**V2 of this module now supports catching Unhandled Native Exceptions also along with the JS Exceptions ** There are NO breaking changes. So its safe to upgrade from v1 to v2. So there is no reason not to .

V2.9

  • Adds support for executing previously set error handlers (now this module can work with other analytics modules)
  • Adds an improved approach for overwriting native error handlers.
  • Thanks @ Damien Solimando

Example repo can be found here: _https://github.com/master-atul/react-native-exception-handler-example _

Screens

Without any error handling

In DEV MODE

In BUNDLED MODE

With react-native-exception-handler in BUNDLED MODE

Installation:

yarn add react-native-exception-handler

or

npm i react-native-exception-handler --save

Mostly automatic installation

react-native link react-native-exception-handler

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-exception-handler and add ReactNativeExceptionHandler.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libReactNativeExceptionHandler.a to your project’s Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<
Using Cocoapods
  1. add pod 'ReactNativeExceptionHandler', :podspec => '../node_modules/react-native-exception-handler/ReactNativeExceptionHandler.podspec' to your Podfile
  2. run pod install

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage; to the imports at the top of the file
  • Add new ReactNativeExceptionHandlerPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:

    include ':react-native-exception-handler'
    project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-exception-handler/android')
    
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

      compile project(':react-native-exception-handler')
    
    

PLEASE READ BEFORE GOING TO USAGE SECTION

Lets introduce you to the type of errors in a RN app.

  • Errors produced by your Javascript code (includes all your react code). We will refer to these errors as JS_Exceptions going forward.

  • Errors produced by Native Modules. We will refer to these as Native_Exceptions going forward.

Unhandled exceptions leave the app in a critical state.

In case of JS_Exceptions you can catch these unhandled exceptions and perform tasks like show alerts or popups, do cleanup or even hit an API to inform the dev teams before closing the app.

In case of Native_Exceptions it becomes much worse. While you can catch these unhandled exceptions and perform tasks like cleanup or logout or even hit an API to inform the dev teams before closing the app, you CANNOT show a JS alert box or do any UI stuff via JS code. This has to be done via the native methods provided by this module in the respective NATIVE codebase for iOS and android. The module does provide default handlers though :P. So you will get default popups incase of errors. Obviously you can customise them. See CUSTOMIZATION section.

Usage

To catch JS_Exceptions

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:
const exceptionhandler = (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 handler
const currentHandler = getJSExceptionHandler();

To catch Native_Exceptions

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:
const exceptionhandler = 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.

It is recommended you set both the handlers. NOTE: setNativeExceptionHandler only works in bundled mode - it will show the red screen when applied to dev mode.

See the examples to know more

CUSTOMIZATION

Customizing setJSExceptionHandler.

In case of setJSExceptionHandler you can do everything that is possible. Hence there is not much to customize here.

const errorHandler = (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);

Customizing setNativeExceptionHandler

By default whenever a Native_Exceptions occurs if you have used setNativeExceptionHandler, along with the callback specified you would see a popup (this is the default native handler set by this module).

In Android and iOS you will see something like

Modifying Android Native Exception handler (RECOMMENDED APPROACH)

(NATIVE CODE HAS TO BE WRITTEN) recommended that you do this in android studio

  • In the android/app/src/main/java/[...]/MainApplication.java
import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerModule;
import com.masteratul.exceptionhandler.NativeExceptionHandlerIfc
...
...
...
public class MainApplication extends Application implements ReactApplication {
...
...
  @Override
  public void onCreate() {
    ....
    ....
    ....
    ReactNativeExceptionHandlerModule.setNativeExceptionHandler(new NativeExceptionHandlerIfc() {
      @Override
      public void handleNativeException(Thread thread, Throwable throwable, Thread.UncaughtExceptionHandler originalHandler) {
        // Put your error handling code here
      }
    });//This will override the default behaviour of displaying the recover activity.
  }

Modifying Android Native Exception handler UI (CUSTOM ACTIVITY APPROACH (OLD APPROACH)… LEAVING FOR BACKWARD COMPATIBILITY)

(NATIVE CODE HAS TO BE WRITTEN) recommended that you do this in android studio

  • Create an Empty Activity in the android/app/src/main/java/[...]/. For example lets say CustomErrorDialog.java
  • Customize your activity to look and behave however you need it to be.
  • In the android/app/src/main/java/[...]/MainApplication.java
import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerModule;
import <yourpackage>.YourCustomActivity; //This is your CustomErrorDialog.java
...
...
...
public class MainApplication extends Application implements ReactApplication {
...
...
  @Override
  public void onCreate() {
    ....
    ....
    ....
    ReactNativeExceptionHandlerModule.replaceErrorScreenActivityClass(YourCustomActivity.class); //This will replace the native error handler popup with your own custom activity.
  }

Modifying iOS Native Exception handler UI (NATIVE CODE HAS TO BE WRITTEN) recommended that you do this in XCode

Unlike Android, in the case of iOS, there is no way to restart the app if it has crashed. Also, during a Native_Exceptions the UI becomes quite unstable since the exception occured on the main UI thread. Hence, none of the click or press handlers would work either.

Keeping in mind of these, at the most we can just show the user a dialog and inform the user to reopen the app.

If you noticed the default native exception popup does exactly that. To customize the UI for the popup.

  • In XCode, open the file AppDelegate.m
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

//Add the header file
#import "ReactNativeExceptionHandler.h"
...
...
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
...

[ReactNativeExceptionHandler replaceNativeExceptionHandlerBlock:^(NSException *exception, NSString *readeableException){

    // THE CODE YOU WRITE HERE WILL REPLACE THE EXISTING NATIVE POPUP THAT COMES WITH THIS MODULE.
    //We create an alert box
    UIAlertController* alert = [UIAlertController
                                alertControllerWithTitle:@"Critical error occurred"
                                message: [NSString stringWithFormat:@"%@\n%@",
                                          @"Apologies..The app will close now \nPlease restart the app\n",
                                          readeableException]
                                preferredStyle:UIAlertControllerStyleAlert];

    // We show the alert box using the rootViewController
    [rootViewController presentViewController:alert animated:YES completion: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
    [NSTimer scheduledTimerWithTimeInterval:4.0
                                     target:[ReactNativeExceptionHandler class]
                                   selector:@selector(releaseExceptionHold)
                                   userInfo:nil
                                    repeats:NO];

    // or  you can call
    // [ReactNativeExceptionHandler releaseExceptionHold]; when you are done to release the UI lock.
  }];

...
...
...

 return YES;
}

@end

What is this [ReactNativeExceptionHandler releaseExceptionHold];?

In case of iOS we lock the UI thread after we show our popup to prevent the app from closing. Hence once we are done showing the popup we need to close our app after some time. But since our buttons wont work as our click handlers wont work (explained before). To close the app or to remove the UI lockup on exception, we need to call this method [ReactNativeExceptionHandler releaseExceptionHold];

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

[NSTimer scheduledTimerWithTimeInterval:4.0
                                 target:[ReactNativeExceptionHandler class]
                               selector:@selector(releaseExceptionHold)
                               userInfo:nil
                                repeats:NO];

Examples

Restart on error example

This example shows how to use this module show a graceful bug dialog to the user on crash and restart the app when the user presses ok !

import {Alert} from 'react-native';
import RNRestart from 'react-native-restart';
import {setJSExceptionHandler} from 'react-native-exception-handler';

const errorHandler = (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

This example shows how to use this module to send global errors to the dev team and show a graceful bug dialog to the user on crash !

import { Alert } from "react-native";
import { BackAndroid } from "react-native";
import { setJSExceptionHandler } from "react-native-exception-handler";

const reporter = error => {
  // Logic for reporting to devs
  // Example : Log issues to github issues using github apis.
  console.log(error); // sample
};

const errorHandler = (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);
  //
});

More Examples can be found in the examples folder

  • Preserving old handler (thanks to zeh)

Known issues and fixes:

react-native-navigation (Wix)

This is specifically occuring when you use wix library for navigation along with react-native-exception-handler. Whenever an error occurs, it will recreate the application above the crash screen.

Fix:

You need to set second parametera as false while calling setNativeExceptionHandler. The second parameter is an android specific field which stands for forceQuitOnError. When set to false it doesnt quit the app forcefully on error. In short :

Credit goes to Gustavo Fão Valvassori

setNativeExceptionHandler(nativeErrorCallback, false);

Previously defined exception handlers are not executed anymore

A lot of frameworks (especially analytics sdk’s) implement global exception handlers. In order to keep these frameworks working while using react-native-exception-hanlder, you can pass a boolean value as third argument to setNativeExceptionHandler(..., ..., true) what will trigger the execution of the last global handler registered.

Download Details:

Author: master-atul

GitHub: https://github.com/master-atul/react-native-exception-handler

#react-native #react #mobile-apps

What is GEEK

Buddha Community

A React Native Module that Lets You To Register a Global Error Handler
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms?

React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. Hire Dedicated React Native Developer from top React Native development company, HourlyDeveloper.io to design a spectacular React Native application for your business.

Consult with experts:- https://bit.ly/2A8L4vz

#hire dedicated react native developer #react native development company #react native development services #react native development #react native developer #react native

Hire Dedicated React Native Developers - WebClues Infotech

Being one of the emerging frameworks for app development the need to develop react native apps has increased over the years.

Looking for a react native developer?

Worry not! WebClues infotech offers services to Hire React Native Developers for your app development needs. We at WebClues Infotech offer a wide range of Web & Mobile App Development services based o your business or Startup requirement for Android and iOS apps.

WebClues Infotech also has a flexible method of cost calculation for hiring react native developers such as Hourly, Weekly, or Project Basis.

Want to get your app idea into reality with a react native framework?

Get in touch with us.

Hire React Native Developer Now: https://www.webcluesinfotech.com/hire-react-native-app-developer/

For inquiry: https://www.webcluesinfotech.com/contact-us/

Email: sales@webcluesinfotech.com

#hire react native developers #hire dedicated react native developers #hire react native developer #hiring a react native developer #hire freelance react native developers #hire react native developers in 1 hour

Factors affecting the cost of hiring a React Native developer in USA - TopDevelopers.co

Want to develop app using React Native? Here are the tips that will help to reduce the cost of react native app development for you.
Cost is a major factor in helping entrepreneurs take decisions about investing in developing an app and the decision to hire react native app developers in USA can prove to be fruitful in the long run. Using react native for app development ensures a wide range of benefits to your business. Understanding your business and working on the aspects to strengthen business processes through a cost-efficient mobile app will be the key to success.

#best react native development companies from the us #top react native app development companies in usa #cost of hiring a react native developer in usa #top-notch react native developer in usa #best react native developers usa #react native