Profession & Efficient

保持对技术的敬畏之心

前端修bug神器「bug信息收集系统」搭建图解

背景

  • 一个项目从开发到上线,必将测试过程。在中小型公司中,程序的测试改bug过程几乎由全手工完成。一般需要经过这几个阶段:
    • 测试发现Bug,并向开发反馈
    • 开发与测试沟通,重复多次了解相关情况(如所在页面,账号密码,所做的操作,重现步骤,浏览器信息等)* N
    • 开发发现问题,修改代码,完成bug修复
  • 一般而言,在改bug过程耗时最多的,是开发向测试了解情况的这个步骤,这是一个反复沟通的过程,需要极大的沟通成本,而且还可能发生信息沟通遗漏的情况。
  • 如果是移动端的项目,改bug的耗时更甚。为了解与后端交互的数据情况,还得抓包(装证书,设置代理,输入地址等)

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 为了解程序的运行情况而做的操作是重复,繁琐,无意义。

  • 本项目意在用程序代替我们完成步骤二的工作,减少测试和前端的沟通成本,减少bug重现的耗时,提高工作效率。

    《前端修bug神器「bug信息收集系统」搭建图解》

项目使用介绍

本项主要用于记录出现bug时程序的运行信息,如ajax请求,自定义收集的参数(如用户账号密码),页面路径,浏览器信息等,给开发改bug提供参考数据,定位问题。工具的方式也很简单,分为如下四个步骤:

  • 当测试发现bug时,点击按钮上报数据

    《前端修bug神器「bug信息收集系统」搭建图解》
    《前端修bug神器「bug信息收集系统」搭建图解》

  • 打开列表,找到刚刚上报数据的对应详情链接

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 测试向开发反馈bug并附上Bug信息对应链接

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 开发通过bug信息了解程序当时运行信息,快速重现或定位问题,修复bug

    《前端修bug神器「bug信息收集系统」搭建图解》

项目特点

前端可独立完成系统部署。

  • 可能很多小伙伴看到数据存储和页面存放,会烦恼,这些后端东西我不懂啊,也不想麻烦后端人员啊。
  • 不用怕,本项目不需要后端编程。数据存储和页面存放我们都通过第三方服务(LeanCloud和github,都是免费的,后续会讲到)来完成,前端可完全独立搭建。而且过程很简单。
  • 整个配置过程半个小时足矣,且不存在坑。

功能简洁

  • 一共就5个函数,一看就会用。

源码简单

  • 源码没有加密
  • 除了数据存储(LeanCloud),不依赖任何第三方插件
  • 源码简单,可针对自己的项目进行定制化改造或扩展

配备源码介绍文档

  • 有兴趣了解背后技术原理的同学可以点击这里,查看源码说明文档

    《前端修bug神器「bug信息收集系统」搭建图解》

LeanCloud配置说明

在系统使用前,我们需要先开通LeanCloud,准备一个数据存储空间

LeanCloud简介

  • LeanCloud就是BaaS服务商的一种,可提供数据存储服务。前端可以通过JS代码简单地操作存储在服务器中的数据。避免了后端知识门槛,避免后端开发的工作。
  • 国内较为流行的BaaS服务商有LeanCloud,Bmob,uncode等
    《前端修bug神器「bug信息收集系统」搭建图解》

注册及基本使用

  • 注册方法很简单,通过github和QQ都绑定注册,不需要认证备案等繁琐过程,注册即可用。

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 注册完成后,点击控制台。

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 点击创建应用,这里我们选择「开发版」即可,开发版是免费的,每日可请求数30,000 次,对于一般的项目测试而言足够了。

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 点击应用,进入详情。注意:由于系统要对新建的项目进行一系列初始化工作,例如创建数据表格等。需要等待3分钟后再进行后续操作。

  • 点击设置-》应用key,记录「App ID」和「App Key」。后续使用LeanCloud功能时需要用到

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 点击创建class,类名设置为bug,默认权限需要勾选为「无限制」,否则部分功能将被限制。(如果担心数据安全性,可以点击这里查看优化方案,在此我们先实现主体功能)

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 点击新创建的class,右侧显示的,就是该类保存的数据表。

    《前端修bug神器「bug信息收集系统」搭建图解》

  • 到此为止,已完成了LeanCloud的配置工作,不需要像数据库那样,定义表,定义每列属性等操作,系统后自行处理。

VUE组件使用说明

设置好LeanCloud,我们就可以使用信息收集的组件了

组件的载入

  • 按常规载入方式即可,点击这里,获取源码
  • 将代码文件夹放入项目中,例如这里放在components文件夹中
  • 在全部VUE中载入组件,如layout组件中
  • 引用 import FrontTool from '@/components/front-tool/front-tool'
  • 注册 components: {FrontTool},
  • 使用 <front-tool/>
    《前端修bug神器「bug信息收集系统」搭建图解》

