開始監控其他類別小程式 - Application Real-Time Monitoring Service

本文介紹如何使用ARMS前端監控開始監控其他類別的小程式，即除DingTalk小程式、支付寶小程式和微信小程式之外的各類符合標準規範的小程式，以及相關的通用配置、API方法和進階情境。

基礎使用方法

基礎方法包含引入npm包並初始化、上報和設定安全網域名稱這三個步驟：

引入npm包並初始化：

在小程式的專案中引入alife-logger npm包，以便使用該模組來上報日誌。
```
npm install alife-logger
```

將以下內容添加至/utils目錄下的monitor.js檔案中以完成初始化。

說明

您可以自訂JS檔案的名稱和存放位置。

import MiniProgramLogger from 'alife-logger/miniprogram';
const Monitor = MiniProgramLogger.init({
    pid: 'xxx',
    uid: 'userxxx', // 設定使用者uid，用於統計UV資訊。
    region: 'cn', // 指定應用部署的地區：中國設為cn，中國以外地區設為sg。預設值為cn。
    // 基礎小程式監控需要手動傳入RPC。請按照實際業務寫實現方法，以下樣本為DingTalkE應用中的調用方式。
    sendRequest: (url, resData) => {
          // 此部分由業務方配置，支援Get/Post上報。
        // demo in dingding
        var method = 'GET';
        var data;
        if (resData) {
            method = 'POST';
            data = JSON.stringify(resData);
        }
        dd.httpRequest({
            url: url,
            method: method,
            data: data,
            fail: function (error) {
                //...
            }
        });
    },
     // 手動傳入擷取當前頁面路徑的方法。請按照實際業務寫實現方法，以下樣本為DingTalkE應用中的調用方式。
     getCurrentPage: () => {
          // 此部分由業務方配置。
        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;

說明

關於參數的詳細配置，請參見通用SDK配置項。

上報日誌：

在app.js中，使用以下兩種方法之一上報日誌：

使用Monitor.hookApp(options)方法靜默捕獲Error類日誌。其中的options即為App層相應的Object配置。

import Monitor from '/utils/monitor';

    App(Monitor.hookApp({
      onError(err) {
        console.log('進入onError:', err);
      },
      onLaunch() {
        console.log('進入onLaunch');
      },

      onShow(options) {
      },
      onHide() {
      }
    }));

使用Monitor.error(err) 方法手動上報Error類日誌。

import Monitor from '/utils/monitor';

    App({
      onError(err) {
          Monitor.error(err);
        console.log('進入onError:', err);
      },
      onLaunch() {
        console.log('進入onLaunch');
      },

      onShow(options) {
      },
      onHide() {
      }
    });

在page的JS檔案中，使用以下兩種方法之一上報日誌：

使用Monitor.hookPage(options)方法靜默上報PV、Health資料。

說明

此方法不支援靜默上報API請求。

import Monitor from '/utils/monitor';

    Page(Monitor.hookPage({
       data: {},
        onLoad(query) {
        },
        onReady() {
            // 頁面載入完成。
        },
        onShow() {

        },
        onLoad(query) {

        },
        onHide() {

        },
        onUnload() {

        },
        onTitleClick() {
            /**
             * 統計打點資料，自訂打點。
             * @desc
             */
            Monitor.sum('titleClick');
        }       
    }));

調用API方法主動打點。

說明

關於API方法的詳細資料，請參見API方法。

import Monitor from './util/monitor';

    Page({
       data: {},
        onShow() {
            Monitor.pageShow();
        },
        onHide() {
            Monitor.pageHide();
        },
        onUnload() {
            Monitor.pageHide();
        },
        onTitleClick() {
            /**
             * 統計打點資料，自訂打點。
             * @desc
             */
            Monitor.sum('titleClick');
        }       
    });

設定安全網域名稱：
- 如果region設為cn，則將https://arms-retcode.aliyuncs.com添加到合法網域名稱。
- 如果region設為sg，則將https://arms-retcode-sg.aliyuncs.com添加到合法網域名稱。

API方法

方法	參數	備忘
hookApp	{}	請傳入原有的App參數。可用於在App的生命週期中自動打點。
hookPage	{}	請傳入原有的Page參數。可用於在Page的生命週期中自動打點。
setCommonInfo	{[key: string]: string;}	設定日誌基礎欄位，可用於灰階發布等情境。
setConfig	{[key: string]: string;}	設定config欄位，具體操作，請參見SDK配置項參數。
pageShow	{}	Page Show打點，發送PV資料。
pageHide	{}	Page Hide打點，發送Health資料。
error	String/Object	錯誤記錄檔打點。
api	請參見前端介面說明	API類日誌上報。
sum/avg	String	自訂求和、求均值日誌上報。

說明

小程式監控專案如需使用hookApp、hookPage嵌入生命週期打點，必須符合標準小程式關於App和Page的規範，即App層有onError，Page層有onShow、onHide、onUnload。使用方法樣本，請參見基礎使用方法。

大部分日誌上報API與Web端監控SDK一致，其他API的使用方法如下：

如需發送當前頁面的PV資料，則在Page的onShow方法下調用pageShow() 方法。
說明
請勿與hookPage()方法同時使用此方法，否則會造成PV類日誌重複上報。
```
import Monitor from '/util/monitor';
Page({
    onShow: function() {
        Monitor.pageShow();
    }
})
```
如需發送當前頁面的Health類資料，統計當前頁面的健康度和頁面停留時間，則在Page的onHide和onUnload方法下調用pageHide()方法。
說明
請勿與hookPage()方法同時使用此方法，否則會造成日誌重複上報。
```
import Monitor from '/util/monitor';
  Page({

      onHide: function() {
          Monitor.pageHide();
      },
      onUnload: function() {
          Monitor.pageHide();
      }
      ... 
  })
```

進階情境

當基礎使用方法無法滿足需求時，請參見以下進階情境：

設定uid（主要用於統計UV資訊）
- 如果在監控SDK初始化之前，能夠獲得與使用者有關的資訊，則可以直接設定uid。
- 如果在監控SDK初始化之前，無法獲得與使用者有關的資訊，則可以在應用onShow前擷取使用者資訊，然後通過setCommonInfo({uid: 'xxx'})；設定uid。
設定小程式相關的公用資訊
請使用setCommonInfo方法設定小程式相關的公用資訊。ARMS前端監控會對以下欄位進行統計分析：
- sr：螢幕尺寸
- vp：瀏覽器視窗可見地區
- dpr：螢幕像素比
- ul：文檔語言
- dr：文檔Referrer
- ct：網路連接類型（例如WiFi或3G）
  警告
  切勿使用setCommonInfo方法設定過多欄位，否則可能超出請求的限制長度，從而導致請求失敗。

通用SDK配置項

ARMS前端監控提供一系列SDK配置項，讓您能夠通過設定參數來滿足額外需求。以下是適用於本文情境的通用配置項。


pid	String	專案唯一ID，由ARMS在建立網站時自動產生。	是	無
uid	String	使用者ID，用於標識訪問使用者，可手動設定，用於根據使用者ID檢索。如果不配置，則由SDK隨機自動產生且每半年更新一次。	否	由SDK自動產生
tag	String	傳入的標記，每條日誌都會攜帶該標記。	否	無
release	String	應用版本號碼。建議您配置，便於查看不同版本的上報資訊。	否	`undefined`
environment	String	環境欄位，取值為：prod、gray、pre、daily和local，其中： prod表示線上環境。 gray表示灰階環境。 pre表示預發環境。 daily表示日常環境。 local表示本地環境。	否	`prod`
sample	Integer	日誌採樣配置，值為1~100的整數。對效能日誌和成功API日誌按照`1/sample`的比例採樣，關於效能日誌和成功API日誌的指標說明，請參見統計指標說明。	否	`1`
behavior	Boolean	是否為了便於排查錯誤而記錄報錯的使用者行為。	否	`false`

ARMS前端監控還提供了更多SDK配置項，可滿足進一步的需求。更多資訊，請參見SDK參考。