search

huynqbibabo / react-native-newrelic

MIT License
8 stars 3 forks source link

readme

New Relic React Native Module

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.

React Native npm package version. PRs welcome!

Features

Requirements

Installation

crashNow(message?: string): void;

Test with a native exception

startInteraction(interactionName: string): Promise;

Track a method as an interaction

  • InteractionId is string

setInteractionName(interactionName: string): void;

Name or rename interaction

endInteraction(id: InteractionId): void;

End an interaction Required. The string ID for the interaction you want to end. This string is returned when you use startInteraction().

nrRecordMetric(name: string, category: MetricCategory | string, args?: MetricAttributes): void;

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; };


### reportJSExceptionHandler(e?: any, isFatal?: boolean): void;
> Call this to record js handled exception.
- `e` is js exception

#### setAttribute(name: string, value: boolean | number | string): void;
> Create or update an attribute

### removeAttribute(name: string): void;
> This method removes the attribute specified by the name string

### setUserId(userId: string): void;
> Set custom user ID for associating sessions with events and attributes

### recordBreadcrumb(name: string, attributes?: {[key: string]: boolean | number | string}): void;
> Track app activity/screen that may be helpful for troubleshooting crashes

### recordCustomEvent(eventType: string, eventName?: string, attributes?: {[key: string]: boolean | number | string}): void;
> Creates and records a custom event, for use in New Relic Insights
```angular2html
* 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.

noticeNetworkRequest(url: string, options: RequestOptions): void;

Record HTTP transactions at varying levels of detail

noticeNetworkRequest(url: string, options: RequestOptions): void;

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;
};
}

Example


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([]); const [isLoading, setLoading] = React.useState(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 (