Monitor seu aplicativo móvel React Native

Adicione o agente React Native

Execute o seguinte:

$
npm i newrelic-react-native-agent

Configure seu aplicativo

Abra seu index.js e adicione o seguinte código para lançar o 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/cole seu(s) token(s) de aplicativo

No código acima, cole o(s) token(s) do seu aplicativo em appToken = "" no código acima. Se você implantar seu aplicativo híbrido nas plataformas iOS e Android, precisará adicionar dois tokens separados: um para iOS e outro para Android. Se você usar o mesmo token de aplicativo, não será possível comparar o desempenho do aplicativo entre as plataformas.

Para copiar/colar seu(s) token(s) de aplicativo:

1. Vá para one.newrelic.com > All capabilities > Mobile > (select your mobile app) > Settings.

2. Copie o token do aplicativo.

   No código acima, substitua <IOS-APP-TOKEN> e/ou <ANDROID-APP-TOKEN> pelo token do seu aplicativo. Se você estiver implantando Android e iOS, repita esse processo para obter o segundo token do aplicativo.

(Somente aplicativos nativos do Android) Instale o agente Android

1. Instale o agente Android nativo do New Relic.

2. Adicione as seguintes alterações para aplicar o plug-in Gradle:

   Se o seu projeto estiver usando plug-in DSL, faça as seguintes alterações:

   Em android/app/build.gradle:

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

   Copiar

   Ou, se seu projeto estiver usando a maneira tradicional de aplicar o plug-in:

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

   Copiar

   Aplique o NewRelic plugin ao topo do arquivo android/app/build.gradle :

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

   Copiar

3. Certifique-se de que seu aplicativo solicite as permissões INTERNET e ACCESS_NETWORK_STATE adicionando estas linhas ao seu AndroidManifest.xml:

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

   Copiar

(somente aplicativos nativos do iOS) Instale o agente iOS

Para garantir que o agente React Native seja compatível com toda a estrutura iOS, instale o agente iOS New Relic:

$
npx pod-install

Configurar vinculação automática e reconstrução

A biblioteca React Native New Relic deve estar vinculada ao seu projeto e seu aplicativo precisa ser reconstruído. Se você usar o React Native 0.60+, terá acesso automático ao autolinking, não exigindo mais etapas de instalação manual.

Para Android:

$
npx react-native run-android

Para iOS:

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

Para garantir que o aplicativo React Native funcione corretamente, você pode executar os comandos a seguir, e erros fatais de JS aparecerão como uma falha na interface do usuário do New Relic.

Para Android:

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

Para iOS:

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

(Opcional) Integrar com Expo

Depois de instalar o agente React Native, a integração com o Expo é automática com fluxo de trabalho simples , mas requer algumas etapas extras para fluxo de trabalho gerenciado personalizado por meio do plug-in de configuração.

Para configurar o fluxo de trabalho gerenciado personalizado, após instalar nosso pacote, adicione o plug-in de configuração à matriz de plug-ins do seu app.json ou app.config.js.

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

Para o fluxo de trabalho gerenciado, use o comando expo prebuild --clean conforme descrito no guia Como adicionar código nativo personalizado para recriar seu aplicativo com as alterações do plug-in. Se este comando não estiver em execução, você receberá erros ao iniciar o agente New Relic. Para o usuário Expo Go, o agente exigirá o uso de código nativo. Como o Expo Go não oferece suporte ao envio de código nativo personalizado pelo ar, você pode seguir a documentação do Expo sobre como usar código nativo personalizado no Expo Go.

(Opcional) Configurar roteamento e navegação do instrumento

Para instrumentar roteamento e navegação para seus aplicativos React Native:

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

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

  NewRelic.recordBreadcrumb('navigation',params);