API介绍

  • 【this.$addCustomData(Object)】 添加自定义数据,即在数据收集时,上报特定的自定义数据,通过key-value方式保存。
  • 【this.$clearCustomData()】 清除自定义数据,该方法将在路由变化时自动被调用,即自定义数据仅在当前路由有效,路由跳转后将自动清空。
  • 【this.$addGlobalData(Object)】添加全局自定义数据,在整个程序中有效,每次上报数据都将携带该信息,可用于保存用户账号密码等全局信息,以便改bug时重新登录该账号,重现问题
  • 【this.$clearGlobalData()】清除全局自定义数据。
  • 以上函数均自动注册到VUE全局函数中,在VUE文件中直接通过this.调用即可
  • 以上函数在生成环境中将会自动失效,不用担心报错,无需特别注释相关代码。

修改配置文件

  • 修改LeanCloud的配置信息,打开front-tool.VUE,找到AV.init, 填入前面记录的 LeanCloud 的「App ID」和「App Key」。
    《前端修bug神器「bug信息收集系统」搭建图解》

  • 修改对应各个环境的域名前缀。若全部都不命中,则自动设置为local本地环境。

    let envObj = {
    dev: '-d.xxx.com', // 开发环境域名前缀
    test: '-t.xxx.com', // 测试环境域名前缀
    pre: '-p.xxx.com', // 预发布环境域名前缀
    prod: '.xxx.com', // 正式环境域名前缀
    }
    

    《前端修bug神器「bug信息收集系统」搭建图解》

运行项目

  • 原页面左下角将出现前端工具按钮
  • 点击弹出菜单 -> 点击上报数据。
  • 重新打开LeanCloud,打开bug类。在右侧,我们可以看到刚刚上传的数据。
    到此,数据上报的部分也已完成,最后剩下的是数据查看部分的配置过程。

bug管理系统配置说明

  • 这部分就更简单了,先点击这里,获取相关代码。
  • av.js是leadCloud插件,VUE.js就是VUE库,bug-list.html是数据列表页面,bug-detail.html是详情页面。
  • 修改bug-list.html及bug-detail.html页面中的LeanCloud配置,同样找到AV.init,填入「App ID」和「App Key」。
  • 将这四个文件放进静态服务器,直接访问bug-list对应链接。即可看到上报的数据列表,点击详情可查看某条数据的详情信息
    《前端修bug神器「bug信息收集系统」搭建图解》
  • 到此,数据查看部分也配置,整个系统也部署完成啦,很简单吧。

github 网站配置

有些同学可能没有自己的静态服务器,没关系,那我们用github也可以做静态服务器

  • 我们先创建一个新项目,项目名不重要。
  • 点击setting,找到GitHub Pages栏(ctrl+f搜索GitHub Pages可快速定位),设置为master分支。
    《前端修bug神器「bug信息收集系统」搭建图解》
  • 回到项目,我们会发现仓库多了个_config.ym文件,这个就是使用github做静态服务器的配置文件。
  • 接下来是常规的操作,克隆,推送,将前面下载的4个文件推到github上。
    《前端修bug神器「bug信息收集系统」搭建图解》
  • 重新打开GitHub Pages栏,打开给出的路径,这个路径访问的就是我们github的仓库,我们在路径上加上/bug-list.html,即可访问数据列表页面。
    《前端修bug神器「bug信息收集系统」搭建图解》
  • Github配置也很方便,就是访问速度有点慢,不定期可能被墙,有时间的同学建议买个云服务器,按流量计费很便宜,每天一毛几毛钱就行。有困难的话,在留言区留言,笔者有空可以写篇文章介绍。

待优化

系统部署完了,已经可以应付一般的项目需求。但本系统还有可进一步优化的地方

  • 数据安全问题,因为LeanCloud的配置信息是明文写在代码中的。而前端代码又是很容易被破解,那有什么办法可以保证数据的安全性的呢?
  • 这个系统不仅可以在测试环境用,在生成环境也可以发挥它的作用的,例如我们可以监听后端返回的接口情况,当返回异常状态码时,主动上报数据。以便定位生成环境上的问题。
  • 除了接口情况,我们还可以收集VUE的报错信息,存储到自定义数据中,收集生产环境的报错信息。
  • 非VUE版本。目前该系统数据收集部分仅做了VUE版本的,后续将开发纯js版本的,让我们在开发非VUE项目时也能使用。
  • 前三个问题的解决方案,请关注后续文章,点击这里查看

完结祝好

《前端修bug神器「bug信息收集系统」搭建图解》

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注