As a mobile app developer, you’ve likely faced your own unique challenges in detecting, reproducing and debugging run-time crashes in React Native applications. Of course we need a crash analyzer tool that can track these crashes.
This is a reporter that stores user action steps and runtime crashes info that you can analyze on Crashlyzer with a detailed specification of the tracked crashes. You no longer need to change existing code, you just need to import react-native-crashalert components in your js classes rather than react-native.
Version 3.0.5 supports react-native >= 0.52.0
Crashalert supports both the platforms android and iOS.
$ yarn react-native-crashalert or npm install --save react-native-crashalert
To analyze your app crashes, you should follow Node server and Web client installation here
NOTE: Please follow the link here for the complete installation guide of Crashlyzer.
First of all, you'll need to add following code in your app.js or any top hierarchy component in constructor or componentWillMount() method. This is required configuration for crash reporter.
import { CrashReporter } from 'react-native-crashalert'
CrashReporter.setConfiguration({
hostURL: 'http://localhost:8000', // Replace this URL with your Server base url, in my case I have setup the node server on my machine itself using docker container
enableReporter: true // pass false here if you don't want to enable reporting the crashes
});NOTE: In case localhost url is not working in any platform android/iOS then you need to replace the value of hostURL to your machine's local IP Address in setConfiguration method.
You can simply try the following sample code :
// Import the component 'react-native-crashalert' module
import {Button} from 'react-native-crashalert';
// Within your render function
<Button style={styles.button} onPress={()=> this.pressLogin()}>
LOG IN
</Button>
// Adding your styles...
var styles = StyleSheet.create({
button: {
height:35,
backgroundColor: '#F57B20',
alignSelf:'center',
marginTop:10,
width:100
}
});NOTE : Following are some additional props which might be used to pass manual information associated with the component otherwise the default information of the component will get passed.
The example app RNCrashExamples demonstrated the use of our crash reporter library. It is also having some additional features i.e. Eslint, Code-Push, React-Navigation and Redux are integrated. You need to add your code-push keys for android and iOS in their respective mapping files, you can follow the inline link of code-push for more details. The code-push is optional in the example app for debug mode.
- Button
- TouchableOpacity
- TouchableHeighlight
- TouchableWithoutFeedback
- TouchableNativeFeedback
- searchText : To get the searched text on the
TextInputcomponent.(NOTE : While usingTextInputcomponent, you need to pass thetextvalue in this field) - actionOn : To associate extra information related to the component used.
- textStyle: To give a custom style of Text
If you experience the following issue in android while building the example app:
ENOENT: no such file or directory, open '/Users/macmini33/Desktop/demo/RNCrashExamples/android/app/build/intermediates/assets/debug/CodePushHash'
Fix: You need to create two (assets and debug) folders to the following path:
rootDir -> android -> app -> build -> intermediates -> assets -> debug
MIT