开源前端脚本错误监控及跟踪解决项目BadJS试用

2023-08-29 09:48:34

摘要： 试用BadJS。

原文：开源前端脚本错误监控及跟踪解决项目-BadJS 试用
作者：过错

Fundebug经授权转载，版权归原作者所有。

BadJS 是一个web 前端脚本错误监控及跟踪项目。此项目为鹅厂 imweb（qq群:179045421）团队的开源项目。此项目支持单机，集群，docker。存储支持mongodb等。

官网文档：https://github.com/BetterJS/doc 本文主要参考了此文档

功能

一站式体系化解决方案：业务只需要简单的配置，引入上报文件，即可实现脚本错误上报，每日统计邮件跟踪方便。
可视化查询系统，快速定位错误信息：web应用程序脚本数量庞大，开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码，进行反馈。通过各种查询条件，快速找到详细错误日志。跨域、Script Error等棘手问题不再是难题：tryjs帮你发现一切。
真实用户体验监控与分析：通过浏览器端真实用户行为与体验数据监控，为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深入定位每一个问题细节。即使没有用户投诉，依然能发现隐蔽bug，主动提升用户体验。
用户行为分析：细粒度追踪真实的用户行为操作及流程，前端崩溃、加载缓慢及错误问题，可关联到后端进行深度诊断。
产品质量的保障：浏览器百花齐放，用户环境复杂，巨大的差异导致开发人员难以重现用户遇到的问题。无法像后台一样上报所有用户操作日志。通过BadJS，上报用户端脚本错误，为产品质量保驾护航。

我这里记录一下我在win10下单机使用（hello world的程度）的过程。

1. 环境要求

nodejs 0.12+
mysql 5.0+
mongodb 3.0+
git 命令，用于拉取各个系统模块

2. 安装

git clone https://github.com/BetterJS/badjs-installer.git
进入到badjs-installer的目录，运行 npm run clone ，拉取各个模块
运行npm run install ,安装依赖，这个步骤很容易出现问题，对于新用户建议进入各个模块进行npm install 如果npm不好使，请用yarn试试
进入badjs-web/db ，将里面的 create.sql 导入到 mysql中
安装mysql
安装mongodb（保证不需要验证也可以登录，即无用户名和密码登录）
修改 badjs-installer\badjs-web下的配置 project.json中的mysql的数据库用户名和密码。默认是用户名和密码都是root。可以改成自己的。

3. 运行

运行 npm run start ，启动各个模块

4. 配置

访问 http://127.0.0.1:8081/index.html ，进入页面确定启动成功。
用户名admin和密码admin登录。
申请一个项目并审核通过
效果如下

记住上报的id

5. 测试

下载项目 https://github.com/BetterJS/badjs-report

找到里面的badjs-report\example下的index.html

<!Doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>example</title>

    <script src="../src/bj-report.js"></script>

    <script src="../src/bj-wrap.js"></script>

    <script src="../src/requirejs/require.js"></script>

</head>

<body>

    <script>

 BJ_REPORT.init({id: 1  , uin : 1, random: 1 , url:"http://127.0.0.1:80/badjs"})

        //主动上报错误日志

        BJ_REPORT.report("终于成功了");

        //info上报，用于记录操作日志

        BJ_REPORT.info("info");

        //可以结合实时上报，跟踪问题; 不存入存储

        BJ_REPORT.debug("debug");

        //记录离线日志

        BJ_REPORT.offlineLog("offlineLog");

           var  mm=1/0;

         var a=b;

    </script>

</body>

</html>

注意，原文代码是我从别的地方考一个require.js 这里是我自己加的。

BJ_REPORT.init({id: 1 , uin : 1, random: 1 , url:"[http://127.0.0.1:80/badjs](http://127.0.0.1/badjs)"})的id一定要有，用在步骤4配置的项目里的上报id就行了。

6. 看看效果吧

刷新index.html页面。效果：

7. 后记

基本完成了。效果也还可以。

当然和fundebug相比还是要差了很多，尤其是没有重放功能等。不过也算是够用了。

作者：过错

出处：http://www.cnblogs.com/wang2650

关于作者：net开发做的久而已。十余年时光虚度！

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。如有问题，可以邮件：wang2650@163.com 联系我，非常感谢。

码农公寓

功能