React Native 에이전트를 사용하면 팀에서 하이브리드 앱의 성능을 모니터링하고 코드 오류를 식별할 수 있습니다. 에이전트는 기본 구성 요소를 사용하여 하이브리드 앱에 대한 충돌 데이터, 네트워크 트래픽 및 기타 정보를 수집합니다. 그런 다음 에이전트는 UI에서 분석할 수 있도록 해당 데이터를 보냅니다.
one.newrelic.com > Mobile > (앱 선택) > Summary : React Native 에이전트는 충돌 데이터, 네트워크 트래픽 및 하이브리드 앱에 대한 기타 정보를 분석할 수 있는 New Relic으로 데이터를 보냅니다.
에이전트를 통해 팀은 플랫폼에 관계없이 하이브리드 앱의 상태를 이해할 수 있습니다.Javascript 오류, 분산 추적, 네트워크 계측 등에 대한 통찰력을 제공하여 팀이 보다 정보에 입각한 개발 선택을 할 수 있도록 합니다.
요구 사항
React Native 에이전트를 설치하기 전에 앱이 다음 요구 사항을 충족하는지 확인하세요.
- 안드로이드 API 24+
- iOS 10
- iOS 기본 요구 사항
- Android 기본 요구 사항
기본 지원 수준은 React Native 요구 사항 을 기반으로 합니다.
설정
React Native 애플리케이션을 모니터링하려면 다음 5단계를 완료하세요.
1단계: 에이전트 설치
다음을 실행합니다.
$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 전용 에이전트를 설치하세요.
이 지침 을 사용하여 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 에이전트를 설치하세요.
$npx pod-install
5단계: 자동 연결 및 재구축
React Native New Relic 라이브러리는 프로젝트에 연결되어야 하고 애플리케이션을 다시 빌드해야 합니다.React Native 0.60+를 사용하는 경우 자동 연결에 자동으로 액세스할 수 있으므로 추가 수동 설치 단계가 필요하지 않습니다.
안드로이드 애플리케이션
npx react-native run-android
iOS 애플리케이션
cd ios/pod install --repo-updatecd ..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 에이전트를 시작할 때 오류가 발생합니다.
라우팅 계측(현재 화면 이름 캡처)
현재 라우트 변경 사항을 계측하고 경로 변경 사항을 Breadcrumb로 기록하기 위해 기본적으로 2개의 라우팅 계측을 제공합니다.
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 호출을 사용합니다.New Relic 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>);
자바스크립트 오류
React Native 에이전트는 JavaScript 오류에 대한 사용자 지정 이벤트를 생성하고 이를 New Relic에 보고합니다. UI에서 사용자 정의 대시보드를 사용하여 이러한 JavaScript 오류 이벤트를 추적할 수 있습니다.
사용자 정의 대시보드를 생성하려면:
one.newrelic.com 으로 이동합니다.
쿼리 빌더 를 클릭합니다.
다음 쿼리를 실행합니다.
SELECT * FROM `JS Errors`대시보드에 추가 을 클릭합니다.
one.newrelic.com > Query builder : 쿼리 빌더 를 사용하여 React 앱에서 JavaScript 오류를 추적하기 위한 사용자 지정 대시보드를 만듭니다.
대시보드를 시작하는 데 도움이 필요한 경우 대시 보드 소개 를 참조하세요.