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

时间 2019-12-08

标签开源前端脚本错误监控跟踪解决项目 badjs 试用繁體版

原文原文链接

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

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

功能

1 一站式体系化解决方案：业务只须要简单的配置，引入上报文件，便可实现脚本错误上报，每日统计邮件跟踪方便。html

2 可视化查询系统，快速定位错误信息：web应用程序脚本数量庞大，开发人员在如此之多的脚本中定位某个问题变得困难。BadJS可以巧妙定位错误脚本代码，进行反馈。经过各类查询条件，快速找到详细错误日志。
跨域、Script Error等棘手问题再也不是难题：tryjs帮你发现一切。前端

3 真实用户体验监控与分析：经过浏览器端真实用户行为与体验数据监控，为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深刻定位每个问题细节。即便没有用户投诉，依然能发现隐蔽bug，主动提高用户体验。node

4 用户行为分析：细粒度追踪真实的用户行为操做及流程，前端崩溃、加载缓慢及错误问题，可关联到后端进行深度诊断。mysql

5 产品质量的保障：浏览器百花齐放，用户环境复杂，巨大的差别致使开发人员难以重现用户遇到的问题。没法像后台同样上报全部用户操做日志。经过BadJS，上报用户端脚本错误，为产品质量保驾护航。git

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

1. 环境要求

nodejs 0.12+github

mysql 5.0+web

mongodb 3.0+sql

git 命令，用于拉取各个系统模块mongodb

2. 安装

1 git clone https://github.com/BetterJS/badjs-installer.gitdocker

2 进入到badjs-installer的目录，运行 npm run clone ，拉取各个模块

3 运行npm run install ,安装依赖，这个步骤很容易出现问题，对于新用户建议进入各个模块进行npm install 若是npm很差使，请用yarn试试

4 进入badjs-web/db ，将里面的 create.sql 导入到 mysql中

5 安装mysql

6 安装mongodb（保证不须要验证也能够登陆，即无用户名和密码登陆）

7 修改 badjs-installer\badjs-web下的配置 project.json中的mysql的数据库用户名和密码。默认是用户名和密码都是root。能够改为本身的。

3. 运行

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

4 配置

1 访问 http://127.0.0.1:8081/index.html ，进入页面肯定启动成功。
2 用用户名admin和密码admin登陆。
3 申请一个项目并审核经过
4 效果以下

记住上报的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"})的id必定要有，用在步骤4配置的项目里的上报id就好了。

6 看看效果吧

刷新index.html页面。
效果

7 后记。

基本完成了。效果也还能够。固然和fundebug 相比仍是要差了不少，尤为是没有重放功能等。不过也算是够用了。