npm 包 cordova-plugin-bugly-sinoservices 使用教程

前言

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

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

安装 cordova-plugin-bugly-sinoservices

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

- ------- ------ --- --------------------------------- ---------- -------------------------------- ---------- ------------------------

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

------- ---------------------------------------- --------------
    --------- -------------------- -------------------------- --
    --------- ---------------- ---------------------- --
---------

配置 cordova-plugin-bugly-sinoservices

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

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

--------- ---------------
    ----------- --------------------- -------------- --
    ----------- ------------------------ ------------- --
-----------
--------- -----------
    ----------- --------------------- ------------ --
-----------

其中:

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

使用插件

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

捕获异常

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

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

例如:

--- -
    ----- --- ------------ ---------
- ----- --- -
    ---------------------------------- ----------------- -------- -------------
-

自定义日志

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

  • 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

例如:

--------------------------
--------------------------- --------- ---- -- -------------
---------------------------- ----- ------ ------- ----------

拦截崩溃

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

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

例如:

---------------------------------- -- -
    -------------------
    -- --------
    ------ -----
---

示例代码

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

- ------- ------ ------- ------------------- -------
- -- -------
- ------- -------- --- -------
- ------- -------- --- ---
- ------- ------ --- --------------------------------- ---------- -------------------------------- ---------- ------------------------

接下来,在 index.js 文件中,输入以下代码:

---------------------------------------- -- -- -
    ----- - ----- - - -------
    ----------------------------
    --------------------- ----- ------- ----------
    ----------------------------
-- -------

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

- ------- --- -------
- ------- --- ---

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

总结

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

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005731681e8991b448e9467


猜你喜欢

  • npm 包 insight-api-btcnano 使用教程

    在前端开发中,我们常常需要与比特币(Bitcoin)相关的数据打交道,例如查询交易记录、获取钱包余额等。insight-api-btcnano 是一个 npm 包,可以帮助我们实现这些功能。

    3 年前
  • npm 包 multiple-picker-proptype-update 使用教程

    介绍 npm 是 node.js 的包管理工具,可以方便地安装和管理 JavaScript 库和工具。 multiple-picker-proptype-update 是一款用于更新 React 组件...

    3 年前
  • npm 包 insight-ui-btcnano 使用教程

    在前端开发过程中,我们经常会使用npm包,npm是一个强大的包管理器,可以在项目中轻松地使用预编译的代码库。insight-ui-btcnano是一款非常实用的npm包,它可以用于构建比特币和纳诺币的...

    3 年前
  • npm 包 @npm/spife-dev-logger 使用教程

    前言 前段时间,在 2021 年的 JSConf China 上,npm 官方发布了一个名为 Spife 的工具,它是一个在 CLI 下运行的开发工具,用于帮助开发者更加高效地构建和运行项目。

    3 年前
  • npm 包 hyper-mono-material 使用教程

    简介 hyper-mono-material 是一款基于 Hyper 终端的主题,主要特点是采用了单色调的风格和 Material Design 的元素。它具有简洁、美观、易用的特点,深受前端开发者的...

    3 年前
  • npm 包 jqy 使用教程

    前言 在前端开发中,经常会用到 jQuery 这个强大的库。而 jqy 则是 jQuery 的一个简化版,只包含了最核心的部分代码,文件大小只有 jQuery 的一半左右。

    3 年前
  • npm 包 react-native-vector-icons-yuncess 使用教程

    在 React Native 开发中,我们常常需要使用图标来方便地展示操作或状态信息。而 react-native-vector-icons-yuncess 这个 npm 包则为我们提供了广泛且丰富的...

    3 年前
  • npm 包 @hspkg/generator-rc 使用教程

    介绍 随着前端技术的发展,前端工程化已经渐渐成为Web前端开发的重要组成部分。在构建和维护前端项目时,我们经常需要进行重复的工作,如建立项目目录结构、添加配置文件等,这些复杂、繁琐的工作常常使开发者感...

    3 年前
  • npm 包 daostack-arc-fork 使用教程

    介绍 daostack-arc-fork 是一个基于 Ethereum 平台的分散式自治组织(DAO)框架,它提供了一个易于使用的工具集,用于创建 DAO 并管理 DAO 的各种操作。

    3 年前
  • npm 包 hexo-sync 使用教程

    如果你正在使用 Hexo 静态网站生成器来创建博客,那么 hexo-sync 包将是一个非常有用的工具。hexo-sync 提供了一种简单的方式来同步 Hexo 博客的源文件夹和 Github Pag...

    3 年前
  • npm 包 react-unsplash-container 使用教程

    简介 react-unsplash-container 是一个 React 组件库,用于在网站上显示 Unsplash 页面,其中包括高质量的图片。这个库使用 Unsplash API,只需一个 AP...

    3 年前
  • npm 包 roc-plugin-test-jest 使用教程

    前言 在前端开发中,测试是一个不可或缺的部分。在测试过程中,我们需要使用各种测试框架和工具帮助我们完成测试。而 Jest 就是其中一种非常流行的测试框架。在使用 Jest 进行测试的过程中,我们可以使...

    3 年前
  • npm 包 rua-event 使用教程

    背景与目的 在前端开发中,我们常常需要使用事件来监听 DOM 元素上的各种操作,比如点击、鼠标移动、键盘输入等等。而业务场景中可以涉及到大量的事件绑定,使得代码变得冗长而难以维护。

    3 年前
  • npm 包 vue-pod 使用教程

    vue-pod 是一个基于 Vue.js 的组件库,它包含了一系列常用的 UI 组件,例如按钮、输入框、表格等,可以帮助前端工程师快速地构建一些常见的前端界面。本文将为大家介绍如何使用 npm 包 v...

    3 年前
  • npm 包 @sprii/eslint-config 使用教程

    在开发前端项目的过程中,代码的规范化是非常重要的,一个高质量的项目需要有一套完整的编码规范。而使用 ESLint 工具可以很好地达到这个目的,而 @sprii/eslint-config 包则是一个包...

    3 年前
  • 用法指南:npm 包 awesome-firework

    前言 awesome-firework 是一个 JavaScript 库,用于产生炫目的烟花效果。它是一个很棒的工具,可以为网站、游戏或者其他互动体验提供惊艳的特效。

    3 年前
  • npm 包 development-mock-server 使用教程

    在前端开发中,经常会遇到需要与后端进行接口联调的情况。而如果后端接口还未完成开发,我们可能需要自己模拟数据进行开发和测试。这时候就可以使用 npm 包 development-mock-server。

    3 年前
  • npm 包 @benjie/pg-query-native 使用教程

    本篇文章主要介绍 npm 包@benjie/pg-query-native 的使用方法,它是一个用于 Node.js 的 PostgreSQL 查询库,使用它可以让开发人员更轻松地使用 Node.js...

    3 年前
  • npm 包 itomic-vue-input-tag 使用教程

    简介 itomic-vue-input-tag 是一个基于 Vue.js 的输入框组件,用于输入多个标签。它支持自定义样式和事件,并提供了多个属性以定制标签的显示和行为。

    3 年前
  • npm 包 interpolate-math 使用教程

    在前端开发中,我们常常需要进行数据的插值计算。interpolate-math 是一个帮助我们进行数字插值计算的 npm 包,它可以方便地进行数学表达式的计算和数值范围的生成。

    3 年前

相关推荐

    暂无文章