React Native 에이전트를 사용하면 하이브리드 앱의 성능을 모니터링하고 코드 오류를 식별할 수 있습니다. 뉴렐릭 에이전트는 기본 구성 요소를 사용하는 하이브리드 앱들에 대한 충돌 데이터, 네트워크 트래픽 및 기타 정보를 수집합니다. 그런 다음 에이전트는 사용자가 UI에서 분석할 수 있도록 해당 데이터를 보냅니다.
one.newrelic.com > Mobile > (앱 선택) > Summary : React Native 에이전트는 충돌 데이터, 네트워크 트래픽 및 하이브리드 앱에 대한 기타 정보를 분석할 수 있는 New Relic으로 데이터를 보냅니다.
에이전트는 팀이 플랫폼에 관계없이 하이브리드 앱의 상태를 이해할 수 있도록 합니다. Javascript 오류, 분산 추적, 네트워크 계측 등에 대한 인사이트를 제공하여 팀이 정보에 입각해 개발 선택을 할 수 있도록 지원합니다.
요구 사항
React Native 에이전트를 설치하기 전에 앱이 다음 요구 사항을 충족하는지 확인하십시오.
- Android API 24+
- iOS 10
- iOS 네이티브 요구 사항
- Android 네이티브 요구 사항
네이티브 지원 수준은 React Native 요구 사항을 기반으로 합니다.
설정
아직 계정이 없으시면, 아래에서 무료 뉴렐릭 계정을 생성해 지금 바로 데이터 모니터링을 시작하십시오.
React Native 애플리케이션을 모니터링하려면 다음 5단계를 완료합니다.
1단계: 에이전트 설치
다음을 실행합니다.
$npm i newrelic-react-native-agent
2단계: React Native 설정
이제 index.js
를 열고 다음 코드를 추가하여 뉴렐릭을 시작합니다.
중요
적절한 애플리케이션 토큰을 입력했는지 확인합니다. 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,
// 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: "" };
NewRelic.startAgent(appToken,agentConfiguration);NewRelic.setJSAppVersion(version);AppRegistry.registerComponent(name, () => App);
3단계: Android 설정
React Native 에이전트가 Android와 호환될 수 있도록 Android 전용 에이전트를 설치합니다.
다음 지침을 사용해 뉴렐릭 네이티브 Android 에이전트를 설치합니다.
build.gradle
업데이트:buildscript {...repositories {...mavenCentral()}dependencies {...classpath "com.newrelic.agent.android:agent-gradle-plugin:6.11.1"}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 프레임워크와 호환될 수 있도록 뉴렐릭iOS 에이전트를 설치합니다.
$npx pod-install
5단계: 자동 연결 및 재빌드
React Native 뉴렐릭 라이브러리를 프로젝트에 연결하고 애플리케이션을 다시 빌드해야 합니다. React Native 0.60 이상을 사용하는 경우 추가적인 수동 설치 단계가 필요하지 않은 자동 연결 기능에 자동으로 액세스할 수 있습니다.
Android 애플리케이션
npx react-native run-android
iOS 애플리케이션
cd ios/pod install --repo-updatecd ..npx react-native run-ios
React Native 애플리케이션이 제대로 작동하는지 확인하기 위해 다음 명령을 실행합니다. 치명적인 JS 오류는 뉴렐릭 UI에서 충돌로 표시됩니다.
npx react-native run-ios --configuration Release
npx react-native run-android --variant=release
이 문서가 설치하는데 도움이 되셨나요?
Expo 통합(선택 사항)
Expo와의 통합은 베어 워크플로우에서 자동으로 이루어지지만 구성 플러그인을 통해 커스텀 관리 워크플로우에 몇 가지 추가 단계를 수행해야 합니다.
커스텀 관리 워크플로우를 설정하려면, 패키지를 설치한 후 구성 플러그인을 app.json
또는 app.config.js
의 플러그인 배열에 추가합니다.
{ "name": "my app", "plugins": ["newrelic-react-native-agent"] }
관리 워크플로우의 경우 커스텀 네이티브 코드 추가 가이드에 설명된 대로 expo prebuild --clean
명령어를 사용해 플러그인 변경사항으로 앱을 다시 빌드해야 합니다. 이 명령어가 실행되고 있지 않으면 뉴렐릭 에이전트를 시작할 때 오류가 발생합니다. Expo Go 사용자의 경우 에이전트는 네이티브 코드를 사용해야 합니다. Expo Go는 커스텀 네이티브 코드를 무선으로 전송하는 것을 지원하지 않으므로 Expo Go에서 커스텀 네이티브 코드를 사용하는 방법에 대한 Expo의 문서를 따르십시오.
라우팅 계측(현재 화면 이름 캡처)
뉴렐릭은 현재 라우트 변경 사항을 계측하고 라우트 변경 사항을 브레드크럼으로 기록하는 데 즉시 사용할 수 있는 두 가지 라우팅 계측을 제공합니다.
v5는 다음과 같이 NavigationContainer에서
onStateChange
를NewRelic.onStateChange
로 설정합니다.<NavigationContaineronStateChange={ NewRelic.onStateChange } />'<='v4는 앱 래퍼에서 다음과 같이
onNavigationStateChange
를NewRelic.onNavigationStateChange
로 설정합니다.export default () => (<ApponNavigationStateChange={ 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 호출을 사용합니다. 뉴렐릭 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>);
JavaScript 오류
React Native Agent v1.2.0 이상:
JavaScript 오류 및 Promise 거부는 뉴렐릭의 Handled Exceptions
탭에서 볼 수 있습니다. 기록된 각 JavaScript 오류에 대한 이벤트 추적, 속성 및 스택 트레이스를 확인할 수 있습니다.
다음 쿼리를 실행하여 이러한 오류를 찾을 수도 있습니다.
SELECT * FROM MobileHandledException SINCE 24 hours ago
네이티브 에이전트 v1.1.0 및 그 이전 버전:
React Native 에이전트는 JavaScript 오류에 대한 커스텀 이벤트를 생성하고 이를 뉴렐릭에 보고합니다. UI에서 커스텀 대시보드를 사용해 이러한 JavaScript 오류 이벤트를 추적할 수 있습니다.
커스텀 대시보드를 만들려면:
one.newrelic.com으로 이동한 후.
Query builder를 클릭합니다.
쿼리를 실행합니다.
SELECT * FROM `JS Errors`Add to dashboard를 클릭합니다.
one.newrelic.com > Query builder : 쿼리 빌더 를 사용하여 React 앱에서 JavaScript 오류를 추적하기 위한 사용자 지정 대시보드를 만듭니다.
대시보드를 시작하는 데 도움이 필요한 경우 대시보드 소개를 참조하십시오.