本文将为您介绍如何初始化终端性能监控 Pro Electron SDK。
操作步骤
Electron 分为主进程与渲染进程,有部分应用数据只能在主进程获得而无法在渲染进程获得,建议使用 IPC 方法在主进程与渲染进程共享关键的应用数据,如设备 ID、用户 ID 等。
1. 在主进程设置 IPC 调用,示例代码如下。
const { app, ipcMain } = require('electron');// 设置用户ID,设备ID跟bundleIDconst userID = 'userID';const deviceID = "deviceID";const bundleID = "bundleID";// 提供应用版本给渲染进程ipcMain.handle('get-app-version', () => {return app.getVersion();});// 提供设备ID给渲染进程ipcMain.handle('get-device-id', () => {return deviceID;});// 提供用户ID给渲染进程ipcMain.handle('get-user-id', () => {return userID;});// 提供bundleID给渲染进程ipcMain.handle('get-bundle-id', () => {return bundleID;});
2. 暴露 IPC 函数到渲染进程。在 preload.js 里注册在主进程声明的 IPC 调用,示例代码如下。
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {getAppVersion: () => ipcRenderer.invoke('get-app-version'),getDeviceId: () => ipcRenderer.invoke('get-device-id'),getUserId: () => ipcRenderer.invoke('get-user-id'),getBundleId:() => ipcRenderer.invoke('get-bundle-id'),});
3. 渲染进程获得应用数据,示例代码如下。
// 通过IPC获得app版本,设备ID,用户ID,bundleIDconst appVersion = await window.electronAPI.getAppVersion();const deviceID = await window.electronAPI.getDeviceId();const userID = await window.electronAPI.getUserId();const bundleID = await window.electronAPI.getBundleId();
4. 配置 setConfig。该方法用来修改实例配置,例如下面场景:在实例化 SDK 时需要传入配置对象,示例代码如下。
// 主进程修改实例配置aegis.setConfig({uid: userID,aid: deviceID,extField: {appVersion: appVersion,bundleID: bundleID},});// 渲染进程修改实例配置window.Aegis.setConfig({uid: userID,aid: deviceID,extField: {appVersion: appVersion,bundleID: bundleID},});
很多情况下,并不能一开始就获取到用户的 uid,而等获取到用户的 uid 才开始实例化 SDK 就晚了,这期间发生的错误 SDK 将监听不到。uid 的设置可以在获取到用户的时候,示例代码如下。
const aegis = new Aegis({id: 'pGUVFTCZyewxxxxx'//...//...其他配置})// 拿到uid之后...aegis.setConfig({uid: userID})
示例代码
主进程和渲染进程的 SDK 初始化示例代码如下。
主进程接入 SDK 示例代码:
const Aegis= require('bugly-electron-main');const aegis = new Aegis({id: 'xxx', // 产品对应的产品id,必须appKey: 'xxxx', // 产品对应的appKey,必须uid: "uid", // 用户ID,选填aid: "deviceID", // 设备ID,选填// 手动设置上报域名hostUrl: {url: 'https://cloud.bugly.qq.com/collect/aegisV2Electron',whiteListUrl: 'https://cloud.bugly.qq.com/electronconfig/v_electron/config',},env: "debug", // 默认为production,设置为debug时输出sdk使用时的日志信息// minidumpBinDir,uploadCrashLog,crashFilePath 使用崩溃监控功能时可以在初始化时设置这些字段,具体作用在【崩溃】栏目中说明extField: {appVersion: "appVersion" // 应用版本号,必填},plugin: {processPerformance: true, // 开启性能上报,包括cpu和内存error: true, // 开启错误上报crash: true, // 开启崩溃上报api: { // API监控配置apiDetail: true, // 开启上报API请求的详细信息(包括详细的请求和响应参数)retCodeHandler: () => {}, // 自定义返回码handler函数,在API监控部分有详细使用方法},}})
渲染进程接入 SDK 示例代码:
import Aegis from "bugly-electron-renderer-monitor";window.Aegis = new Aegis({id : 'xxx', // 产品对应的产品id,必须appKey: 'xxx', // 产品对应的appKey,必须uid: "uid", // 用户ID,选填aid: "deviceID", // 设备ID,选填// 手动设置上报域名hostUrl: {url: 'https://cloud.bugly.qq.com/collect/aegisV2Electron',whiteListUrl: 'https://cloud.bugly.qq.com/electronconfig/v_electron/config',},env: "debug", // 默认为production,设置为debug时输出sdk使用时的日志信息extField: {appVersion: "appVersion" // 应用版本号,必填},plugin: {spa: true, // 开启pv数据收集error: true, // 开启JS错误数据收集assetSpeed: true, // 开启静态资源数据收集pagePerformance: true, // 开启页面加载数据收集webVitals: true, // 开启页面性能数据收集session: true, // 开启会话追踪数据收集api: { // 开启API数据收集apiDetail: true, // 开启上报API请求的详细信息(包括详细的请求和响应参数)retCodeHandler: () => {}, // 自定义返回码handler函数,在API监控部分有详细使用方法},}});
注意:
如果 Electron 应用加载页面的方式是 loadFile 而不是 loadURL,很多功能无法正常使用,例如页面访问、页面加载等与 Web 相关的功能。