全部產品
Search
文件中心

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

更新時間:Oct 17, 2024

要使用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參考