RUM CodePush 설정

문서 > RUM & 세션 재생 > 모바일 및 TV 모니터링 > 모바일 및 TV 모니터링 설정 > RUM CodePush 설정

개요

React Native 크래시 보고서 및 오류 추적을 사용하면 실제 사용자 모니터링에서 포괄적인 크래시 보고서 및 오류 동향을 얻을 수 있습니다.

React Native 애플리케이션의 새 CodePush 버전을 릴리스할 때마다 소스 맵을 Datadog에 업로드하여 오류를 최소화해야 합니다.

Datadog은 앱에서 @datadog/mobile-react-native-code-push와 datadog-ci react-native codepush 명령을 사용하여 소스 맵을 업로드할 것을 권장합니다. 이렇게 하면 보고된 크래시와 업로드된 소스 맵 모두에서 일관된version을 가질 수 있습니다.

codepush로 Datadog SDK를 설정하는 데 문제가 발생하는 경우 예제 애플리케이션을 참조하세요.

설정

@datadog/mobile-react-native를 설치하려면 React Native 모니터링 설치 단계를 참조하세요.

그런 다음 @datadog/mobile-react-native-code-push를 설치하세요.

NPM으로 설치하려면 다음을 실행하세요:

npm install @datadog/mobile-react-native-code-push

Yarn으로 설치하려면 다음을 실행합니다:

yarn add @datadog/mobile-react-native-code-push

DdSdkReactNative.initialize로 초기화하기

코드에서 DdSdkReactNative.initialize를 DatadogCodepush.initialize로 교체하세요.

import { DdSdkReactNativeConfiguration } from '@datadog/mobile-react-native';
import { DatadogCodepush } from '@datadog/mobile-react-native-code-push';

const config = new DdSdkReactNativeConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    '<RUM_APPLICATION_ID>',
    true, // 사용자 상호 작용(예: 버튼을 누름)을 추적합니다. 'accessibilityLabel' 요소 속성을 사용하여 탭 액션에 이름을 지정합니다. 그렇지 않으면 요소 유형이 보고됩니다.
    true, // XHR 리소스 추적
    true // 오류 추적
);

await DatadogCodepush.initialize(config);

DatadogProvider로 초기화하기

App 구성 요소에서 DatadogProvider를 DatadogCodepushProvider로 교체합니다.

import { DatadogCodepushProvider } from '@datadog/mobile-react-native-code-push';

export default function App() {
    return (
        <DatadogCodepushProvider configuration={datadogConfiguration}>
            <Navigation />
        </DatadogCodepushProvider>
    );
}

CodePush 버전을 사용하는 것은 RUM용 Datadog React Native SDK를 초기화하기 전에 수행해야 하는 비동기적인 단계이기 때문에 DatadogCodepushProvider 사용 시 InitializationMode.SYNC와 InitializationMode.ASYNC간의 차이가 없습니다.

CodePush 소스 맵 업로드

@datadog/datadog-ci를 프로젝트의 개발 종속성으로 설치합니다.

NPM으로 설치하려면:

npm install @datadog/datadog-ci --save-dev

Yarn으로 설치하려면:

yarn add -D @datadog/datadog-ci

프로젝트의 루트에서 API 키와 Datadog 사이트(datadoghq.com이 아닐 경우)가 포함된 gitignoreddatadog-ci.json 파일을 만듭니다.

{
    "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "site": "datadoghq.eu"
}

DATADOG_API_KEY및 DATADOG_SITE 환경 변수로 내보낼 수도 있습니다.

새 CodePush 번들을 릴리스할 때 소스 맵과 번들을 출력할 디렉토리를 지정합니다:

appcenter codepush release-react -a MyOrganization/MyApplication -d MyDeployment --sourcemap-output --output-dir ./build

적절한 CodePush app및 deployment인수를 전달하여 datadog-ci react-native codepush 명령을 실행합니다.

NPM으로 실행하려면:

npm run datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment

Yarn으로 실행하려면:

yarn datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment

대안

이 단계를 수행하면 1.2.4-codepush.v3과 같이 version과 {commercialVersion}-codepush.{codePushLabel}형식이 일치합니다.

SDK 설정에서 versionSuffix를 지정하여 이를 수행할 수도 있습니다:

const config = new DdSdkReactNativeConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    '<RUM_APPLICATION_ID>',
    true, // 사용자 상호 작용 추적(예: 버튼을 누름. accessibilityLabel' 요소 속성을 사용하여 탭 액션에 이름을 지정할 수 있습니다. 그렇지 않으면 요소 유형이 보고됩니다.)
    true, // XHR 리소스 추적
    true // 오류 추적
);

config.versionSuffix = `codepush.${codepushVersion}`; // "1.0.0-codepush.v2"가 됩니다.