以npm方式接入前端監控 - Application Real-Time Monitoring Service

要使用ARMS前端監控子產品監控Web應用，必須先以CDN或npm方式安裝探針。本文介紹如何以npm方式為Web應用安裝ARMS前端監控探針。

安裝

在npm倉庫中安裝alife-logger。

npm install alife-logger --save

初始化

SDK以BrowserLogger.singleton方式初始化。

const BrowserLogger = require('alife-logger');
                // BrowserLogger.singleton(conf) conf傳入config配置。
                const __bl = BrowserLogger.singleton({
                pid: 'your-project-id',
                // 設定日誌上傳地址：
                // 部署新加坡地區可設為`https://arms-retcode-sg.aliyuncs.com/r.png?`。
                // 部署美西地區可設為`https://retcode-us-west-1.arms.aliyuncs.com/r.png?`。
                imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                // 其他config配置。
                });

使用npm方式接入ARMS前端監控時，Web端SDK會自動產生UID來統計UV等資訊。自動產生的UID可以用來區分使用者的標識，但不具有業務屬性，如需自訂UID，請在上述代碼中加入以下內容：

uid: 'xxx', // 該值用於區分使用者的標識，根據業務設定。

樣本：

const BrowserLogger = require('alife-logger');
                // BrowserLogger.singleton(conf) conf傳入config配置。
                const __bl = BrowserLogger.singleton({
                pid: 'your-project-id',
                        // 設定日誌上傳地址：
                        // 部署新加坡地區可設為`https://arms-retcode-sg.aliyuncs.com/r.png?`。
                        // 部署美西地區可設為`https://retcode-us-west-1.arms.aliyuncs.com/r.png?`。
                uid: 'xxx', // 該值用於區分使用者的標識，根據業務設定。
                        imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                // 其他config配置。
                });

API說明

@static singleton() 擷取單例對象

說明該方法只適用於npm引入。

調用參數說明：BrowserLogger.singleton(config,prePipe)

靜態方法，返回一個單例對象，傳入的config、prePipe只在第一次調用時生效，此後調用只返回已經產生的執行個體。

參數	類型	描述	是否必須	預設值
config	Object	網站配置，其他配置查看config配置項，請參見SDK參考。	是	無
prePipe	Array	預上報內容	否	無

此方法可以用於在應用入口初始化SDK，也可以在每次調用時擷取執行個體。

其他上報API

通過BrowserLogger.singleton擷取執行個體。

const __bl = BrowserLogger.singleton();

關於__bl的其他API使用方式，請參見前端介面說明。

Config配置

Config配置與CDN引入配置相同。請參見SDK參考。

預上報

如果在調用BrowserLogger.singleton()之前執行的部分邏輯需要上報一些資料，則需要使用資料預上報。具體操作，請參見資料預上報。

const BrowserLogger = require('alife-logger');
                // 與CDN的Pipe結構一致。
                const pipe = [
                // 將當前頁面的HTML也作為一個API上報。
                ['api', '/index.html', true, performance.now, 'SUCCESS'], //相當於__bl.api(api, success, time, code, msg)。
                // SDK初始化完成後即開啟SPA自動解析。
                ['setConfig', {enableSPA: true}]
                ];
                const __bl = BrowserLogger.singleton({pid:'網站唯一ID'},pipe);

通用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	是否為了便於排查錯誤而記錄報錯的使用者行為。	否	`true`
enableSPA	Boolean	監聽頁面的hashchange事件並重新上報PV，適用於單頁面應用情境。	否	`false`
enableLinkTrace	Boolean	進行前後端鏈路追蹤，請參見使用前後端鏈路追蹤診斷API錯誤原因。	否	`false`

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