Monitorez votre application mobile Ionic Capacitor

Créer un ou plusieurs jeton(s) d'application

1. Accédez à one.newrelic.com > Browser & Mobile > (choose Android or iOS), puis terminez les étapes d’instrumentation dans l’interface utilisateur.
2. Depuis Step 4 dans l'interface utilisateur, copiez le(s) jeton(s) d'application (un pour iOS et Android le cas échéant).

Ajouter l'agent Capacitor

Dans votre répertoire de projet, ajoutez l'agent Capacitor à votre projet à l'aide de votre outil de ligne de commande :

$
npm install @newrelic/newrelic-capacitor-plugin
$
npx cap sync

Configurer le Capacitor

1. Démarrez l'agent Capacitor lors de l'initialisation de votre application dans main.ts (Angular ou Vue) ou index.tsx (React).

2. Ajoutez le code suivant :

   import {
     NewRelicCapacitorPlugin,
     NREnums,
     AgentConfiguration,
   } from "@newrelic/newrelic-capacitor-plugin";
   import { Capacitor } from "@capacitor/core";
   
   let appToken;
   if (Capacitor.getPlatform() === "ios") {
     appToken = "IOS_APP_TOKEN";
   } else {
     appToken = "ANDROID_APP_TOKEN";
   }
   if (Capacitor.getPlatform() === "ios") {
     appToken = "IOS_APP_TOKEN";
   } else {
     appToken = "ANDROID_APP_TOKEN";
   }
   
   let agentConfig: 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.
     httpResponseBodyCaptureEnabled: 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: NREnums.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 sending JS console logs to New Relic.
     sendConsoleEvents: true,
     // 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: true,
     // iOS Specific
     // Optional: Enable or disable to use our new, more stable event system for iOS agent.
     newEventSystemEnabled: true,
   };
   
   NewRelicCapacitorPlugin.start({
     appKey: appToken,
     agentConfiguration: agentConfig,
   });

   Copier

   Assurez-vous de coller 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.

(Android uniquement) Si vous monitoring une application native Android , suivez ces étapes :

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, ajoutez ce snippet:

   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

   Dans android/app/build.gradle, appliquez le plugin NewRelic en haut du fichier android/app/build.gradle :

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

   Copier

3. Dans votre fichier AndroidManifest.xml , ajoutez les autorisations suivantes :

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

   Copier

4. Pour lier automatiquement le package, reconstruisez votre projet :

   bash

   Copier

   $
   # Android apps
   $
   ionic capacitor run android
   $
   # iOS apps
   $
   ionic capacitor run ios

déployez votre application

Ensuite, lancez votre application. Après quelques activités de l'application, vous devriez voir des données dans New Relic (cela peut prendre quelques minutes après le déploiement de votre application).