React Native 애플리케이션 모니터링

React Native 에이전트를 사용하면 하이브리드 앱의 성능을 모니터링하고 코드 오류를 식별할 수 있습니다. 뉴렐릭 에이전트는 기본 구성 요소를 사용하는 하이브리드 앱들에 대한 충돌 데이터, 네트워크 트래픽 및 기타 정보를 수집합니다. 그런 다음 에이전트는 사용자가 UI에서 분석할 수 있도록 해당 데이터를 보냅니다.

에이전트는 팀이 플랫폼에 관계없이 하이브리드 앱의 상태를 이해할 수 있도록 합니다. Javascript 오류, 분산 추적, 네트워크 계측 등에 대한 인사이트를 제공하여 팀이 정보에 입각해 개발 선택을 할 수 있도록 지원합니다.

요구 사항

React Native 에이전트를 설치하기 전에 앱이 다음 요구 사항을 충족하는지 확인하십시오.

• Android API 24+
• iOS 10
• iOS 네이티브 요구 사항
• Android 네이티브 요구 사항

네이티브 지원 수준은 React Native 요구 사항을 기반으로 합니다.

설정

아직 계정이 없으시면, 아래에서 무료 뉴렐릭 계정을 생성해 지금 바로 데이터 모니터링을 시작하십시오.

React Native 애플리케이션을 모니터링하려면 다음 5단계를 완료합니다.

1단계: 에이전트 설치

다음을 실행합니다.

$
npm i newrelic-react-native-agent

2단계: React Native 설정

이제 index.js를 열고 다음 코드를 추가하여 뉴렐릭을 시작합니다.

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: ""
  };


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

3단계: Android 설정

React Native 에이전트가 Android와 호환될 수 있도록 Android 전용 에이전트를 설치합니다.

1. 다음 지침을 사용해 뉴렐릭 네이티브 Android 에이전트를 설치합니다.

2. build.gradle 업데이트:

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

   복사

3. app/build.gradle 업데이트:

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

   복사

4. 다음 줄을 AndroidManifest.xml에 추가하여 앱이 INTERNET 및 ACCESS_NETWORK_STATE 권한을 요청하도록 합니다.

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

   복사

4단계: iOS 설정

React Native 에이전트가 모든 iOS 프레임워크와 호환될 수 있도록 뉴렐릭iOS 에이전트를 설치합니다.

$
npx pod-install

5단계: 자동 연결 및 재빌드

React Native 뉴렐릭 라이브러리를 프로젝트에 연결하고 애플리케이션을 다시 빌드해야 합니다. React Native 0.60 이상을 사용하는 경우 추가적인 수동 설치 단계가 필요하지 않은 자동 연결 기능에 자동으로 액세스할 수 있습니다.

Android 애플리케이션

npx react-native run-android

iOS 애플리케이션

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

React Native 애플리케이션이 제대로 작동하는지 확인하기 위해 다음 명령을 실행합니다. 치명적인 JS 오류는 뉴렐릭 UI에서 충돌로 표시됩니다.

npx react-native run-ios --configuration Release

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

Expo 통합(선택 사항)

Expo와의 통합은 베어 워크플로우에서 자동으로 이루어지지만 구성 플러그인을 통해 커스텀 관리 워크플로우에 몇 가지 추가 단계를 수행해야 합니다.

커스텀 관리 워크플로우를 설정하려면, 패키지를 설치한 후 구성 플러그인을 app.json 또는 app.config.js의 플러그인 배열에 추가합니다.

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

관리 워크플로우의 경우 커스텀 네이티브 코드 추가 가이드에 설명된 대로 expo prebuild --clean 명령어를 사용해 플러그인 변경사항으로 앱을 다시 빌드해야 합니다. 이 명령어가 실행되고 있지 않으면 뉴렐릭 에이전트를 시작할 때 오류가 발생합니다. Expo Go 사용자의 경우 에이전트는 네이티브 코드를 사용해야 합니다. Expo Go는 커스텀 네이티브 코드를 무선으로 전송하는 것을 지원하지 않으므로 Expo Go에서 커스텀 네이티브 코드를 사용하는 방법에 대한 Expo의 문서를 따르십시오.

라우팅 계측(현재 화면 이름 캡처)

뉴렐릭은 현재 라우트 변경 사항을 계측하고 라우트 변경 사항을 브레드크럼으로 기록하는 데 즉시 사용할 수 있는 두 가지 라우팅 계측을 제공합니다.

• React Navigation

• React Native Navigation

• react-navigation

  • v5는 다음과 같이 NavigationContainer에서 onStateChange를 NewRelic.onStateChange로 설정합니다.

    <NavigationContainer
        onStateChange={  NewRelic.onStateChange  }  />

    복사

  • '<='v4는 앱 래퍼에서 다음과 같이 onNavigationStateChange를 NewRelic.onNavigationStateChange로 설정합니다.

    export  default () => (
    <App
    onNavigationStateChange={ NewRelic.onNavigationStateChange  }  />
    );

    복사

• react-native-navigation

  다음을 사용해 NewRelic.componentDidAppearListener 리스너를 등록합니다.

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

  복사

  아니면 다음 API를 사용해 화면 변경 사항을 수동으로 보고할 수 있습니다.

var params = {
    'screenName':'screenName'
  };
  
  NewRelic.recordBreadcrumb('navigation',params);

API 호출

뉴렐릭의 React Native 에이전트는 iOS 및 Android SDK 에이전트와 동일한 API 호출을 사용합니다. 뉴렐릭 iOS SDK 문서 또는 Android SDK를 참조하십시오.

React Native와 관련된 오류의 경우 다음과 같이 NewRelic.recordError(error)를 호출할 수 있습니다.

import ErrorBoundary from 'react-native-error-boundary';
const errorHandler = (error: Error, stackTrace: string) => {
  NewRelic.recordError(error);
};
const App = () => (
  <ErrorBoundary onError={errorHandler}>
    <ChildrenThatCouldThrowEror />
  </ErrorBoundary>
);

JavaScript 오류

React Native Agent v1.2.0 이상:

JavaScript 오류 및 Promise 거부는 뉴렐릭의 Handled Exceptions 탭에서 볼 수 있습니다. 기록된 각 JavaScript 오류에 대한 이벤트 추적, 속성 및 스택 트레이스를 확인할 수 있습니다.

다음 쿼리를 실행하여 이러한 오류를 찾을 수도 있습니다.

SELECT * FROM MobileHandledException SINCE 24 hours ago

네이티브 에이전트 v1.1.0 및 그 이전 버전:

React Native 에이전트는 JavaScript 오류에 대한 커스텀 이벤트를 생성하고 이를 뉴렐릭에 보고합니다. UI에서 커스텀 대시보드를 사용해 이러한 JavaScript 오류 이벤트를 추적할 수 있습니다.

커스텀 대시보드를 만들려면:

1. one.newrelic.com으로 이동한 후.

2. Query builder를 클릭합니다.

3. 쿼리를 실행합니다.

   SELECT * FROM `JS Errors`

   복사

4. Add to dashboard를 클릭합니다.

대시보드를 시작하는 데 도움이 필요한 경우 대시보드 소개를 참조하십시오.