npm 包 cordova-plugin-bugly-sinoservices 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动应用开发中，一个成功的 app 需要具备不仅在用户体验和功能上都得到用户认可，而且也需要在稳定性、兼容性等方面十分完善。但针对一些意料不到的情况，如 app 异常崩溃，前端开发者需要通过收集崩溃日志等方法及时协助开发团队快速定位异常，并尽快解决问题。此时，cordova-plugin-bugly-sinoservices 是一个十分好的选择。

本篇文章就将详细介绍如何通过 npm 包 cordova-plugin-bugly-sinoservices 进行崩溃日志的采集和上报，并结合示例代码为读者提供深入掌握的指导意义。

安装 cordova-plugin-bugly-sinoservices

首先，在安装插件前，确保已经配置好 Cordova 开发环境。接下来，运行以下命令来安装插件：

$ cordova plugin add cordova-plugin-bugly-sinoservices --variable ANDROID_APPID=Your_Android_AppId --variable IOS_APPID=Your_IOS_AppId

其中，--variable ANDROID_APPID=Your_Android_AppId 和 --variable IOS_APPID=Your_IOS_AppId 参数分别填写在腾讯 Bugly Web 后台获取的应用 ID（APP ID）。此操作会将插件依赖添加到项目中，并在插件配置文件中添加以下条目：

<plugin name="cordova-plugin-bugly-sinoservices" spec="~2.2.2">
    <variable name="ANDROID_APPID" value="Your_Android_AppId" />
    <variable name="IOS_APPID" value="Your_IOS_AppId" />
</plugin>

配置 cordova-plugin-bugly-sinoservices

该插件将自动在运行时嵌入应用程序，并在必要时记录崩溃信息并将其发送给腾讯 Bugly 服务器。因此，无需编写额外的代码来配置该插件。

但也有一些可选参数可以在 config.xml 文件中进行配置，以便在应用程序启动时更改应用程序的行为。如：

<platform name="android">
    <preference name="BOOTS_UP_DELAY" value="300000" />
    <preference name="ENABLE_DEBUG_MODE" value="false" />
</platform>
<platform name="ios">
    <preference name="BOOTS_UP_DELAY" value="5000" />
</platform>

其中：

BOOTS_UP_DELAY 表示应用程序启动后多少毫秒后开始启用该插件。如果将其设置为一个很大的数字，那么插件将在应用程序的初始化过程中完全被禁用。设置默认值为 5000 毫秒。
ENABLE_DEBUG_MODE 表示是否启用插件的 debug 模式。缺省值为 false，表示禁用 debug 模式。

使用插件

安装和配置插件完毕后，就可以开始在代码中使用插件了。使用过程中，主要有以下三个方面需要注意。

捕获异常

无需进行额外的配置即可捕获异常。当您的应用程序发生崩溃时，该插件将后台保存崩溃信息并在您的下一次启动应用程序时上传它们。android 和 ios 程序会自动向 window 对象中注入名为 Bugly 的全局对象。在 window.Bugly 对象中，主要接口有：

setUserId(userId: string): 设置用户标识。
reportException(message: string, stack: string, callback?: () => void): 立即汇报一条异常信息，可手工将捕获的异常通过该函数上传上报。其中，message 为异常信息字符串，stack 表示错误栈轨迹信息，callback 为执行成功后的回调函数。
setUserSceneTag(sceneId: number): 自定义场景标签。

例如：

try {
    throw new Error('hello bugly!');
} catch (e) {
    window.Bugly.reportException('test reportException', e.stack, console.log);
}

自定义日志

对于一些非崩溃的异常场景，也可自定义日志上报。相关接口有：

setTag(tagId: number): 设置自定义标签，方便查询。
setSdkConfig(config: Bugly.SdkConfig, callback?: () => void): 动态修改 SDK 配置。
logVerbose(tag: string, message: string): void
logDebug(tag: string, message: string): void
logInfo(tag: string, message: string): void
logWarn(tag: string, message: string): void
logError(tag: string, message: string): void

例如：

window.Bugly.setTag(9527);
window.Bugly.setSdkConfig({ IS_DEBUG: true }, console.log);
window.Bugly.logWarn('test', 'test custom warning message');

拦截崩溃

有时，您可能需要在主动拦截也就是不向腾讯 Bugly 上报异常，而是自己处理的崩溃情况。相关接口有：

setCrashHandler(callback: (stack: string) => boolean): 设置一个回调函数，当抛出崩溃时，该回调函数将负责处理该事件，返回 Boolean 类型的结果指示是否继续向上报异常。

例如：

window.Bugly.setCrashHandler(stack => {
    console.log(stack);
    // 自已处理，不上传
    return true;
});

示例代码

我们将把以上内容集成到一个简单的示例应用程序中。首先，我们将创建一个名为 Example 的 Cordova 应用程序并添加插件：

$ cordova create Example com.example.cordova Example
$ cd Example
$ cordova platform add android
$ cordova platform add ios
$ cordova plugin add cordova-plugin-bugly-sinoservices --variable ANDROID_APPID=Your_Android_AppId --variable IOS_APPID=Your_IOS_AppId

接下来，在 index.js 文件中，输入以下代码：

document.addEventListener('deviceready', () => {
    const { Bugly } = window;
    Bugly.setUserSceneTag(9527);
    Bugly.logWarn('test', 'test warning message');
    console.log('deviceready~');
}, false);

然后，使用以下命令在 Android 或 iOS 设备上运行应用程序：

$ cordova run android
$ cordova run ios

您现在可以访问您设备的 logcat 或 console 窗口来查看应用程序的输出。当您调用 logWarn 时，您将在日志文件中看到一条来自 Bugly 的记录。

总结

本文介绍了 npm 包 cordova-plugin-bugly-sinoservices 的安装方式、配置项、使用方法等，同时配以示例代码，希望能给读者在前端开发过程中对于移动应用的崩溃处理提供一些参考和帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9467