뉴렐릭의 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에 있는 안내 설치를 따릅니다.
에이전트를 수동으로 설치해야 하는 경우 다음 단계를 따르십시오.
애플리케이션 구성
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용 토큰 두 개를 추가해야 합니다.
(Android 네이티브 앱만 해당) Android 에이전트 설치
build.gradle
업데이트:...repositories {...mavenCentral()}dependencies {...classpath "com.newrelic.agent.android:agent-gradle-plugin:7.1.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" />
(iOS 네이티브 앱만 해당) iOS 에이전트 설치
React Native 에이전트가 모든 iOS 프레임워크와 호환될 수 있도록 뉴렐릭iOS 에이전트를 설치합니다.
$npx pod-install
자동 연결 및 재구축 구성
React Native 뉴렐릭 라이브러리를 프로젝트에 연결하고 애플리케이션을 다시 빌드해야 합니다. 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 오류는 뉴렐릭 UI에서 충돌로 표시됩니다.
안드로이드의 경우:
$npx react-native run-android --variant=release
iOS의 경우:
$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의 문서를 따르시기 바랍니다.
에이전트 계측 맞춤화
에이전트 계측을 맞춤화할 필요가 있으십니까? 공개된 모바일 SDK API 방법들을 사용하면 커스텀 데이터를 수집하고 기본 설정을 구성하는 등의 작업을 수행할 수 있습니다.
React Native 에이전트에서는 다음을 맞춤화할 수 있습니다.
원하는 경우... | 사용되는 방법 |
---|---|
충돌 문제 해결에 도움이 될 수 있는 앱 활동을 추적하기 위해 이동 경로 기록 | |
메서드를 상호 작용으로 추적 | |
커스텀 메트릭 기록 | |
커스텀 오류 기록 | |
커스텀 속성 및 이벤트 기록 | 커스텀 속성 및 이벤트를 보고하는 방법에는 여러 가지가 있습니다.
|
커스텀 네트워크 요청 및 실패 추적 | |
에이전트 종료 | |
기본 모바일 모니터링 설정 활성화/비활성화 | |
테스트 충돌 보고서 실행 |
JavaScript 오류 문제 해결
JavaScript 콘솔 로그
뉴렐릭에서 JavaScript 콘솔 로그를 보려면 one.newrelic.com > Query your data로 이동하여 이 쿼리를 추가하고 해당 JavaScript 콘솔 로그를 식별합니다.
SELECT * FROM consoleEvents SINCE 24 HOURS AGO