Simple Log Service:ミニプログラムからユーザーエクスペリエンスデータを収集する

前提条件

Full-stack Observabilityインスタンスが作成され、インスタンスのバージョンは1.1.0以降です。 詳細は、インスタンスの作成をご参照ください。

インストールと初期化

このトピックでは、WeChat miniプログラムのデータを収集します。

1. Simple Log Serviceコンソール.

2. ログアプリケーション セクションで、インテリジェント O&M タブをクリックします。 次に、フルスタックオブザーバビリティ をクリックします。

3. インスタンスリストで、インスタンスをクリックします。

   重要

   インスタンスのバージョンは1.1.0以降である必要があります。

4. 左側のナビゲーションウィンドウで、[ユーザーエクスペリエンスモニタリング] > [データインポート] を選択します。

5. [データのインポート] ダイアログボックスで、次の操作を実行します。

   1. [WeChat Mini Program] をクリックします。 そして、[次へ] をクリックします。

   2. 基本パラメータを設定します。

      パラメーター	説明
      環境	環境情報を指定すると、ミニプログラムからインスタンスに収集されたユーザーエクスペリエンスデータに環境情報が追加されます。 開発、テスト、または統合環境を指定できます。 これにより、さまざまな環境のミニプログラムから収集されたユーザーエクスペリエンスデータを区別できます。
      サービス名	サービス名を指定すると、ミニプログラムからインスタンスに収集されたユーザーエクスペリエンスデータにサービス情報が追加されます。 Webサイト、ワークロード、または部門を指定できます。 これにより、さまざまなサービスのミニプログラムから収集されたユーザーエクスペリエンスデータを区別することができます。
      リクエストデータをレポート	リクエストデータをレポート をオンにすると、Simple Log Service SDKは、fetchやxhrなどのAPIリクエストデータをアップロードします。
      Tracing Analysis	Tracing Analysisをオンにすると、Simple Log Service SDKはフロントエンドとバックエンドのトレースデータをアップロードします。

      設定が完了すると、Simple Log Serviceがインストールおよび初期化スクリプトを生成します。

7. 上記のスクリプトをコピーして、Simple Log Service SDKをインストールおよび初期化します。

   Simple Log Service SDKは、npmを使用してのみインストールできます。

   1. npmパッケージをインストールします。

      npm install @aliyun-sls/web-trace-mini

   2. SDK を初期化します。

      他の設定項目をSLS_TRACERに追加できます。 詳細については、「付録1: SLS_TRACER設定項目」をご参照ください。

      import { SLS_TRACER } from '@aliyun-sls/web-trace-mini';
      
      SLS_TRACER.init({
        host: 'cn-beijing.log.aliyuncs.com',// The endpoint of the project that you specified when you created the instance. 
        project: 'demo-test',// The project that you specified when you created the instance. 
        logstore: 'demo-test-raw', // The name of the Logstore. After the instance is created, Simple Log Service automatically creates a Logstore named {instance}-raw. 
        workspace: 'demo-test',// The name of the workspace. Enter the instance ID. 
        env:  'prod',// The custom environment. 
        service:  'miniprogram',// The name of the service. 
        enableRequest:  true,// Upload API request data. 
        enableTrace:  true // Enable trace monitoring. 
      })

8. Simple Log Service SDKをインストールして初期化したら、テストミニプログラムにアクセスしてテストデータを生成します。

9. Simple Log ServiceコンソールでフルスタックのObservabilityアプリケーションに戻ります。

10. [データのインポート] ダイアログボックスで、次へ をクリックします。

11. では、データを確認中のステップデータのインポートダイアログボックスで、データを確認中.

12. データが有効であることを確認したら、完成 をクリックします。

カスタムイベントのアップロード

SLS_TRACER SDKは、特定のイベントの自動モニタリングをサポートし、ログをアップロードできます。

SLS_TRACER.addLog() インターフェイスは、カスタムイベントのアップロードに使用されます。 このインターフェイスはネストされたJSONデータをサポートし、JSON形式でパラメーターを指定できます。 クエリステートメントを使用して、Simple Log Serviceでアップロードされたデータをクエリおよび分析できます。 次のサンプルコードは、SLS_TRACER.addLog() インターフェイスを呼び出す方法の例を示しています。

  SLS_TRACER.addLog({
    key: 'value',
    number: 1,
    array: [],
    json: {
      json: 'json'
    }
  })

パラメータのローリング更新を実行する

シナリオによっては、uidなどの一部のユーザーパラメーターをすぐに取得できない場合があります。 SLS_TRACER SDKでは、SLS_TRACER SDKの初期化後にパラメータを動的に設定できます。 ローリング更新は、uid、nickname、env、service、version、およびcustomパラメーターで実行できます。 次のサンプルコードは、インターフェイスを呼び出す方法の例を示しています。

SLS_TRACER.setOptions({
  uid: 'uid',
  nickname: 'newnickname',
  env: 'newEnv',
  custom: {
    c: 'newCustom',
  },
  version: 'newVersion',
  service: 'newService',
})

カスタムプラグインの設定

SLS_TRACER SDKでは、データのアップロード中にデータを変更できます。

// You must call the following interface before you initialize the SDK. 
SLS_TRACER.use({
  name: 'myPlugin',
  run: function () {
    this.subscribe(
      '*', // Subscribe to all data sources. If you want to subscribe to custom events, set the value to an asterisk (*). 
      (data, next) => {
        //
        //
        // Determine the data type based on data.otBase.t. 
        //
        //
        
        next(data) // When new data is passed to the next processor, the next(data) method must be called. Otherwise, the system stops uploading the data. 
      },
      0, // Specify the priority of custom plug-ins. The priority range is 0 to 99. 
    )
  },
})

// The data type of the data. 
export interface NotifyData<OT extends Partial<OTTrace>, Extra = Record<string, any> | undefined> {
  otBase: OT
  extra: Extra
}

付録1: SLS_TRACER設定項目

付録2: ログフィールドの詳細

ミニプログラムのユーザ体験データ内のログフィールドは、ウェブページのユーザ体験データ内のログフィールドと同様である。 詳細については、「付録2: ログフィールドの詳細」をご参照ください。