CodePush

Docs > RUM & セッションリプレイ > React Native のモニタリング > CodePush

概要

React Native のクラッシュレポートとエラー追跡を有効にすると、リアルユーザーモニタリングで包括的なクラッシュレポートとエラートレンドを取得できます。

React Native アプリケーションの新しい CodePush バージョンをリリースするたびに、エラーを解除するために Datadog にソースマップをアップロードする必要があります。

Datadog では、アプリ内で @datadog/mobile-react-native-code-push を使用し、ソースマップをアップロードするために datadog-ci react-native codepush コマンドを使うことを推奨しています。これにより、報告されたクラッシュとアップロードされたソースマップの両方で version が一貫していることが確認されます。

Datadog SDK を codepush で設定する際に問題が発生した場合は、弊社のサンプルアプリケーションを参考にすることができます。

セットアップ

React Native モニタリングのインストール手順を参照して、@datadog/mobile-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 のバージョンの取得は、Datadog React Native SDK for RUM の初期化前に実行する必要のある非同期的なステップであるため、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 でない場合) を含む gitignore された datadog-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

代替テクノロジー

これらのステップでは、version が {commercialVersion}-codepush.{codePushLabel} の形式、例えば 1.2.4-codepush.v3 と一致することを確認します。

また、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" になります