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

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

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

요구 사항

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

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

설정

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

1단계: 에이전트 설치

다음을 실행합니다.

bash

$npm i newrelic-react-native-agent

2단계: React Native 설정

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

중요

적절한 애플리케이션 토큰을 입력하십시오.appToken 은 플랫폼에 따라 다릅니다.Android 및 iOS 앱에 대해 별도의 토큰을 생성해야 합니다.

import NewRelic from 'newrelic-react-native-agent';
import * as appVesrion from './package.json';
import {Platform} from 'react-native';

    let appToken;

    if (Platform.OS === 'ios') {
        appToken = '<IOS-APP-TOKEN>';
    } else {
        appToken = '<ANDROID-APP-TOKEN>';
    }


NewRelic.startAgent(appToken);
NewRelic.setJSAppVersion(appVesrion.version);
AppRegistry.registerComponent(appName, () => App);

3단계: Android 설정

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

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

업데이트 build.gradle :

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

업데이트 app/build.gradle :

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

다음 행을 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 에이전트를 설치하세요.

bash

$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 에이전트를 시작할 때 오류가 발생합니다.

API 호출

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

자바스크립트 오류

New Relic 데이터 탐색기의 사용자 지정 이벤트 섹션에서 JavaScript 오류를 볼 수 있으며 NRQL을 사용하여 쿼리할 수도 있습니다.

다음 쿼리를 사용하여 오류에 대한 대시보드를 작성할 수도 있습니다.

SELECT jsAppVersion,name,Message,errorStack,isFatal FROM `JS Errors` SINCE 24 hours ago

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