Implementasikan pemantauan browser di lingkungan Weex - Application Real-Time Monitoring Service

Topik ini menjelaskan cara mengimplementasikan fitur pemantauan browser dari Application Real-Time Monitoring Service (ARMS) di lingkungan Weex.

Impor paket NPM

Untuk menggunakan fitur pemantauan browser ARMS di lingkungan Weex, jalankan perintah berikut di proyek Anda untuk mengimpor paket Node Package Manager (npm) bernama arms/js-sdk dan gunakan modul WeexLogger khusus untuk melaporkan log:

npm install @arms/js-sdk --save

Inisialisasi SDK

Buat file monitor.js di direktori /utils dan inisialisasi SDK berdasarkan kode contoh berikut.

Catatan

Untuk memanggil metode singleton(props) di titik masuk aplikasi Weex guna mendapatkan instance, konfigurasikan parameter untuk props yang diimpor. Untuk informasi lebih lanjut, lihat bagian berikut:

Metode Umum: @static singleton()
Metode Umum: setPage()
Metode Umum: setConfig()

// Tambahkan konten berikut ke monitor.js:
import WeexLogger from '@arms/js-sdk/weex';

const fetch = weex.requireModule('stream').fetch;
const serialize = (data) = >{
    data = data || {};
    var arr = [];
    for (var k in data) {
        if (Object.prototype.hasOwnProperty.call(data, k) && data[k] ! == undefined) {
            arr.push(k + '=' + encodeURIComponent(data[k]).replace(/\(/g, '%28').replace(/\)/g, '%29'));
        }
    }
    return arr.join('&');
}

// Inisialisasi SDK.
const wxLogger = WeexLogger.singleton({
    pid: 'your-project-id',
    uid: 'zhangsan',
    // Konfigurasikan UID untuk menghasilkan laporan pengunjung unik (UV).
    page: 'Lazada | Home',
    // Konfigurasikan nama halaman awal. SDK mengirimkan laporan tampilan halaman (PV) setelah inisialisasi selesai.
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
    // Tentukan jalur ke mana laporan dikirim. Jika Anda ingin menerapkan SDK di wilayah Singapura, atur jalurnya menjadi 'https://arms-retcode-sg.aliyuncs.com/r.png?'.
    // Kode berikut memberikan contoh tentang cara menggunakan metode GET untuk mengirim laporan:
    sendRequest: (data, imgUrl) = >{
        const url = imgUrl + serialize(data);
        fetch({
            method: 'GET',
            url
        });
    },
    // Kode berikut memberikan contoh tentang cara menggunakan metode POST untuk mengirim laporan:
    postRequest: (data, imgUrl) = >{
        fetch({
            method: 'POST',
            type: 'json',
            url: imgUrl,
            body: JSON.stringify(data)
        });
    }
});

export
default wxLogger;

Laporkan log

Panggil metode yang sesuai untuk melaporkan log berdasarkan instance.

// di beberapa modul bisnis
import wxLogger from '/utils/monitor';
wxLogger.api('/search.do', true, 233, 'SUCCESS');

Metode umum: @static singleton()

@static singleton() adalah metode statis yang digunakan untuk mengembalikan satu instance. props hanya berlaku saat metode dipanggil untuk pertama kalinya. Tabel berikut menjelaskan parameter yang dapat dikonfigurasikan saat memanggil metode ini.

Metode ini dapat digunakan untuk menginisialisasi SDK di titik masuk aplikasi. Untuk informasi lebih lanjut, lihat Inisialisasi SDK.

Tabel 1. Parameter dari WeexLogger.singleton(props)

Parameter	Tipe	Deskripsi	Diperlukan	Nilai default
pid	String	ID situs.	Ya	Tidak ada
page	String	Nama halaman setelah inisialisasi.	Tidak	Tidak ada
uid	String	ID pengguna.	Ya	Tidak ada
imgUrl	String	Jalur ke mana log diunggah. Jalur berakhir dengan tanda tanya (?).	Tidak	Tidak ada

Metode umum: setPage()

setPage() digunakan untuk menetapkan nama halaman saat ini dan melaporkan log PV sekali secara default.

import wxLogger from '/utils/monitor';
// ...
wxLogger.setPage(nextPage);

Tabel 2. Parameter dari wxLogger.setPage(nextPage)

Parameter	Tipe	Deskripsi	Diperlukan	Nilai default
nextPage	String	Nama Halaman	Ya	Tidak ada

Metode umum: setConfig()

setConfig() digunakan untuk memodifikasi konfigurasi setelah SDK diinisialisasi. Metode konfigurasi sama dengan singleton(). Untuk informasi lebih lanjut tentang parameter yang dapat dikonfigurasikan untuk metode ini, lihat setConfig().

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(config);

Tabel 3. Parameter dari wxLogger.setConfig(config)

Parameter	Tipe	Deskripsi	Diperlukan	Nilai default
config	Objek	Item konfigurasi yang ingin Anda ubah.	Ya	Tidak ada
uid	String	ID pengguna yang digunakan untuk mengumpulkan data pengunjung unik (UV).	Ya	Pengaturan penyimpanan

Metode pelaporan log

Untuk informasi lebih lanjut, lihat metode pelaporan log di Metode SDK.

Parameter SDK umum

Fitur pemantauan browser ARMS memungkinkan Anda mengonfigurasi berbagai parameter SDK untuk memenuhi lebih banyak kebutuhan. Tabel berikut menjelaskan parameter yang dapat dikonfigurasikan dalam skenario yang dijelaskan di topik ini.


pid	String	ID unik proyek. Ini dibuat secara otomatis oleh ARMS saat membuat situs.	Ya	Tidak ada
uid	String	ID pengguna. Nilainya adalah pengenal pengguna dan dapat digunakan untuk mencari pengguna. Anda dapat menentukan nilai kustom. Jika Anda tidak menentukan parameter ini, SDK akan dibuat secara otomatis dan diperbarui setiap enam bulan.	Ya	Tidak ada
tag	String	Tag input. Setiap log membawa tag.	Tidak	Tidak ada
release	String	Versi aplikasi. Kami sarankan Anda mengonfigurasi parameter ini untuk melihat informasi laporan dari versi yang berbeda.	Tidak	`undefined`
environment	String	Bidang lingkungan. Nilai valid: prod, gray, pre, daily, dan local. Nilai prod menunjukkan lingkungan online. Nilai gray menunjukkan lingkungan rilis bertahap. Nilai pre menunjukkan lingkungan staging. Nilai daily menunjukkan lingkungan harian. Nilai local menunjukkan lingkungan lokal.	Tidak	`prod`
sample	Integer	Konfigurasi pengambilan sampel log. Nilainya adalah bilangan bulat dari 1 hingga 100. Log performa dan log API sukses diambil sampelnya pada rasio `1/sample`. Untuk informasi lebih lanjut tentang metrik log performa dan log API sukses, lihat Metrik statistik.	Tidak	`1`

Untuk informasi lebih lanjut tentang parameter SDK yang dapat dikonfigurasikan, lihat Referensi SDK.