This module utilizes native New Relic agents to expose the Javascript environment. The New Relic SDKs collect crashes, network traffic, and other information for hybrid apps using native components.
yarn add @bibabovn/react-native-newrelic
npx pod-install
Install the New Relic native Android agent (instructions here)
Update build.gradle:
buildscript {
...
repositories {
...
mavenCentral()
}
dependencies {
...
classpath "com.newrelic.agent.android:agent-gradle-plugin:5.+"
}
}
Update app/build.gradle
apply plugin: "com.android.application"
apply plugin: 'newrelic' // <-- add this
...
dependencies {
...
implementation "com.newrelic.agent.android:android-agent:5.+"
}
Update the app’s MainApplication.java
file (./android/app/src/main/java/‘{package}/MainApplication.java’)
Add an imports for the module and the native agent at the top of the file:
import com.newrelic.agent.android.NewRelic;
Move the NewRelic.start(Context)
call from the default (Main) activity
(as detailed in step #5 of the agent installation instructions) to the MainApplication.onCreate()
method.
Context
parameter from this.getApplication()
to this
GENERATED_TOKEN
has been replaced with a valid New Relic application token@Override
public void onCreate() {
super.onCreate();
NewRelic.withApplicationToken("GENERATED_TOKEN").start(this);
...
}
Set app permissions
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
NewRelic doesn’t officially support React Native yet, so some RN features may not work well with NewRelic like Flipper on iOS. So if you want to use RNNewRelic for development you’ll need to disable it
Install the New Relic native IOS agent (instructions here with notes regarding agent v7.+):
// add this
pod 'NewRelicAgent'
pod install
Integrate and start the agent
AppDelegate.m
file #import <NewRelic/NewRelic.h>
application:didFinishLaunchingWithOptions
[NewRelic startWithApplicationToken:@"GENERATED_TOKEN"];
Automatically upload your dSYM
SCRIPT=`/usr/bin/find "${SRCROOT}" -name newrelic_postbuild.sh | head -n 1`
/bin/sh "${SCRIPT}" "YOUR_GENERATED_TOKEN"
Add a prefix header to your iOS project
PrefixHeader.pch
file as explained here Your file should look like this: #ifdef __OBJC__
#import <NewRelic/NewRelic.h>
#endif
See new relic IOS sdk doc or android sdk for more detail
Call this to initialize the NRNewRelic module. capture all unhandle js exception
Test with a native exception
Track a method as an interaction
InteractionId
is stringName or rename interaction
End an interaction Required. The string ID for the interaction you want to end. This string is returned when you use startInteraction().
Create custom metrics
enum Category {
NONE = 'None',
VIEW_LOADING = 'View Loading',
VIEW_LAYOUT = 'Layout',
DATABASE = 'Database',
IMAGE = 'Images',
JSON = 'JSON',
NETWORK = 'Network',
}
type MetricAttributes = {
count: number;
} | {
totalValue: number;
} | {
count: number;
totalValue: number;
exclusiveValue: number;
} | {
count: number;
totalValue: number;
exclusiveValue: number;
countUnit: MetricUnit;
valueUnit: MetricUnit;
};
Call this to record js handled exception.
e
is js exceptionCreate or update an attribute
This method removes the attribute specified by the name string
Set custom user ID for associating sessions with events and attributes
Track app activity/screen that may be helpful for troubleshooting crashes
Creates and records a custom event, for use in New Relic Insights
* IMPORTANT considerations and best practices include:
*
* - You should limit the total number of event types to approximately five.
* eventType is meant to be used for high-level categories.
* For example, you might create an event type Gestures.
*
* - Do not use eventType to name your custom events.
* Create an attribute to name an event or use the optional name parameter.
* You can create many custom events; it is only event types that you should limit.
*
* - Using the optional name parameter has the same effect as adding a name key in the attributes dictionary.
* name is a keyword used for displaying your events in the New Relic UI.
* To create a useful name, you might combine several attributes.
Record HTTP transactions at varying levels of detail
Record HTTP error transactions at varying levels of detail
interface RequestOptions {
httpMethod: 'GET' | 'POST' | 'PUT' | 'HEAD' | 'DELETE' | 'PATCH' | 'OPTIONS';
statusCode: number;
startTime?: number;
endTime?: number;
bytesSent?: number;
bytesReceived?: number;
responseHeader?: any;
responseBody?: string;
params?: {
[key: string]: any;
};
}
import * as React from 'react';
import {
StyleSheet,
View,
Text,
FlatList,
Button,
SafeAreaView,
} from 'react-native';
import {
crashNow,
endInteraction,
// noticeNetworkFailure,
noticeNetworkRequest,
nrInit,
// nrRecordMetric,
recordBreadcrumb,
// recordCustomEvent,
// removeAttribute,
setAttribute,
// setInteractionName,
setUserId,
startInteraction,
} from 'react-native-newrelic';
export default function App() {
const [dataSource, setResult] = React.useState<any>([]);
const [isLoading, setLoading] = React.useState<boolean>(true);
React.useEffect(() => {
nrInit();
recordBreadcrumb('User open first screen', { stack: 'feed-stack' });
setUserId('test-id');
}, []);
//
React.useEffect(() => {
const url = 'https://reactnative.dev/movies.json';
const startTime = new Date().getTime();
fetch(url)
.then((response) => response.json())
.then((response) => {
const endTime = new Date().getTime();
noticeNetworkRequest(url, {
httpMethod: 'GET',
startTime,
endTime,
responseBody: JSON.stringify(response),
statusCode: 200,
responseHeader: response.headers,
});
console.log(response);
setLoading(false);
setResult(response.movies);
})
.catch((error) => {
// logging function can be added here as well
console.error(error);
});
}, []);
//
React.useEffect(() => {
// Create Custom event tables in New Relic Insights
setAttribute('name', 'User name');
setAttribute('isActive', true);
setAttribute('age', 23);
}, []);
//
const badApiLoad = async () => {
setLoading(true);
const interactionId = await startInteraction('StartLoadBadApiCall');
const url = 'https://facebook.github.io/react-native/moviessssssssss.json';
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
setLoading(false);
endInteraction(interactionId);
setResult(responseJson.movies);
})
.catch((error) => {
// noticeNetworkFailure(url, { httpMethod: 'GET', statusCode: 0 });
setLoading(false);
endInteraction(interactionId);
console.error(error);
});
};
const testNativeCrash = () => {
crashNow('Test crash message');
};
const jsErrorHandle = () => {
throw new Error('test js error handle');
};
return (
<SafeAreaView style={styles.container}>
<Button title={'Bad API'} onPress={badApiLoad} color={'#3365f3'} />
<Button
title={'Test JS error handle'}
onPress={jsErrorHandle}
color={'#3365f3'}
/>
<Button
title={'Test native crash'}
onPress={testNativeCrash}
color={'#3365f3'}
/>
<FlatList
data={dataSource}
renderItem={({ item }) => (
<Text>
{item.title}, {item.releaseYear}
</Text>
)}
keyExtractor={({ id }) => id}
ListEmptyComponent={
<View>{isLoading ? <Text>Loading...</Text> : null}</View>
}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 16,
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
Author: huynqbibabo
Source Code: https://github.com/huynqbibabo/react-native-newrelic
#react-native #react #mobile-apps