• 로그인지금 시작하세요

사용자의 편의를 위해 제공되는 기계 번역입니다.

영문본과 번역본이 일치하지 않는 경우 영문본이 우선합니다. 보다 자세한 내용은 이 페이지를 방문하시기 바랍니다.

문제 신고

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 {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 에 추가하여 앱이 INTERNETACCESS_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

While you wait for your data to come in...

Did this doc help you install?

엑스포 통합(선택 사항)

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

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

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

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

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

  • 반응 탐색

  • 반응 네이티브 탐색

  • 반응 탐색

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

      <NavigationContainer
      onStateChange={ NewRelic.onStateChange } />
    • '<='v4 다음과 같이 앱 래퍼에서 onNavigationStateChangeNewRelic.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 를 참조하십시오.

자바스크립트 오류

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

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

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

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

Copyright © 2022 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.