要使用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 | 應用版本號碼。建議您配置,便於查看不同版本的上報資訊。 | 否 |
|
environment | String | 環境欄位,取值為:prod、gray、pre、daily和local,其中:
| 否 |
|
sample | Integer | 日誌採樣配置,值為1~100的整數。對效能日誌和成功API日誌按照 | 否 |
|
behavior | Boolean | 是否為了便於排查錯誤而記錄報錯的使用者行為。 | 否 |
|
enableSPA | Boolean | 監聽頁面的hashchange事件並重新上報PV,適用於單頁面應用情境。 | 否 |
|
enableLinkTrace | Boolean | 進行前後端鏈路追蹤,請參見使用前後端鏈路追蹤診斷API錯誤原因。 | 否 |
|
ARMS前端監控還提供了更多SDK配置項,可滿足進一步的需求。更多資訊,請參見SDK參考。