빠른 시작¶
이 문서는 React Native RUM SDK의 최단接入 경로를 제공하여, 최소한의 단계로 한 번의 검증 가능한 데이터 업로드를 완료할 수 있도록 돕습니다.
사전 준비¶
시작하기 전에 다음 준비를 완료하세요.
- RUM에서 React Native Android와 React Native iOS 애플리케이션을 각각 생성하고, 해당하는
App ID를 획득합니다. - 업로드 주소와 인증 방식을 확인합니다.
- 로컬 환경 배포:
datakitUrl준비 -
공용 네트워크 DataWay:
datawayUrl과clientToken준비 -
프로젝트에
@cloudcare/react-native-mobile설치 -
Android 네이티브 시작, 네트워크 요청 또는 WebView 데이터를 수집해야 하는 경우 Android
ft-plugin도 함께 구성하세요.
接入 단계¶
- React Native SDK 설치
- 애플리케이션 시작 시
FTMobileConfig초기화 FTRUMConfig초기화 및 Android와 iOS의App ID전달- 선택 사항:
FTLogConfig와FTTraceConfig초기화 - 디버그 로그 활성화, 애플리케이션 실행 및 페이지 열기, 클릭 또는 네트워크 요청 한 번 트리거
- 콘솔과 Guance 플랫폼에서 데이터가 성공적으로 업로드되었는지 확인
SDK 설치¶
설치 방법은 애플리케이션 接入을 직접 참조하세요.
최소 초기화 예제¶
import {
FTMobileReactNative,
FTReactNativeRUM,
FTMobileConfig,
FTRUMConfig,
ErrorMonitorType,
DeviceMetricsMonitorType,
DetectFrequency,
} from '@cloudcare/react-native-mobile';
async function sdkInit() {
// 로컬 환경 배포 시 { datakitUrl: 'http://10.0.0.1:9529' } 사용
const config: FTMobileConfig = {
datawayUrl: 'https://open.dataway.url',
clientToken: 'client_token',
debug: true,
};
await FTMobileReactNative.sdkConfig(config);
const rumConfig: FTRUMConfig = {
androidAppId: 'android_app_id',
iOSAppId: 'ios_app_id',
enableAutoTrackUserAction: true,
enableAutoTrackError: true,
enableNativeUserResource: true,
};
await FTReactNativeRUM.setConfig(rumConfig);
}
최상위
index.js에서 App을 등록하기 전에 SDK 초기화를 완료하여, SDK의 다른 메서드를 호출하기 전에 초기화가 완료되었는지 확인하세요.
import App from './App';
async function initSDK() {
await sdkInit();
}
initSDK();
AppRegistry.registerComponent('main', () => App);
선택 사항: Log 및 Trace 초기화¶
import {
FTReactNativeLog,
FTReactNativeTrace,
FTLogConfig,
FTTraceConfig,
} from '@cloudcare/react-native-mobile';
async function setupExtraModules() {
const logConfig: FTLogConfig = {
enableCustomLog: true,
enableLinkRumData: true,
};
await FTReactNativeLog.logConfig(logConfig);
const traceConfig: FTTraceConfig = {
enableNativeAutoTrace: true,
};
await FTReactNativeTrace.setConfig(traceConfig);
}
接入 성공 여부 확인¶
debug: true를 유지한 상태로 애플리케이션 실행- 페이지를 열고, 버튼을 클릭하거나, 네트워크 요청 한 번 실행
- 디버그 로그를 확인하여 SDK 초기화 및 데이터 동기화가 정상적으로 실행되었는지 확인
- Guance 콘솔로 돌아가서 애플리케이션에 해당 RUM 데이터가 나타나는지 확인
추가 문제 해결이 필요한 경우 문제 해결을 확인하세요.
다음 단계¶
- 전체 설치 및 接入 설명은 애플리케이션 接入를 계속 읽어보세요.
- 모든 초기화 매개변수 설명은 SDK 초기화를 읽어보세요.
- RUM, Log, Trace의 상세 구성은 RUM 구성, Log 구성, Trace 구성을 읽어보세요.
- WebView 모니터링을 接入해야 하는 경우 WebView 데이터 모니터링을 읽어보세요.
- Session Replay를 接入해야 하는 경우 Session Replay를 읽어보세요.
- 프로젝트가 네이티브와 React Native가 혼합된 개발인 경우 네이티브 및 React Native 혼합 개발을 읽어보세요.