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';
   var 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
   }
   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. Update build.gradle:

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

   Copy

3. Update app/build.gradle:

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

   Copy

4. Make sure your app requests INTERNET and ACCESS_NETWORK_STATE permissions by adding these lines to your AndroidManifest.xml:

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

   Copy

5. 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).