SDK接入指南

简介

Bugly Electron 端 SDK 主要包含两部分，一部分是主进程SDK，集成在Electron应用的主进程当中，用于监控主进程的质量和性能信息并完成上报，另一部分是渲染进程SDK，集成在Electron应用的渲染进程当中，用于监控渲染进程的质量和性能信息并完成上报。

danger

Electron 监控还在灰度验证中，请接入业务先尝试小范围灰度试用，质量验证符合预期后，再正式上线

SDK接入

创建产品

打开Bugly的控制管理台，进入我的产品列表，点击右上角的创建产品按钮，选择 electron 产品。 产品创建后，可在设置->产品信息查看该产品的APP ID 和 APP KEY。APP ID 和 APP KEY是SDK与Bugly服务端通信的重要凭证，也是识别一个产品的唯一标识。

安装SDK

设置腾讯npm源

npm config set registry https://mirrors.tencent.com/npm/

使用npm安装SDK

// 安装主进程SDK
npm install -save @tencent/bugly-electron-main@1.0.12-beta.4
// 安装渲染进程SDK
npm install -save @tencent/bugly-electron-renderer@2.0.11-beta.2

使用pnpm安装SDK

在packages.json里添加以下内容

    "dependencies": {
    "@tencent/bugly-electron-main": "1.0.12-beta.4",
    "@tencent/bugly-electron-renderer": "2.0.11-beta.2",
    "@tencent/minidump": "0.0.8-beta.3"
    }

在pnpm-workspace.yaml里添加以下内容：

  onlyBuiltDependencies:
  - '@tencent/minidump'

最后安装SDK

  pnpm install -save @tencent/bugly-electron-main
  pnpm install -save @tencent/bugly-electron-renderer

提醒

SDK目前仅支持NPM以及PNPM安装导入的方式，后续将会支持以CDN形式导入。

SDK使用

主进程接入SDK

const Aegis= require('@tencent/bugly-electron-main');

const aegis = new Aegis({
  id : 'xxx', // 产品对应的产品id，必须
  appKey: 'xxxx', // 产品对应的appKey，必须
  env: "debug", // 默认为production，设置为debug时输出sdk使用时的日志信息
  // minidumpBinDir,uploadCrashLog 使用崩溃监控功能时可以在初始化时设置这两个字段，具体作用在【崩溃】栏目中说明
  plugin: {
    pagePerformance: true, // 开启性能上报，包括cpu和内存
    error: true, // 开启错误上报
    crash: true, // 开启崩溃上报
    api: {  // API监控配置
      apiDetail: true,  // 开启上报API请求的详细信息（包括详细的请求和响应参数）
      retCodeHandler: () => {}，  // 自定义返回码handler函数，在API监控部分有详细使用方法
    },
  }
})

渲染进程接入SDK

import Aegis from "@tencent/bugly-electron-renderer";

window.Aegis = new Aegis({
    id : 'xxx', // 产品对应的产品id，必须
    appKey: 'xxx', // 产品对应的appKey，必须
    env: "debug", // 默认为production，设置为debug时输出sdk使用时的日志信息
    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相关的功能。

配置方法

Electron分为主进程与渲染进程，有部分应用数据只能在主进程获得而无法在渲染进程获得，建议使用IPC方法在主进程与渲染进程共享关键的应用数据，如设备ID，用户ID等。

主进程设置IPC调用

const { app, ipcMain } = require('electron');

// 设置用户ID,设备ID跟bundleID
const userID = 'userID';
const deviceID = "devieID";
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;
}); 

暴露IPC函数到渲染进程

在perload.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'),
});

渲染进程获得应用数据

// 通过IPC获得app版本，设备ID，用户ID，bundleID
const appVersion = await window.electronAPI.getAppVersion();
const deviceID = await window.electronAPI.getDeviceId();
const userID = await window.electronAPI.getUserId();
const bundleID = await window.electronAPI.getBundleId();

setConfig

该方法用来修改实例配置，比如下面场景： 在实例化 SDK 时需要传入配置对象

// 主进程修改实例配置
  aegis.setConfig({
    uid: userID,
    aid: deviceID,
    extField: {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
})