Monitorez votre application mobile React Native

Ajouter l'agent React Native

Exécutez la commande suivante :

$
npm i newrelic-react-native-agent

Configurez votre application

Ouvrez votre index.js et ajoutez le code suivant pour lancer New Relic :

import NewRelic from "newrelic-react-native-agent";
import { name, version } from "./package.json";
import { Platform } from "react-native";

let appToken;
if (Platform.OS === "ios") {
  appToken = "IOS-APP-TOKEN";
} else {
  appToken = "ANDROID-APP-TOKEN";
}

const agentConfiguration = {
  // Android Specific
  // Optional:Enable or disable collection of event data.
  analyticsEventEnabled: true,

  // Optional:Enable or disable crash reporting.
  crashReportingEnabled: true,

  // Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested.
  // This will disable default and custom interactions.
  interactionTracingEnabled: true,

  // Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
  networkRequestEnabled: true,

  // Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
  networkErrorRequestEnabled: true,
  
  // Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
  httpRequestBodyCaptureEnabled: true,
  
  // Optional:Enable or disable agent logging.
  loggingEnabled: true,
  
  // Optional:Specifies the log level. Omit this field for the default log level.
  // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
  logLevel: NewRelic.LogLevel.INFO,
  
  // iOS Specific
  // Optional:Enable/Disable automatic instrumentation of WebViews
  webViewInstrumentation: true,
  
  // Optional:Set a specific collector address for sending data. Omit this field for default address.
  collectorAddress: "",
  
  // Optional:Set a specific crash collector address for sending crashes. Omit this field for default address.
  crashCollectorAddress: "",
  
  // Optional:Enable or disable reporting data using different endpoints for US government clients
  fedRampEnabled: false,
  
  // Optional: Enable or disable offline data storage when no internet connection is available.
  offlineStorageEnabled: true,

  // iOS Specific
  // Optional: Enable or disable Background Reporting.
  backgroundReportingEnabled: false,

  // iOS Specific
  // Optional: Enable or disable to use our new, more stable event system for iOS agent.
  newEventSystemEnabled: false,
};

NewRelic.startAgent(appToken, agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

Copiez/collez votre/vos jeton(s) d'application

Dans le code ci-dessus, collez vos jetons d'application dans appToken = "" dans le code ci-dessus. Si vous lancez votre application hybride sur les plateformes iOS et Android , vous devrez ajouter deux jetons distincts : un pour iOS et un pour Android. Si vous utilisez le même jeton d'application, vous ne pourrez pas comparer les performances des applications entre les plateformes.

Pour copier/coller votre/vos jeton(s) d'application :

1. Allez à one.newrelic.com > All capabilities > Mobile > (select your mobile app) > Settings.

2. Copiez le jeton d'application.

   Dans le code ci-dessus, remplacez <IOS-APP-TOKEN> et/ou <ANDROID-APP-TOKEN> par votre jeton d’application. Si vous utilisez à la fois Android et iOS, répétez ce processus pour obtenir le deuxième jeton d'application.

(Applications natives Android uniquement) Installer l'agent Android

1. Installez l'agent Android natif New Relic.

2. Ajoutez les modifications suivantes pour appliquer le plugin Gradle :

   Si votre projet utilise un plugin DSL, apportez les modifications suivantes :

   Dans android/app/build.gradle :

   plugins {
       id "com.android.application"
       id "kotlin-android"
       id "com.newrelic.agent.android" version "7.5.1"  //<-- include this
   }

   Copier

   Ou, si votre projet est plus ancien, vous pouvez utiliser l'ID de plugin legacy newrelic en ajoutant ce snippet:

   buildscript {
     ...
     repositories {
       ...
       mavenCentral()
     }
     dependencies {
       ...
       classpath "com.newrelic.agent.android:agent-gradle-plugin:7.5.1"
     }
   }

   Copier

   Appliquez le NewRelic plugin en haut du fichier android/app/build.gradle :

   apply plugin: "com.android.application"
   apply plugin: 'newrelic' // <-- include this

   Copier

3. Assurez-vous que votre application requests les autorisations INTERNET et ACCESS_NETWORK_STATE en ajoutant ces lignes à votre AndroidManifest.xml:

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

   Copier

(Applications natives iOS uniquement) Installer l'agent iOS

Pour garantir que l'agent React Native est compatible avec tous les frameworks iOS, installez l'agent iOS New Relic :

$
npx pod-install

Configurer la liaison automatique et la reconstruction

La bibliothèque React Native New Relic doit être liée à votre projet et votre application doit être reconstruite. Si vous utilisez React Native 0.60+, vous avez automatiquement accès à la liaison automatique, ne nécessitant aucune étape d'installation manuelle supplémentaire.

Pour Android :

$
npx react-native run-android

Pour iOS :

$
cd ios/
$
pod install --repo-update
$
cd ..
$
npx react-native run-ios

Afin de vous assurer que l'application React Native fonctionne correctement, vous pouvez exécuter les commandes suivantes et les erreurs JS fatales apparaîtront sous la forme d'un crash dans l'interface utilisateur de New Relic.

Pour Android :

$
npx react-native run-android --variant=release

Pour iOS :

$
npx react-native run-ios --configuration Release

(Facultatif) Intégration avec Expo

Après l'installation de l'agent React Native, l'intégration avec Expo est automatique avec un workflow nu mais nécessite quelques étapes supplémentaires pour un workflow géré personnalisé via des plugins de configuration.

Pour configurer workflowpersonnalisé géré, après avoir installé notre package, ajoutez le plugin de configuration à l'éventail de plugins de votre app.json ou app.config.js.

{
  "name": "my app",
  "plugins": ["newrelic-react-native-agent"]
}

Pour le workflow géré, utilisez la commande expo prebuild --clean comme décrit dans le guide Ajout de code natif personnalisé pour reconstruire votre application avec les modifications du plug-in. Si cette commande n'est pas en cours d'exécution, vous obtiendrez des erreurs lors du démarrage de l'agent New Relic. Pour l'utilisateur Expo Go, l'agent nécessitera l'utilisation de code natif. Étant donné qu'Expo Go ne prend pas en charge l'envoi de code natif personnalisé par liaison radio, vous pouvez suivre la documentation d'Expo pour savoir comment utiliser le code natif personnalisé dans Expo Go.

(Facultatif) Configurer le routage et la navigation instrument

Pour instrumenter le routage et la navigation de vos applications React Native :

Navigation.events().registerComponentDidAppearListener(
  NewRelic.componentDidAppearListener
);

var params = {
  screenName: "screenName",
};

NewRelic.recordBreadcrumb("navigation", params);