Skip to content

Commit b89b7d2

Browse files
committed
Add credits
1 parent e512dce commit b89b7d2

File tree

1 file changed

+74
-70
lines changed

1 file changed

+74
-70
lines changed

README.md

+74-70
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
21
# react-native-exception-handler ![npm](https://img.shields.io/npm/dm/react-native-exception-handler.svg)
32

43
[![https://nodei.co/npm/react-native-exception-handler.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/react-native-exception-handler.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/react-native-exception-handler)
54

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

108
In the current scenario:
11-
- `In DEV mode , you get a RED Screen error pointing your errors.`
12-
- `In Bundled mode , the app just quits without any prompt !` 🙄
9+
10+
- `In DEV mode , you get a RED Screen error pointing your errors.`
11+
- `In Bundled mode , the app just quits without any prompt !` 🙄
1312

1413
To tackle this we register a global error handler that could be used to for example:
14+
1515
1. Send bug reports to dev team when the app crashes
1616
2. Show a creative dialog saying the user should restart the application
1717

@@ -21,12 +21,13 @@ To tackle this we register a global error handler that could be used to for exam
2121
There are **NO** breaking changes. So its safe to upgrade from v1 to v2. So there is no reason not to 😉.
2222

2323
**V2.9**
24+
2425
- Adds support for executing previously set error handlers (now this module can work with other analytics modules)
2526
- Adds an improved approach for overwriting native error handlers.
2627
- Thanks @ [Damien Solimando](https://github.com/dsolimando)
2728

28-
**Example** repo can be found here:
29-
*[https://github.com/master-atul/react-native-exception-handler-example](https://github.com/master-atul/react-native-exception-handler-example) *
29+
**Example** repo can be found here:
30+
_[https://github.com/master-atul/react-native-exception-handler-example](https://github.com/master-atul/react-native-exception-handler-example) _
3031

3132
### Screens
3233

@@ -67,14 +68,12 @@ or
6768

6869
`npm i react-native-exception-handler --save`
6970

70-
7171
### Mostly automatic installation
7272

7373
`react-native link react-native-exception-handler`
7474

7575
### Manual installation
7676

77-
7877
#### iOS
7978

8079
1. In XCode, in the project navigator, right click `Libraries``Add Files to [your project's name]`
@@ -83,30 +82,32 @@ or
8382
4. Run your project (`Cmd+R`)<
8483

8584
##### Using Cocoapods
85+
8686
1. add `pod 'ReactNativeExceptionHandler', :podspec => '../node_modules/react-native-exception-handler/ios/ReactNativeExceptionHandler.podspec'` to your Podfile
8787
2. run `pod install`
8888

8989
#### Android
9090

9191
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
92-
- Add `import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;` to the imports at the top of the file
93-
- Add `new ReactNativeExceptionHandlerPackage()` to the list returned by the `getPackages()` method
92+
93+
- Add `import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;` to the imports at the top of the file
94+
- Add `new ReactNativeExceptionHandlerPackage()` to the list returned by the `getPackages()` method
95+
9496
2. Append the following lines to `android/settings.gradle`:
95-
```
96-
include ':react-native-exception-handler'
97-
project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exception-handler/android')
98-
```
97+
```
98+
include ':react-native-exception-handler'
99+
project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-exception-handler/android')
100+
```
99101
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
100-
```
101-
compile project(':react-native-exception-handler')
102-
```
103-
102+
```
103+
compile project(':react-native-exception-handler')
104+
```
104105

105106
### PLEASE READ BEFORE GOING TO USAGE SECTION
106107

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

109-
- Errors produced by your Javascript code (includes all your react code). We will refer to these errors as **JS_Exceptions** going forward.
110+
- Errors produced by your Javascript code (includes all your react code). We will refer to these errors as **JS_Exceptions** going forward.
110111

111112
- Errors produced by Native Modules. We will refer to these as **Native_Exceptions** going forward.
112113

@@ -120,6 +121,7 @@ you CANNOT show a JS alert box or do any UI stuff via JS code. This has to be do
120121
### Usage
121122

122123
To catch **JS_Exceptions**
124+
123125
```js
124126
import {setJSExceptionHandler, getJSExceptionHandler} from 'react-native-exception-handler';
125127

@@ -146,15 +148,15 @@ setJSExceptionHandler(exceptionhandler, allowInDevMode);
146148

147149
// getJSExceptionHandler gives the currently set JS exception handler
148150
const currentHandler = getJSExceptionHandler();
149-
```
151+
```
150152

151153
To catch **Native_Exceptions**
152154

153155
```js
154-
import {setNativeExceptionHandler} from 'react-native-exception-handler';
156+
import { setNativeExceptionHandler } from "react-native-exception-handler";
155157

156-
//For most use cases:
157-
setNativeExceptionHandler((exceptionString) => {
158+
//For most use cases:
159+
setNativeExceptionHandler(exceptionString => {
158160
// This is your custom global error handler
159161
// You do stuff likehit google analytics to track crashes.
160162
// or hit a custom api to inform the dev team.
@@ -163,30 +165,35 @@ setNativeExceptionHandler((exceptionString) => {
163165
});
164166
//====================================================
165167
// ADVANCED use case:
166-
const exceptionhandler = (exceptionString) => {
168+
const exceptionhandler = exceptionString => {
167169
// your exception handler code here
168-
}
169-
setNativeExceptionHandler(exceptionhandler,forceAppQuit,executeDefaultHandler);
170+
};
171+
setNativeExceptionHandler(
172+
exceptionhandler,
173+
forceAppQuit,
174+
executeDefaultHandler
175+
);
170176
// - exceptionhandler is the exception handler function
171177
// - forceAppQuit is an optional ANDROID specific parameter that defines
172-
// if the app should be force quit on error. default value is true.
173-
// To see usecase check the common issues section.
178+
// if the app should be force quit on error. default value is true.
179+
// To see usecase check the common issues section.
174180
// - executeDefaultHandler is an optional boolean (both IOS, ANDROID)
175181
// It executes previous exception handlers if set by some other module.
176182
// It will come handy when you use any other crash analytics module along with this one
177183
// Default value is set to false. Set to true if you are using other analytics modules.
178-
179184
```
180-
It is recommended you set both the handlers.
181-
NOTE: `setNativeExceptionHandler` only works in bundled mode - it will show the red screen when applied to dev mode.
182185

183-
**See the examples to know more**
186+
It is recommended you set both the handlers.
187+
NOTE: `setNativeExceptionHandler` only works in bundled mode - it will show the red screen when applied to dev mode.
184188

189+
**See the examples to know more**
185190

186191
### CUSTOMIZATION
187192

188193
#### Customizing **setJSExceptionHandler**.
194+
189195
In case of `setJSExceptionHandler` you can do everything that is possible. Hence there is not much to customize here.
196+
190197
```js
191198
const errorHandler = (error, isFatal) => {
192199
// This is your custom global error handler
@@ -211,9 +218,9 @@ In Android and iOS you will see something like
211218
<img src="https://github.com/master-atul/react-native-exception-handler/raw/master/screens/ios_native_exception.png" width="300"/>
212219
</p>
213220

214-
**Modifying Android Native Exception handler (RECOMMENDED APPROACH)**
221+
**Modifying Android Native Exception handler (RECOMMENDED APPROACH)**
215222

216-
(NATIVE CODE HAS TO BE WRITTEN) *recommended that you do this in android studio*
223+
(NATIVE CODE HAS TO BE WRITTEN) _recommended that you do this in android studio_
217224

218225
- In the `android/app/src/main/java/[...]/MainApplication.java`
219226

@@ -238,12 +245,11 @@ public class MainApplication extends Application implements ReactApplication {
238245
}
239246
});//This will override the default behaviour of displaying the recover activity.
240247
}
241-
242248
```
243249

244-
**Modifying Android Native Exception handler UI (CUSTOM ACTIVITY APPROACH (OLD APPROACH).. LEAVING FOR BACKWARD COMPATIBILITY)**
250+
**Modifying Android Native Exception handler UI (CUSTOM ACTIVITY APPROACH (OLD APPROACH).. LEAVING FOR BACKWARD COMPATIBILITY)**
245251

246-
(NATIVE CODE HAS TO BE WRITTEN) *recommended that you do this in android studio*
252+
(NATIVE CODE HAS TO BE WRITTEN) _recommended that you do this in android studio_
247253

248254
- Create an Empty Activity in the `android/app/src/main/java/[...]/`. For example lets say CustomErrorDialog.java
249255
- Customize your activity to look and behave however you need it to be.
@@ -265,10 +271,9 @@ public class MainApplication extends Application implements ReactApplication {
265271
....
266272
ReactNativeExceptionHandlerModule.replaceErrorScreenActivityClass(YourCustomActivity.class); //This will replace the native error handler popup with your own custom activity.
267273
}
268-
269274
```
270275

271-
**Modifying iOS Native Exception handler UI** (NATIVE CODE HAS TO BE WRITTEN) *recommended that you do this in XCode*
276+
**Modifying iOS Native Exception handler UI** (NATIVE CODE HAS TO BE WRITTEN) _recommended that you do this in XCode_
272277

273278
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.
274279

@@ -279,7 +284,6 @@ If you noticed the default native exception popup does exactly that. To customiz
279284
- In XCode, open the file `AppDelegate.m`
280285

281286
```c
282-
283287
#import "AppDelegate.h"
284288

285289
#import <React/RCTBundleURLProvider.h>
@@ -337,7 +341,6 @@ If you noticed the default native exception popup does exactly that. To customiz
337341
}
338342

339343
@end
340-
341344
```
342345

343346
What is this `[ReactNativeExceptionHandler releaseExceptionHold];`?
@@ -350,6 +353,7 @@ To close the app or to remove the UI lockup on exception, we need to call this m
350353

351354
Hence we set a timer of 4 secs and then call the method releaseExceptionHold to quit the app after
352355
4 secs of showing the popup
356+
353357
```c
354358
[NSTimer scheduledTimerWithTimeInterval:4.0
355359
target:[ReactNativeExceptionHandler class]
@@ -396,7 +400,7 @@ setNativeExceptionHandler((errorString) => {
396400
//You can do something like call an api to report to dev team here
397401
...
398402
...
399-
// When you call setNativeExceptionHandler, react-native-exception-handler sets a
403+
// When you call setNativeExceptionHandler, react-native-exception-handler sets a
400404
// Native Exception Handler popup which supports restart on error in case of android.
401405
// In case of iOS, it is not possible to restart the app programmatically, so we just show an error popup and close the app.
402406
// To customize the popup screen take a look at CUSTOMIZATION section.
@@ -408,11 +412,11 @@ setNativeExceptionHandler((errorString) => {
408412
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 !
409413

410414
```js
411-
import {Alert} from 'react-native';
412-
import {BackAndroid} from 'react-native';
413-
import {setJSExceptionHandler} from 'react-native-exception-handler';
415+
import { Alert } from "react-native";
416+
import { BackAndroid } from "react-native";
417+
import { setJSExceptionHandler } from "react-native-exception-handler";
414418

415-
const reporter = (error) => {
419+
const reporter = error => {
416420
// Logic for reporting to devs
417421
// Example : Log issues to github issues using github apis.
418422
console.log(error); // sample
@@ -422,18 +426,20 @@ const errorHandler = (e, isFatal) => {
422426
if (isFatal) {
423427
reporter(e);
424428
Alert.alert(
425-
'Unexpected error occurred',
426-
`
427-
Error: ${(isFatal) ? 'Fatal:' : ''} ${e.name} ${e.message}
429+
"Unexpected error occurred",
430+
`
431+
Error: ${isFatal ? "Fatal:" : ""} ${e.name} ${e.message}
428432

429433
We have reported this to our team ! Please close the app and start again!
430434
`,
431-
[{
432-
text: 'Close',
433-
onPress: () => {
434-
BackAndroid.exitApp();
435+
[
436+
{
437+
text: "Close",
438+
onPress: () => {
439+
BackAndroid.exitApp();
440+
}
435441
}
436-
}]
442+
]
437443
);
438444
} else {
439445
console.log(e); // So that we can see it in the ADB logs in case of Android if needed
@@ -442,16 +448,16 @@ const errorHandler = (e, isFatal) => {
442448

443449
setJSExceptionHandler(errorHandler);
444450

445-
setNativeExceptionHandler((errorString) => {
446-
//You can do something like call an api to report to dev team here
447-
//example
448-
// fetch('http://<YOUR API TO REPORT TO DEV TEAM>?error='+errorString);
449-
//
451+
setNativeExceptionHandler(errorString => {
452+
//You can do something like call an api to report to dev team here
453+
//example
454+
// fetch('http://<YOUR API TO REPORT TO DEV TEAM>?error='+errorString);
455+
//
450456
});
451-
452457
```
453458

454-
*More Examples can be found in the examples folder*
459+
_More Examples can be found in the examples folder_
460+
455461
- Preserving old handler (thanks to zeh)
456462

457463
# Known issues and fixes:
@@ -460,14 +466,13 @@ setNativeExceptionHandler((errorString) => {
460466

461467
This is specifically occuring when you use [wix library](http://wix.github.io/react-native-navigation/) for navigation along with react-native-exception-handler. Whenever an error occurs, it will recreate the application above the crash screen.
462468

463-
464469
**Fix:**
465470

466-
You need to set second parametera as *false* while calling _setNativeExceptionHandler_.
467-
The second parameter is an android specific field which stands for forceQuitOnError.
468-
When set to false it doesnt quit the app forcefully on error. In short :
471+
You need to set second parametera as _false_ while calling _setNativeExceptionHandler_.
472+
The second parameter is an android specific field which stands for forceQuitOnError.
473+
When set to false it doesnt quit the app forcefully on error. In short :
469474

470-
Credit goes to **Gustavo Fão Valvassori**
475+
Credit goes to **Gustavo Fão Valvassori**
471476

472477
```js
473478
setNativeExceptionHandler(nativeErrorCallback, false);
@@ -477,8 +482,8 @@ setNativeExceptionHandler(nativeErrorCallback, false);
477482

478483
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.
479484
480-
481485
## CONTRIBUTORS
486+
482487
- [Atul R](https://github.com/master-atul)
483488
- [Zeh Fernando](https://github.com/zeh)
484489
- [Fred Chasen](https://github.com/fchasen)
@@ -494,6 +499,7 @@ A lot of frameworks (especially analytics sdk's) implement global exception hand
494499
- [Sébastien Krafft](https://github.com/skrafft)
495500
- [Mark Friedman](https://github.com/mark-friedman)
496501
- [Damien Solimando](https://github.com/dsolimando)
502+
- [Jens Kuhr Jørgensen](https://github.com/jenskuhrjorgensen)
497503
498504
## TESTING NATIVE EXCEPTIONS/ERRORS
499505
@@ -503,6 +509,4 @@ To make sure this module works. You can generate a native exception using the mo
503509
`rn-test-exception-handler` module does only one thing. It raises a **Native_Exceptions**.
504510
This will help you to verify your customizations or functionality of this module.
505511
506-
507-
508512
Peace ! ✌🏻🍻

0 commit comments

Comments
 (0)