本文檔介紹 CloudMonitor 前端監控 Electron SDK 的全部配置項與 API。通過 armsRum.init() 傳入設定物件即可完成 SDK 初始化。
SDK 配置(基礎配置)
參數 | 類型 | 描述 | 是否必填 | 預設值 |
endpoint | string | 資料上報地址 | 是 | - |
enable | boolean | 是否啟用 SDK | 否 | true |
env | ‘prod’ | ‘gray’ | ‘pre’ | ‘daily’ | ‘local’ | string | 應用環境標識 | 否 | - |
version | string | 應用版本號碼 | 否 | - |
endpoint 為必填項,為完整的上報地址 URL。可在CloudMonitor 2.0 控制台「使用者體驗監控 > 應用列表」中建立應用後擷取。
import armsRum from '@arms/rum-electron';
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'enable: true,
env: 'prod',
version: '1.0.0',
});app 配置
app 對象用於描述應用的擴充資訊,便於在CloudMonitor 2.0 控制台中按維度篩選與彙總。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
app | object | 應用擴充資訊 | 否 | - |
app.name | string | 應用程式名稱 | 否 | - |
app.version | string | 應用版本 | 否 | - |
app.channel | string | 發布渠道 | 否 | - |
app.env | string | 應用環境 | 否 | - |
app.type | string | 應用類型 | 否 | - |
app.package | string | 包名 | 否 | - |
app.framework | string | 技術架構 | 否 | - |
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'app: {
name: 'MyElectronApp',
version: '2.1.0',
channel: 'stable',
env: 'prod',
type: 'electron',
package: 'com.example.my-app',
framework: 'react',
},
});user 配置
user 對象用於標識目前使用者,便於在CloudMonitor 2.0 控制台中按使用者維度排查問題。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
user | object | 使用者資訊對象 | 否 | - |
user.name | string | 使用者名稱稱 | 否 | - |
user.tags | string | 使用者標籤 | 否 | - |
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'user: {
name: '張三',
tags: 'vip,enterprise',
},
});sessionConfig 配置
sessionConfig 控制會話(Session)的採樣與生命週期策略。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
sampleRate | number | 會話採樣率(0~1) | 否 | 1 |
maxDuration | number | 會話持續時間上限(毫秒) | 否 | - |
overtime | number | 會話逾時時間(毫秒) | 否 | - |
sampleRate 取值範圍為 0~1,1 表示 100% 採集,0.1 表示 10% 採樣。降低採樣率可減少上報量與費用。
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'sessionConfig: {
sampleRate: 1,
maxDuration: 4 * 60 * 60 * 1000, // 會話最長 4 小時overtime: 30 * 60 * 1000, // 30 分鐘無活動則逾時
},
});collectors 配置(主進程採集器)
collectors 控制主進程中各採集器的啟用/禁用。每個採集器支援傳入 boolean 或 ICollectorConfig 對象進行細粒度配置。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
jsError | boolean | ICollectorConfig | 未捕獲異常與 Promise 拒絕 | 否 | true |
consoleError | boolean | ICollectorConfig | console.error 攔截上報 | 否 | true |
crash | boolean | ICollectorConfig | 原生崩潰採集 | 否 | true |
api | boolean | ICollectorConfig | API 請求監控 | 否 | true |
application | boolean | ICollectorConfig | 應用啟動指標 | 否 | true |
crash 採集器通過 Electron 的 crashReporter 機制捕獲原生崩潰(主進程/渲染進程 Crash),並支援通過 WASM 解析 minidump 檔案。
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'collectors: {
jsError: true,
consoleError: false,
crash: true,
api: {
enable: true,
// 可在 ICollectorConfig 中進一步配置過濾器等
},
application: true,
},
});browserCollectors 配置(渲染進程採集器)
僅在 autoInject: true 模式下生效。當 autoInject 為 false 時,渲染進程採集器需在 Browser SDK 側單獨配置。
browserCollectors 控制自動注入到渲染進程的 Browser SDK 中的採集器。每個採集器支援傳入 boolean 或 ICollectorConfig 對象。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
perf | boolean | ICollectorConfig | 頁面載入效能指標 | 否 | true |
webvitals | boolean | ICollectorConfig | Web Vitals 核心指標(LCP、FID、CLS) | 否 | true |
exception | boolean | ICollectorConfig | 未捕獲異常與 Promise 拒絕 | 否 | true |
whiteScreen | boolean | ICollectorConfig | 白屏檢測 | 否 | true |
api | boolean | ICollectorConfig | HTTP 要求監控(XHR/Fetch) | 否 | true |
staticResource | boolean | ICollectorConfig | 靜態資源載入監控 | 否 | true |
click | boolean | ICollectorConfig | 使用者點擊事件 | 否 | true |
longTask | boolean | ICollectorConfig | 長任務檢測(>50ms) | 否 | true |
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'autoInject: true,
browserCollectors: {
perf: true,
webvitals: true,
exception: true,
whiteScreen: true,
api: true,
staticResource: true,
click: false, // 關閉點擊事件採集longTask: true,
},
});tracing 配置
tracing 控制分布式鏈路追蹤(Tracing)的啟用與策略。支援傳入 boolean 快速開關,或傳入 ITracingOption 對象進行詳細配置。
參數 | 類型 | 描述 | 是否必填 | 預設值 |
enable | boolean | 是否啟用鏈路追蹤 | 否 | false |
sample | number | 採樣率(0~1) | 否 | - |
propagatorTypes | Array<string> | 傳播協議類型,支援 | 否 | - |
allowedUrls | Array<MatchOption | TraceOption> | 允許注入追蹤頭的 URL 規則 | 否 | - |
tracestate | boolean | 是否攜帶 tracestate | 否 | false |
baggage | boolean | 是否攜帶 baggage | 否 | false |
propagatorTypes 支援多種傳播協議,可根據後端服務使用的鏈路追蹤體系選擇對應的協議。allowedUrls 支援字串或正則匹配,僅匹配的請求才會注入追蹤頭。
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'tracing: {
enable: true,
sample: 0.5,
propagatorTypes: ['tracecontext', 'b3'],
allowedUrls: [
'https://api.example.com',
/\/api\/v\d+\//,
],
tracestate: true,
baggage: false,
},
});其他配置
參數 | 類型 | 描述 | 是否必填 | 預設值 |
autoInject | boolean | 是否自動注入 Browser SDK 到所有 BrowserWindow | 否 | true |
partition | string | 自訂 session partition | 否 | - |
spaMode | boolean | ‘auto’ | ‘hash’ | ‘history’ | SPA 路由追蹤模式 | 否 | false |
evaluateApi | Function | 自訂 API 請求解析回調 | 否 | - |
parseViewName | Function | 自訂頁面名稱解析函數 | 否 | - |
beforeReport | Function | 上報前回調,可修改或丟棄資料 | 否 | - |
properties | Record<string, number | string> | 全域自訂屬性 | 否 | - |
autoInject 預設為 true,SDK 會自動將 Browser SDK 注入到所有 BrowserWindow 的渲染進程中。若設定為 false,則需在渲染進程中手動引入並初始化 Browser SDK:
// 渲染進程中手動初始化
import armsRum from '@arms/rum-electron/browser';
armsRum.init({ endpoint: '<YOUR-ENDPOINT>' });armsRum.init({
endpoint: '<YOUR-ENDPOINT>'autoInject: true,
partition: 'persist:main',
spaMode: 'hash',
parseViewName: (url: string) => {
// 自訂頁面名稱解析邏輯const match = url.match(/\/app\/([^/?#]+)/);
return match ? match[1] : url;
},
beforeReport: (bundle: any) => {
// 返回修改後的資料繼續上報,返回 null/undefined 則丟棄該條資料console.log('beforeReport', bundle);
return bundle;
},
properties: {
department: 'engineering',
region: 'cn-hangzhou',
},
});partition用於指定自訂 Electron session partition。當你的BrowserWindow使用了partition配置時,需要在此處指定相同的值,以確保 preload 指令碼正確註冊到對應的 session。spaMode取值含義如下:false:禁用 SPA 路由追蹤(預設行為,僅追蹤完整頁面載入)true/'auto':自動檢測,優先 hash 後 pathname'hash':Hash 路由模式(如 React HashRouter)'history':History API 路由模式(如 React BrowserRouter)
SDK API
armsRum.init(config)
初始化 SDK,必須在 app.ready 之前調用。
init(config: IElectronConfig): Promise<ArmsRum>init() 必須在 Electron app.ready 事件之前調用,因為 SDK 需要在 ready 之前註冊自訂協議(rum-event://)以支援降級上報通道。
import { app } from 'electron';
import armsRum from '@arms/rum-electron';
//在 app.ready 之前調用 init
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'env: 'prod',
version: '1.0.0',
});
app.whenReady().then(() => {
// 建立 BrowserWindow 等
});
armsRum.getConfig()
擷取當前 SDK 配置。
getConfig(): IElectronConfigconst config = armsRum.getConfig();
console.log('當前配置:', config.endpoint, config.env);armsRum.setConfig()
動態修改 SDK 配置,支援兩種調用方式。
// 方式一:按索引值對修改單個配置項
setConfig<T extends keyof IElectronConfig>(key: T, value: IElectronConfig[T]): void
// 方式二:傳入設定物件批量修改
setConfig(config: Partial<IElectronConfig>): void// 修改單個配置項
armsRum.setConfig('enable', false);
armsRum.setConfig('env', 'daily');
// 批量修改配置const config = armsRum.getConfig();
armsRum.setConfig({
...config,
enable: true,
env: 'prod',
version: '2.0.0',
});armsRum.registerSession(partition)
為使用自訂 partition 的 BrowserWindow 註冊 RUM preload 指令碼。在 init() 之後調用,建議在建立對應 BrowserWindow 之前調用,以確保首次頁面載入即生效。
registerSession(partition: string): Promise<ArmsRum>當 BrowserWindow 使用了自訂 partition(如 persist:main)時,需要調用此方法為該 session 註冊 preload 指令碼。若在 init() 中已通過 partition 配置指定了預設 partition,則無需再調用此方法。
import armsRum from '@arms/rum-electron';
import { BrowserWindow } from 'electron';
armsRum.init({
endpoint: '<YOUR-ENDPOINT>'
}).then(() => {
// 為自訂 partition 註冊 preload
armsRum.registerSession('persist:main');
});
// 之後建立使用該 partition 的視窗
const win = new BrowserWindow({
webPreferences: {
partition: 'persist:main',
// ...
},
});