Monitor your Ionic Capacitor mobile app

Create an application token(s)

1. Go to one.newrelic.com > Browser & Mobile > (choose Android or iOS), then complete the instrumentation steps in the UI.
2. From Step 4 in the UI, copy the application token(s) (one for iOS and Android if applicable).

Add the Capacitor agent

In your project directory, add the Capacitor agent to your project using your command line tool:

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

Configure the Capacitor

1. Start the Capacitor agent in the initialization of your app in main.ts (Angular or Vue) or index.tsx (React).

2. Add the following code:

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

   Copy

   Make sure you paste your application token(s) into appToken = "" in the code above. If you deployed your hybrid app to both iOS and Android platforms, you'll need to add two separate tokens: one for iOS and one for Android.

(Android only) If you're monitoring an Android-native app, follow these steps:

1. Install the New Relic native Android agent.

2. Add the following changes to apply the Gradle plugin:

   If your project is using plugin DSL, add this snippet:

   In android/app/build.gradle:

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

   Copy

   Or, if your project is older, you can use the legacy newrelic plugin ID by adding this snippet:

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

   Copy

   In android/app/build.gradle, apply the NewRelic plugin to the top of the android/app/build.gradle file:

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

   Copy

3. In your AndroidManifest.xml file, add the following permissions:

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

   Copy

4. To automatically link the package, rebuild your project:

   bash

   Copy

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

Deploy your app

Then, deploy your app. After some app activity, you should see data in New Relic (it may take a few minutes after deploying your app).