Application Real-Time Monitoring Service:Pantau jenis program mini lainnya

Penggunaan dasar

Pengaturan dasar mencakup tiga langkah: menginstal dan menginisialisasi paket npm, melaporkan log, serta mengonfigurasi nama domain keamanan.

1. Instal dan inisialisasi paket npm.

   1. Di proyek program mini Anda, instal paket npm @arms/js-sdk untuk mengaktifkan pemantauan.

      npm install @arms/js-sdk

   2. Tambahkan kode berikut ke file monitor.js di direktori /utils untuk menginisialisasi SDK.

      Catatan

      Anda dapat menyesuaikan nama dan lokasi file JavaScript (JS).

      import MiniProgramLogger from '@arms/js-sdk/miniapp';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // Tetapkan ID pengguna, yang digunakan untuk statistik UV.
          region: 'cn', // Tentukan Wilayah tempat aplikasi dideploy. Atur parameter ini ke 'cn' untuk Tiongkok daratan atau 'sg' untuk luar Tiongkok daratan. Nilai default-nya adalah 'cn'.
          // Untuk pemantauan program mini dasar, Anda harus menyediakan fungsi RPC secara manual. 
          // Implementasikan fungsi tersebut berdasarkan logika bisnis Anda. Contoh berikut menunjukkan cara melakukan panggilan di DingTalk E-App.
          sendRequest: (url, resData) => {
                // Bagian ini wajib dikonfigurasi. Mendukung pelaporan GET maupun POST.
              // Demo di DingTalk
              var method = 'GET';
              var data;
              if (resData) {
                  method = 'POST';
                  data = JSON.stringify(resData);
              }
              dd.httpRequest({
                  url: url,
                  method: method,
                  data: data,
                  fail: function (error) {
                      //...
                  }
              });
          },
           // Sediakan fungsi secara manual untuk mendapatkan path halaman saat ini. 
           // Implementasikan fungsi tersebut berdasarkan logika bisnis Anda. Contoh berikut menunjukkan cara melakukan panggilan di DingTalk E-App.
           getCurrentPage: () => {
                // Bagian ini wajib dikonfigurasi.
              if (typeof getCurrentPages !== 'undefined' && typeof getCurrentPages === 'function') {
                  var pages = (getCurrentPages() || []);
                  var pageLength = pages.length;
                  var currPage = pages[pageLength - 1];
                  return (currPage && currPage.route) || null;
              }
           }
      });
      
      export default Monitor;

      Catatan

      Untuk informasi lebih lanjut tentang parameter, lihat Parameter SDK.

2. Laporkan log.

   1. Di app.js, gunakan salah satu metode berikut untuk melaporkan log:

      • Gunakan metode Monitor.hookApp(options) untuk secara otomatis menangkap log Error. Parameter options adalah objek konfigurasi asli App Anda.

        import Monitor from '/utils/monitor';
        
            App(Monitor.hookApp({
              onError(err) {
                console.log('Entering onError:', err);
              },
              onLaunch() {
                console.log('Entering onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            }));                

      • Gunakan metode Monitor.error(err) untuk melaporkan log Error secara manual.

        import Monitor from '/utils/monitor';
        
            App({
              onError(err) {
                  Monitor.error(err);
                console.log('Entering onError:', err);
              },
              onLaunch() {
                console.log('Entering onLaunch');
              },
        
              onShow(options) {
              },
              onHide() {
              }
            });

   2. Di file JS suatu halaman, gunakan salah satu metode berikut untuk melaporkan log:

      • Gunakan metode Monitor.hookPage(options) untuk secara otomatis melaporkan data page view (PV) dan kesehatan.

        Catatan

        Metode ini tidak secara otomatis melaporkan permintaan API.

        import Monitor from '/utils/monitor';
        
            Page(Monitor.hookPage({
               data: {},
                onLoad(query) {
                },
                onReady() {
                    // Halaman telah selesai dimuat.
                },
                onShow() {
        
                },
                onLoad(query) {
        
                },
                onHide() {
        
                },
                onUnload() {
        
                },
                onTitleClick() {
                    /**
                     * Laporkan data instrumentasi kustom.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            }));

      • Panggil metode API untuk melaporkan data secara manual.

        Catatan

        Untuk informasi lebih lanjut tentang metode API, lihat Metode API.

        import Monitor from './util/monitor';
        
            Page({
               data: {},
                onShow() {
                    Monitor.pageShow();
                },
                onHide() {
                    Monitor.pageHide();
                },
                onUnload() {
                    Monitor.pageHide();
                },
                onTitleClick() {
                    /**
                     * Laporkan data instrumentasi kustom.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            });

3. Konfigurasi nama domain keamanan.

   • Jika Anda mengatur region ke cn, tambahkan https://arms-retcode.aliyuncs.com ke daftar nama domain yang valid.

   • Jika Anda mengatur region ke sg, tambahkan https://arms-retcode-sg.aliyuncs.com ke daftar nama domain yang valid.

Metode API

Sebagian besar API pelaporan log konsisten dengan SDK pemantauan browser web. Penggunaan API lainnya dijelaskan di bawah ini:

• Untuk mengirim data PV halaman saat ini, panggil metode pageShow() dalam metode siklus hidup onShow Page.

  Catatan

  Jangan gunakan metode ini bersamaan dengan metode hookPage(). Jika tidak, log PV duplikat akan dilaporkan.

  import Monitor from '/util/monitor';
  Page({
      onShow: function() {
          Monitor.pageShow();
      }
  })

• Untuk mengirim data kesehatan halaman saat ini dan mengukur tingkat kesehatan serta waktu di halaman, panggil metode pageHide() dalam metode siklus hidup onHide dan onUnload Page.

  Catatan

  Jangan gunakan metode ini bersamaan dengan metode hookPage(). Jika tidak, log duplikat akan dilaporkan.

  import Monitor from '/util/monitor';
    Page({
  
        onHide: function() {
            Monitor.pageHide();
        },
        onUnload: function() {
            Monitor.pageHide();
        }
        ... 
    })

Skenario lanjutan

Jika penggunaan dasar tidak memenuhi kebutuhan Anda, pertimbangkan skenario lanjutan dalam bagian ini.

• Menetapkan uid (untuk statistik UV)

  • Jika ID pengguna tersedia sebelum SDK diinisialisasi, Anda dapat langsung menetapkan uid dalam konfigurasi init.

  • Jika ID pengguna belum tersedia saat inisialisasi, Anda dapat mengambilnya sebelum event onShow aplikasi, lalu menetapkan uid dengan memanggil setCommonInfo({uid: 'xxx'}).

• Menetapkan informasi umum untuk program mini

  Gunakan metode setCommonInfo untuk menetapkan informasi umum program mini. Pemantauan Browser ARMS menganalisis bidang-bidang berikut:

  • sr: resolusi layar

  • vp: viewport

  • dpr: device pixel ratio

  • ul: bahasa dokumen

  • dr: document referrer

  • ct: jenis koneksi jaringan (misalnya, Wi-Fi atau 3G)

    Peringatan

    Jangan menetapkan terlalu banyak bidang menggunakan metode setCommonInfo. Melebihi batas panjang permintaan dapat menyebabkan permintaan gagal.

Parameter SDK

Pemantauan Browser ARMS menyediakan parameter SDK untuk Konfigurasi Lanjutan. Tabel berikut menjelaskan parameter umum yang berlaku untuk skenario ini.

Untuk daftar lengkap parameter SDK, lihat Konfigurasi SDK Pemantauan Browser.