Installation
The Raygun4ReactNative provider allows you to automatically capture and report on unhandled runtime errors within your project by setting up event listeners for the JavaScript and platform-native (Android/iOS) sides of your project.
The provider also allows for manual error capturing using the RaygunClient.sendError(...)
function. This allows you to customize the data being reported on and capture use cases specific to your project.
Installation
Installing and integrating the provider is simple and instantly begins working in the background so that you can get back to developing quickly.
Requirements
"react-native": ^0.60.0
Pull the package into your project
Navigate to your project and install the package and its peer dependencies using npm:
npm:
npm install raygun4reactnative
#Peer dependencies as well
npm install react react-native @react-native-async-storage/async-storage
yarn:
yarn add raygun4reactnative
#Peer dependencies as well
yarn add react react-native @react-native-async-storage/async-storage
Additional step for iOS
Since our SDK supports native crashes, we need to link the SDK to your native projects.
Modify Podfile
platform :ios, '10.0'
then run
cd ios && pod install
# OR
npx pod-install ios
Additional step for Android
Modify the app's android/app/src/main/AndroidManifest.xml to include the following line to enable the background Crash Reporting Service & Real-time User monitoring
<application ...>
...
<service
android:name="com.raygun.raygun4android.services.CrashReportingPostService"
android:exported="false"
android:permission="android.permission.BIND_JOB_SERVICE"
android:process=":crashreportingpostservice"
/>
<service
android:name="com.raygun.raygun4android.services.RUMPostService"
android:exported="false"
android:permission="android.permission.BIND_JOB_SERVICE"
android:process=":rumpostservice"
/>
...
</application>
Integrate the package with your project
From here you can import the package into your project and initialize the RaygunClient using the API key displayed when you created your Raygun application (or can be viewed in the application settings).
import RaygunClient from 'raygun4reactnative';
const options: RaygunClientOptions = {
apiKey: '_YOUR_API_KEY_',
enableCrashReporting: true
}
RaygunClient.init(options);
This will enable Raygun Crash Reporting and immediately start transmitting errors to your Raygun dashboard. See Advanced Initialisation Options to further customize your RaygunClient.
Usage
Automatic Crash Reporting
Once the RaygunClient has been initialized it will capture unhandled runtime errors within your project and transmit them to Raygun to be displayed on your Raygun dashboard.
The captured errors include JavaScript errors and promise rejections as well as native errors occurring on the Android/iOS platform side of your app (see Advanced Initialisation Options to disable native side error capturing).
Manual Crash Reporting
On top of automatic Crash Reporting, you can implement manual error sending within your project to capture custom errors or unhandled exceptions. This is accomplished using the RaygunClient.sendError(...)
function:
import RaygunClient, {CustomData} from "raygun4reactnative"
const error = new Error("Custom Message"); // This error can be any Error
RaygunClient.sendError(error);
You can also append Tags and Custom Data to manual crash reports (See Customize Manual Crash Reports).
Start Capturing Errors!
Now that you've initialized your RaygunClient within your project you can see that it is working by creating some errors:
const App = () => {
throw new Error("FOOBAR");
}
Then those errors will be packaged as crash reports and displayed on your Application dashboard in the Crash Reporting section:
This provider is open source and available at the Raygun4ReactNative repository.