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

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

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

요구 사항

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

• 안드로이드 API 24+
• iOS 10
• iOS 기본 요구 사항
• Android 기본 요구 사항

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

설정

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

1단계: 에이전트 설치

다음을 실행합니다.

$
npm i newrelic-react-native-agent

2단계: React Native 설정

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

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,

   //Android Specific
   // Optional: Enable or disable agent logging.
    loggingEnabled: true,

    //iOS Specific
    // Optional:Enable/Disable automatic instrumentation of WebViews
    webViewInstrumentation: true
  };


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

3단계: Android 설정

React Native 에이전트가 Android와 호환되는지 확인하려면 Android 전용 에이전트를 설치하세요.

1. 이 지침 을 사용하여 New Relic 기본 Android 에이전트를 설치합니다.

2. 업데이트 build.gradle :

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

   복사

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 프레임워크와 호환되는지 확인하려면 New Relic iOS 에이전트를 설치하세요.

$
npx pod-install

5단계: 자동 연결 및 재구축

React Native New Relic 라이브러리는 프로젝트에 연결되어야 하고 애플리케이션을 다시 빌드해야 합니다.React Native 0.60+를 사용하는 경우 자동 연결에 자동으로 액세스할 수 있으므로 추가 수동 설치 단계가 필요하지 않습니다.

안드로이드 애플리케이션

npx react-native run-android

iOS 애플리케이션

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

React Native 애플리케이션이 제대로 작동하는지 확인하기 위해 다음 명령을 실행할 수 있으며 치명적인 JS 오류는 New Relic UI에서 충돌로 표시됩니다.

npx react-native run-ios --configuration Release

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

엑스포 통합(선택 사항)

Expo와의 통합은 기본 워크플로 에서 자동으로 이루어지지만 구성 플러그인 을 통해 사용자 지정 관리 워크플로 를 위한 몇 가지 추가 단계가 필요합니다.

맞춤 관리 워크플로 를 설정하려면 패키지를 설치한 후 app.json 또는 app.config.js 의 플러그인 배열에 구성 플러그인을 추가하세요.

관리형 워크플로의 경우 맞춤 네이티브 코드 추가 가이드에 설명된 대로 expo prebuild --clean 명령을 사용하여 플러그인 변경 사항으로 앱을 다시 빌드해야 합니다.이 명령이 실행되고 있지 않으면 New Relic 에이전트를 시작할 때 오류가 발생합니다.

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

현재 라우트 변경 사항을 계측하고 경로 변경 사항을 Breadcrumb로 기록하기 위해 기본적으로 2개의 라우팅 계측을 제공합니다.

• 반응 탐색

• 반응 네이티브 탐색

• 반응 탐색

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

    <NavigationContainer
        onStateChange={  NewRelic.onStateChange  }  />

    복사

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

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

    복사

• 반응 네이티브 탐색

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

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

  복사

  또는 다음 API를 사용하여 화면 변경 사항을 수동으로 보고할 수 있습니다.

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

API 호출

React Native 에이전트는 iOS 및 Android SDK 에이전트와 동일한 API 호출을 사용합니다.New Relic 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>
);

자바스크립트 오류

React Native 에이전트는 JavaScript 오류에 대한 사용자 지정 이벤트를 생성하고 이를 New Relic에 보고합니다. UI에서 사용자 정의 대시보드를 사용하여 이러한 JavaScript 오류 이벤트를 추적할 수 있습니다.

사용자 정의 대시보드를 생성하려면:

1. one.newrelic.com 으로 이동합니다.

2. 쿼리 빌더 를 클릭합니다.

3. 다음 쿼리를 실행합니다.

   SELECT * FROM `JS Errors`

   복사

4. 대시보드에 추가 을 클릭합니다.

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