Application Real-Time Monitoring Service：Contoh konfigurasi SDK RUM untuk aplikasi web dan HTML5

Parameter SDK

Jika Anda menggunakan Content Delivery Network (CDN) Alibaba Cloud untuk mengakses aplikasi, pastikan bahwa aplikasi berada di namespace global RumSDK.default.

const ArmsRum = window.RumSDK.default;
// Sebelum menggunakan RUM SDK, pastikan bahwa SDK telah dimuat.
// Jika konfigurasi __rum tidak didefinisikan sebelum SDK dimuat, Anda dapat menginisialisasi konfigurasi di sini.
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// Inisialisasi melalui paket NPM atau pemuatan CDN adalah sama.
ArmsRum.setConfig('env', 'pre');

Parameter Pengguna

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  user: {
    name: 'your user.name',
    tags: 'your user.tags',
  },
});

parameter reportConfig

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  reportConfig: {
    flushTime: 0, // Tentukan bahwa data dilaporkan secara langsung.
    maxEventCount: 50, // Tentukan jumlah maksimum entri data yang dilaporkan dalam satu waktu.
  },
});

parameter sessionConfig

Parameter storage menyimpan user.id dan informasi sesi:

• _arms_uid: ID pengguna unik (user.id).

• _arms_session: informasi sesi semantik.

  • sessionId: ID sesi unik.

  • sampled: menentukan apakah pengambilan sampel dipicu.

  • startTime: timestamp awal sesi.

  • lastTime: timestamp ketika sesi terakhir aktif.

`${sessionId}-${sampled}-${startTime}-${lastTime}`

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  sessionConfig: {
    sampleRate: 0.5, // Tingkat pengambilan sampel adalah 50%.
    maxDuration: 86400000,
    overtime: 3600000,
    storage: 'cookie',
  },
});

Parameter Kolektor

SDK menggunakan kolektor, seperti api dan static Resource, untuk mengumpulkan data pemantauan halaman.

Contoh

Dalam contoh berikut, pengumpulan data interaksi pengguna dinonaktifkan.

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  collectors: {
    action: false,
  },
});

parameter EvaluateApi

Fungsi evaluateApi menyediakan penguraian kustom untuk peristiwa XMLHttpRequest dan fetch.

Fungsi ini dapat dipanggil secara asinkron. Promise<IApiBaseAttr> dikembalikan. Tabel berikut menjelaskan IApiBaseAttr.

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  evaluateApi: async (options, response, error) => {
    let respText = '';
    // Periksa hasil permintaan.
    if (response && response.text) {
      respText = await response.text();
    }
    // Field yang dikembalikan akan menimpa konten default. Jika field tidak dikembalikan, konten default digunakan.
    return {
      name: 'my-custom-api',
      success: error ?  0 : 1,
      // Opsional.
      snapshots: JSON.stringify({
        params: 'page=1&size=10', // Parameter input.
        response: respText.substring(0, 2000), // Nilai yang dikembalikan.
        reqHeaders: '', // Header permintaan.
        resHeaders: '', // Header respons.
      }),
      properties: {
        prop_msg: 'custom msg',
        prop_num: 1,
      },
    };
  },
});

parameter filter

Parameter filters mengecualikan peristiwa sumber daya atau pengecualian yang tidak perlu dilaporkan.

MatchOption

type MatchOption = string | RegExp | ((value: string) => boolean);

• string: cocokkan URL apa pun yang dimulai dengan nilai yang ditentukan. Contoh: https://api.aliyun.com. Dalam hal ini, https://api.aliyun.com/v1/resource dapat dicocokkan.

• RegExp: tentukan ekspresi reguler dan URL.

• function: gunakan fungsi untuk menentukan apakah URL cocok. Jika true dikembalikan, URL cocok.

Ketika input adalah MatchOption[], kondisi sebelumnya dievaluasi secara berurutan, dan akan dikecualikan jika salah satu kondisi terpenuhi.

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  filters: {
    // Kecualikan peristiwa pengecualian.
    exception: [
      'Test error', // Pesan kesalahan yang dimulai dengan 'Test error'.
      /^ Script error\.?$/, // Pesan kesalahan yang cocok dengan ekspresi reguler.
      (msg) => {
        return msg.includes('example-error');
      },
    ],
    // Kecualikan peristiwa sumber daya atau API.
    resource: [
      'https://example.com/', // Sumber daya yang dimulai dengan 'https://example.com/'
      /localhost/i,
      (url) => {
        return url.includes('example-resource');
      },
    ],
  },
});

parameter whiteScreen

Parameter whiteScreen hanya didukung oleh browser, seperti Chrome 40 dan IE 9+.

DetectionRule

CustomTesterResult:

type CustomTesterResult = {
  /**
   * Menunjukkan apakah konten ada. `true` menunjukkan bahwa konten ada. Jika tidak, layar putih telah terjadi.
   */
  hasContent: boolean;

  /**
   * Pesan kesalahan
   */
  message?: string;

  /**
   * Data snapshot dari pengecualian
   */
  snapshot?: Record<string, any>;
}

ConfigOptions

Parameter ConfigOptions hanya tersedia untuk metode deteksi terkait.

Contoh

SCREENSHOT

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: 'SCREENSHOT',
      configOptions: {
        colorRange: ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'],
        threshold: 0.9,
        pixels: 10,
        horizontalOffset: 210,
        verticalOffset: 50,
      },
    }],
  },
});

SAMPLE

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: 'SAMPLE',
      configOptions: {
        sampleMethod: 2,
        checkPoints: 10,
        threshold: 0.9,
        whiteBoxElements: ['.el-skeleton'],
      },
    }],
  },
});

