Skip to content
dev
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

bugwatch

面向前端的一个监控平台。集错误监控,接口报错,性能分析,流量劫持分析于一身的前端监控平台

线上Demo

  • 测试账号: admin/admin

接入指南

  1. 在你的 html 页面 引入这个 js 脚本
<script src="https://www.fewatch.com/static/js/lib/bugWatch.js"></script> // 这个js文件3kb 大小
  1. 如果是想直接用我们提供的平台,那就去网站申请一个账号,在右上角添加一个项目,得到一个项目id。

  2. 在你的index.html 页面继续添加如下script.(推荐引用单独放在一个script里) 也可以直接添加到你的js里。

<script>
  bugWatch.report({
    projectId: '0f8935a3-789e-46ce-c70f-9553119e3f39', // 你在bugWatach管理界面添加项目的时候对应的项目id
 		debug: true, // 如果在某个环境不想要开启测试,可以把这个值设置成false
    ignore: 'error20' // 你想要忽略的前端错误,如果是多个错误,用 *,* 分隔, 比如 *error1,error2*, 注意中间不要有空格
  });
</script>
  1. 可选 如果你不需要ajax监控就不需要加这个 在你ajax公用拦截的地方加上 reportAjax 方法的调用
bugWatch.reportAjax(error)

比如:如果你用的是 Axios

Axios.interceptors.response.use(response =>
  response, (error) => {
    bugWatch.reportAjax(error)
    // Do something with response error
    return Promise.reject(error);
});

ok.好了。你可以去网站看你的监测数据了~

现在的主要功能

  • 前端 JS
    • JS错误图表分析
      • 今天和昨天每个小时的bug数量对比 line 图(帮助你分析是什么时间段造成的 bug 数量开始激增)
      • 项目错误排行榜 TOP 5 展示 bar 图 (你的网站报错最多的五个页面分别是什么)
      • 错误类型排行榜 TOP 5 展示 bar 图 (你的 JS 最常范的错误是什么?)
    • JS 错误日志列表页
      • 日志列表查看
      • 日志列表筛选
  • 前端访问的 Ajax 错误记录
    • ajax 错误日志页面
  • 性能分析 (第二期)
  • 流量劫持(第二期)
    • 帮助你分析你是否遇到了运营商劫持和 dns 污染
  • 地理分析 (第二期)
    • 通过分析你的网站的访问 ip 来分析你的用户主要来自哪些地区。占比怎么样

技术栈:

  • Vue2系列: Vue2 + Vue-router
  • 接口请求: Axios
  • 数据库: MongoDB, Mongoose(驱动Mongoo的,大家可以多了解下怎么用这个取数据,存数据)
  • Koa: Koa2(主要用来写接口), Koa-Router(koa一个方便的处理地址栏路径的插件), koa-bodyparser(解析post请求数据的插件)
  • 接口转发配置在 ./config/index 里的 proxyTalbe
  • 本地调试接口请另外开一个控制台,进入./server目录 输入 node app.js

项目结构

前端

  • **./src ** 前端代码在
  • ./static 静态资源再
  • config build 项目的构建代码

后端

  • ./aserver/pp.js 后端服务的启动代码
  • ./server 后端代码主要放在这里
    • server/controller 前端直接访问的接口主要定义在这里
    • server/models Schema (Schema不知道的话可以把它理解为数据库的表的字段的定义)定义

在本地开发的时候

MongoDB的使用

建议

  1. http://pan.baidu.com/s/1jII90iU这里下载软件(如果失效了联系我)
  2. 安装这个软件
  3. 进入安装目录。安装目录一般是 C:\Program Files\MongoDB 或者 C:\Program Files (x86)\MongoDB 目录下。
  4. 进入 MongoDB 目录下的 Server\3.2\bin 目录。双击 mongod.exe 程序。这个时候就算是启动成功Mongo了
  5. 下载一个 MongoChef 程序(此程序用于连接Mongo和方便你操作数据库)
  6. 点击 MongoChef 的 左上角的 Connect。
  7. 点击弹出窗口的 New Connection新建一个连接。默认 Mongo 端口号是 27017
  8. 进入连接以后, 在连接点击右键, 选择 'Add Database', 输入数据库的名字,按回车,数据库就建好了
  9. 新建用户: 选择当前连接下的Admin数据库,再点击界面菜单栏的 "Users", 或者用命令行建用户,就是进入 ”MongoDB"安装目录。然后输入(命令行建用户的方法可以忽略命令10)
db.createUser({user : "admin",pwd  : "111111"
  ,roles : [
      {
          role : "userAdminAnyDatabase",
          db   : "admin"
      }
  ]
})
  1. 输入用户名和密码,点击回车。

Build Setup

# install dependencies
npm install

## start server
node server/app.js

# serve with hot reload at localhost:8080 and open koa service.
npm run dev
# build for production with minification
npm run build

感谢以下贡献者

  • wuxiaolan91(吴晓兰)
  • 墨白
  • lcfevr
  • ocxers(池盛星)
  • Youwei-inMT
  • 刘云钊