React Native アプリから Azure Application Insights を利用する

Application Insights JavaScript SDK + React Native Plugin を利用して、Application Insights にメッセージを送信してみました

バージョン

react-native: 0.57.7
microsoft/applicationinsights-web: 2.0.1
microsoft/applicationinsights-react-native: 1.0.2

ドキュメント

Application Insights JavaScript SDK
- React Native Plugin
- API

概要

Application Insights リソースを作成し、 instrumentationKey を取得
1. Azure Portal にサインイン
2. Application Insights リソース を作成
3. 作成すると instrumentationKey を確認できる
ReactNative アプリに Application Insights JavaScript SDK をインストール
- $ yarn add @microsoft/applicationinsights-web
- $ yarn add @microsoft/applicationinsights-react-native
- See: Initializing the Plugin
trackTrace API で Application Insights にメッセージを送信
- サンプルコード参照
Azure Portal -> Application Insights -> Logs(Analytics) に送信したメッセージが表示される

サンプルコード

import { ApplicationInsights, SeverityLevel } from '@microsoft/applicationinsights-web';
import { ReactNativePlugin } from '@microsoft/applicationinsights-react-native';

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
    extensions: [new ReactNativePlugin()]
  }
});

appInsights.loadAppInsights();

appInsights.trackTrace({
  message: 'send message test.',
  severityLevel: SeverityLevel.Warning,
  properties: {'Test': 'test'},
});

作業ログ

`Application Insights リソース`を作成し、 `instrumentationKey` を取得

Application Insights リソースを作成

f:id:dev_dub:20190620001507p:plain f:id:dev_dub:20190620001617p:plain f:id:dev_dub:20190620001629p:plain f:id:dev_dub:20190620001644p:plain f:id:dev_dub:20190620001704p:plain f:id:dev_dub:20190620001717p:plain