CUSTOM

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  whiteScreen: {
    detectionRules: [{
      target: '#root',
      test_when: ['LOAD', 'ERROR', 'ROUTE_CHANGE', 'LEAVE'],
      delay: 5000,
      tester: async (element) => {
        // Fungsi deteksi kustom
        return {
          hasContent: false,
          message: 'Pesan kesalahan kustom',
          snapshot: {
            // Pasangan nilai kunci kustom
            checkPoints: 100,
            rate: 0.99,
            checkdata: '......',
          },
        };
      },
    }],
  },
});

parameter properti

Properti yang disediakan oleh RUM dapat dikonfigurasi untuk semua peristiwa.

Anda dapat menggunakan evaluateApi, sendCustom, sendException, dan sendResource untuk menambahkan properti ke suatu peristiwa. Properti tersebut hanya berlaku untuk peristiwa tersebut.

Properti global dan properti peristiwa digabungkan saat disimpan. Properti peristiwa memiliki prioritas lebih tinggi daripada properti global. Jika kunci yang sama digunakan saat penggabungan, properti peristiwa akan menimpa properti global. Jumlah pasangan kunci-nilai tidak boleh melebihi 20 setelah penggabungan. Jika jumlahnya melebihi 20, pasangan tersebut diurutkan berdasarkan kunci dan yang berlebih akan dihapus.

Contoh

Properti yang dikonfigurasi secara global dilampirkan ke semua peristiwa yang dilaporkan.

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  properties: {
    prop_string: 'xx',
    prop_number: 2,
    // Jika panjang kunci atau nilai melebihi batas, bagian yang berlebih akan dihapus.
    more_than_50_key_limit_012345678901234567890123456789: 'yy',
    more_than_2000_value_limit: new Array(2003).join('1'),
    // Pasangan kunci-nilai berikut yang tidak valid akan dihapus.
    prop_null: null,
    prop_undefined: undefined,
    prop_bool: true,
  },
});

Konfigurasi Dinamis

RUM mendukung pengiriman dinamis konfigurasi koleksi dan pelaporan SDK. Konfigurasi dinamis ini dimuat oleh SDK selama pemuatan awal aplikasi dan akan menimpa konfigurasi statis yang ditetapkan selama inisialisasi SDK. Implementasinya terdiri dari dua bagian: konsol dan SDK.

window.__rum = {
  pid: "your app id",
  endpoint: "your endpoint",
  remoteConfig: {
    // Tentukan wilayah tempat aplikasi web di-hosting, misalnya Singapura adalah ap-southeast-1.
    region: "cn-hangzhou"
  }
};
// Muat SDK melalui CDN
<script async src="https://xxid-sdk.rum.aliyuncs.com/v2/browser-sdk.js"></script>

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  remoteConfig: {
    // Tentukan wilayah tempat aplikasi web di-hosting, misalnya Singapura adalah ap-southeast-1.
    region: "cn-hangzhou"
  }
});

Parameter Lainnya

SDK RUM memungkinkan Anda mengonfigurasi properti umum yang diselesaikan berdasarkan alamat IP dan UserAgent. Bidang yang dikonfigurasi secara proaktif memiliki prioritas lebih tinggi daripada bidang yang diselesaikan secara otomatis.

Untuk informasi lebih lanjut tentang item konfigurasi terkait bidang di atas, lihat bagian Properti Umum dari topik "Data Log".

Contoh

ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
  geo: {
    country: 'info negara kustom Anda',
    city: 'info kota kustom Anda',
  },
});

API SDK

SDK RUM menyediakan API untuk memodifikasi dan melaporkan data kustom serta memodifikasi konfigurasi SDK secara dinamis.

getConfig

Gunakan fungsi ini untuk mendapatkan konfigurasi SDK.

setConfig

Gunakan fungsi ini untuk memodifikasi konfigurasi SDK.

// Tetapkan jenis lingkungan.
ArmsRum.setConfig('env', 'pre');

// Berikut ini mungkin tertimpa.
const config = ArmsRum.getConfig();
ArmsRum.setConfig({
  ...config,
  version: '1.0.0',
  env: 'pre',
});

sendCustom

Untuk melaporkan peristiwa kustom, Anda harus menentukan field type dan name. Tabel berikut menjelaskan parameter terkait pelaporan data. Anda perlu mendefinisikan semantik bisnis.

ArmsRUM.sendCustom({
  // Diperlukan.
  type: 'CustomEvnetType1',
  name: 'customEventName2',
  // Opsional.
  group: 'customEventGroup3',
  value: 111.11,
  properties: {
    prop_msg: 'pesan kustom',
    prop_num: 1,
  },
});

sendException

Untuk melaporkan data pengecualian kustom, Anda harus menentukan field name dan message.

ArmsRum.sendException({
  // Diperlukan.
  name: 'customErrorName',
  message: 'pesan kesalahan kustom',
  // Opsional.
  file: 'nama file pengecualian kustom',
  stack: 'error.stack pengecualian kustom',
  line: 1,
  column: 2,
  properties: {
    prop_msg: 'pesan kustom',
    prop_num: 1,
  },
});

sendResource

Untuk melaporkan data resource kustom, Anda harus menentukan nama, tipe, dan durasi.

ArmsRum.sendResource({
  // Diperlukan.
  name: 'getListByPage',
  message: 'success',
  duration: 800,
  // Opsional.
  url: 'https://www.aliyun.com/data/getListByPage',
  properties: {
    prop_msg: 'pesan kustom',
    prop_num: 1,
  },
});