Monitor su aplicación móvil React Native

Agregue el agente React Native

Ejecute lo siguiente:

$
npm i newrelic-react-native-agent

Configura tu aplicación

Abra su index.js y agregue el siguiente código para lanzar 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: true,

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


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

Copie/pegue token de su aplicación

En el código anterior, pegue token de su aplicación en appToken = "" en el código anterior. Si implementa su aplicación híbrida en la plataforma iOS y Android, deberá agregar dos tokens separados: uno para iOS y otro para Android. Si usa el mismo token de aplicación, no podrá comparar el rendimiento de la aplicación entre plataformas.

Para copiar/pegar token de su aplicación:

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

2. Copie el token de la aplicación.

   En el código anterior, reemplace <IOS-APP-TOKEN> y/o <ANDROID-APP-TOKEN> con el token de su aplicación. Si está implementando tanto en Android como en iOS, repita este proceso para obtener el segundo token de la aplicación.

(Solo aplicaciones nativas de Android) Instalar el agente de Android

1. Instale el agente nativo de Android de New Relic.

2. Agregue los siguientes cambios para aplicar el complemento Gradle:

   Si su proyecto emplea DSL complementario, realice los siguientes cambios:

   En android/app/build.gradle:

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

   Copia

   O bien, si su proyecto emplea la forma tradicional de aplicar el complemento:

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

   Copia

   Aplique NewRelic plugin en la parte superior del archivo android/app/build.gradle :

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

   Copia

3. Asegúrese de que su aplicación solicite permisos INTERNET y ACCESS_NETWORK_STATE agregando estas líneas a su AndroidManifest.xml:

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

   Copia

(solo aplicaciones nativas de iOS) Instalar el agente de iOS

Para asegurarse de que el agente React Native sea compatible con todos los marcos de iOS, instale el agente New Relic iOS:

$
npx pod-install

Configurar el enlace automático y la reconstrucción

La biblioteca React Native New Relic debe estar vinculada a su proyecto y su aplicación debe reconstruirse. Si usa React Native 0.60+, automáticamente tendrá acceso al enlace automático, sin necesidad de realizar más pasos de instalación manual.

Para Android:

$
npx react-native run-android

Para iOS:

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

Para asegurarse de que la aplicación React Native funcione correctamente, puede ejecutar los siguientes comandos y los errores fatales de JS aparecerán como un bloqueo en la UI de New Relic.

Para Android:

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

Para iOS:

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

(Opcional) Integrar con Expo

Después de instalar el agente React Native, la integración con Expo es automática con un flujo de trabajo básico , pero requiere algunos pasos adicionales para un flujo de trabajo administrado personalizado a través del complemento de configuración.

Para configurar un flujo de trabajo administrado personalizado, después de instalar nuestro paquete, agregue el complemento de configuración a la matriz de complementos de su app.json o app.config.js.

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

Para el flujo de trabajo administrado, use el comando expo prebuild --clean como se describe en la guía Agregar código nativo personalizado para reconstruir su aplicación con los cambios del complemento. Si este comando no se está ejecutando, obtendrá errores al iniciar el agente New Relic. Para el usuario de Expo Go, el agente requerirá el uso de código nativo. Dado que Expo Go no admite el envío de código nativo personalizado por aire, puede seguir la documentación de Expo sobre cómo usar código nativo personalizado en Expo Go.

(Opcional) Configurar enrutamiento y navegación instrumentados

Para instrumentar el enrutamiento y la navegación para sus aplicaciones React Native:

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

var params = {
    'screenName':'screenName'
  };

  NewRelic.recordBreadcrumb('navigation',params);