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

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

功能

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

2 可视化查询系统，快速定位错误信息：web应用程序脚本数量庞大，开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码，进行反馈。通过各种查询条件，快速找到详细错误日志。

跨域、Script Error等棘手问题不再是难题：tryjs帮你发现一切。

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

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

5 产品质量的保障：浏览器百花齐放，用户环境复杂，巨大的差异导致开发人员难以重现用户遇到的问题。无法像后台一样上报所有用户操作日志。通过BadJS，上报用户端脚本错误，为产品质量保驾护航。

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

1. 环境要求

nodejs 0.12+

mysql 5.0+

mongodb 3.0+

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

2. 安装

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

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 相比还是要差了很多，尤其是没有重放功能等。不过也算是够用了。

开源前端脚本错误监控及跟踪解决项目-BadJS 试用的更多相关文章

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

    摘要: 试用BadJS. 原文:开源前端脚本错误监控及跟踪解决项目-BadJS 试用 作者:过错 Fundebug经授权转载,版权归原作者所有. BadJS 是 一个web 前端脚本错误监控及跟踪项目 ...

  2. 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

    背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...

  3. 从无到有<前端异常监控系统>落地

    导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了.  我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才 ...

  4. 前端异常监控 - BadJS

    前端异常监控 - BadJS 简介:BadJS 是 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控.上报.统计.查看等系统化的跟踪解决方案.目前BadJS覆盖了腾讯课堂.公众号.邮 ...

  5. 七个开源的 Spring Boot 前后端分离项目，一定要收藏！

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  6. 八个开源的 Spring Boot 前后端分离项目，一定要收藏！

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

  7. 业务线接入前端异常监控sentry

    1.前端异常处理的框架对比   是否开源 收费 语言 监控范围 sentry 是 自己搭建服务器(免费)价格 英文 Angular.AngularJs.Backbone.Ember.JavaScrip ...

  8. JQ-bootstrap我的开源前端框架

        因为实在不知道写啥,所以迟迟没有相关的介绍.但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了.       首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用boo ...

  9. 前端性能监控系统ShowSlow

    作者:zhanhailiang 日期:2014-11-14 1. 简单介绍 ShowSlow是开源的前端性能监控系统,提供了下面功能: 前端性能指标数据收集功能:ShowSlow原生提供了数据收集工具 ...

随机推荐

  1. 【百度杯】ctf夺旗大战，16万元奖励池等你拿

    寻找安全圈内最会夺flag的CTF职业玩家,将以个人方式参与夺旗,完全凭借个人在CTF中的技艺及造诣获得奖金回报. 周末少打一局LOL,玩一玩CTF也能挣个万元零花钱! **比赛时间: 9月至17年3 ...

  2. JavaScript原生实现观察者模式

    观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象. 它是由两类对象组成,主题和观察者,主题负责发布事件 ...

  3. 超实用的Docker入门教程｜Docker vs VM

    概述 如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发 ...

  4. Go语言map

    map 是一种特殊的数据结构:一种元素对(pair)的无序集合,pair 的一个元素是 key,对应的另一个元素是 value,所以这个结构也称为关联数组或字典.这是一种快速寻找值的理想结构:给定 k ...

  5. 微信小程序开发用户授权登录

    用wx.login获取登录凭证code <!--pages/user/index.wxml--> <view hidden='{{boolean}}'> <view wx ...

  6. Metasploit Framework（2）Exploit模块、Payload使用

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Exploit模块分为主动和被动(Active.Pas ...

  7. [Swift-2019力扣杯春季初赛]3. 最小化舍入误差以满足目标

    给定一系列价格 [p1,p2...,pn] 和一个目标 target,将每个价格 pi 舍入为 Roundi(pi) 以使得舍入数组 [Round1(p1),Round2(p2)...,Roundn( ...

  8. IdentityServer4源码颁发token分析及性能优化

    IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...

  9. ssh免密码快速登录配置

    使用ssh登录服务器的时候,需要输入ip地址.端口.用户名.密码等信息,比较麻烦,容易输错.还好,通过客户端和服务器的配置参数,可实现免密码快速登录.服务器可通过保存客户端的公钥,用于验证客户端的身份 ...

  10. 浅谈模块系统与 ABP 框架初始化

    在 ABP 框架当中所有库以及项目都是以模块的形式存在,所有模块都是继承自AbpModule 这个抽象基类,每个模块都拥有四个生命周期.分别是: PreInitialze(); Initialize( ...