• EnglishEspañol日本語한국어Português
  • 로그인지금 시작하기

React Native 모바일 앱 모니터링

뉴렐릭의 React Native 에이전트는 React Native 모바일 앱을 모니터링하고 앱의 성능, 오류 및 사용자 경험에 대한 심층적인 인사이트를 제공합니다. JavaScript로 작성된 React Native 에이전트에는 뉴렐릭이 네이티브 모바일 앱에 제공하는 모든 모바일 모니터링 기능이 포함되어 있습니다. React Native 에이전트를 설치하고 구성하면 다음을 수행할 수 있습니다.

  • JavaScript 오류 캡처: 문제를 빠르게 식별하고 수정
  • 네트워크 요청 추적: 앱이 백엔드와 상호 작용하는 방식 확인
  • 분산 추적 사용: 처리된 예외 분석 및 근본 원인 파악
  • 커스텀 이벤트 및 메트릭 생성: 사용자가 앱과 상호 작용하는 방식 이해

one.newrelic.com > All capabilities > Mobile > (select an app) > Summary: React Native 에이전트는 데이터를 뉴렐릭으로 전송하여 충돌 데이터, 네트워크 트래픽 및 하이브리드 앱에 대한 여러 정보를 분석할 수 있도록 합니다.

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

호환성 요구 사항

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

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

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

(권장) 안내 설치

React Native 에이전트를 설치하려면 UI에 있는 안내 설치를 따릅니다.

수동 설치

에이전트를 수동으로 설치해야 하는 경우 다음 단계를 따르십시오.

React Native 에이전트 추가

다음을 실행합니다.

bash
$
npm i newrelic-react-native-agent

애플리케이션 구성

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: "",
// Optional:Enable or disable reporting data using different endpoints for US government clients
// fedRampEnabled: false
};
NewRelic.startAgent(appToken, agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

앱 토큰 복사/붙여넣기

애플리케이션 토큰을 위 코드의 appToken = ""에 붙여 넣습니다. iOS 및 Android 플랫폼 모두에 하이브리드 앱을 배포한 경우, iOS용 토큰과 Android용 토큰 두 개를 추가해야 합니다. 동일한 앱 토큰을 사용하면 플랫폼 간 앱 성능을 비교할 수 없습니다.

앱 토큰을 복사하여 붙여 넣으려면 다음 단계를 따릅니다.

  1. one.newrelic.com > All capabilities > Mobile > (모바일 앱 선택) > Settings로 이동합니다.

  2. 애플리케이션 토큰을 복사합니다.

    위 코드에서 <IOS-APP-TOKEN> 및/또는 <ANDROID-APP-TOKEN>을 앱 토큰으로 교체합니다. Android와 iOS 모두에 배포하는 경우 이 프로세스를 반복하여 두 번째 앱 토큰을 가져옵니다.

(Android 네이티브 앱만 해당) Android 에이전트 설치

  1. 뉴렐릭의 네이티브 Android 에이전트를 설치합니다.

  2. build.gradle 업데이트:

    buildscript {
    ...
    repositories {
    ...
    mavenCentral()
    }
    dependencies {
    ...
    classpath "com.newrelic.agent.android:agent-gradle-plugin:7.1.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" />

(iOS 네이티브 앱만 해당) iOS 에이전트 설치

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

bash
$
npx pod-install

자동 연결 및 재구축 구성

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

안드로이드의 경우:

bash
$
npx react-native run-android

iOS의 경우:

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

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

안드로이드의 경우:

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

iOS의 경우:

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

(선택사항) Expo와 통합

React Native 에이전트를 설치한 후 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 Native 앱의 라우팅 및 탐색을 계측하려면:

에이전트 계측 맞춤화

에이전트 계측을 맞춤화할 필요가 있으십니까? 공개된 모바일 SDK API 방법들을 사용하면 커스텀 데이터를 수집하고 기본 설정을 구성하는 등의 작업을 수행할 수 있습니다.

React Native 에이전트에서는 다음을 맞춤화할 수 있습니다.

원하는 경우...

사용되는 방법

충돌 문제 해결에 도움이 될 수 있는 앱 활동을 추적하기 위해 이동 경로 기록

이동 경로 기록

메서드를 상호 작용으로 추적

상호 작용 시작

상호 작용 중지

커스텀 메트릭 기록

커스텀 메트릭 기록

커스텀 오류 기록

커스텀 오류 기록

커스텀 속성 및 이벤트 기록

커스텀 속성 및 이벤트를 보고하는 방법에는 여러 가지가 있습니다.

커스텀 네트워크 요청 및 실패 추적

HTTP 요청 추적

실패한 HTTP 요청 추적

에이전트 종료

에이전트 종료

기본 모바일 모니터링 설정 활성화/비활성화

모니터링 기능 활성화/비활성화

테스트 충돌 보고서 실행

충돌 보고 테스트

JavaScript 오류 문제 해결

JavaScript 콘솔 로그

뉴렐릭에서 JavaScript 콘솔 로그를 보려면 one.newrelic.com > Query your data로 이동하여 이 쿼리를 추가하고 해당 JavaScript 콘솔 로그를 식별합니다.

SELECT * FROM consoleEvents SINCE 24 HOURS AGO
Copyright © 2024 New Relic Inc.

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