小程序错误统计

node
,

目的

解决线上报错难以归类、查找的问题，根据每位同学负责的项目的不同，单独分类并解决 bug，提升用户体验，以及小程序的评分等；

基本思路

抓取微信后台报错=>根据不同的人负责项目的不同分别统计=>生成 excel=>上传到飞书文档

技术栈

node（superagent、xlsx）+ 飞书文档

开发流程

  • 选择页面里面的运维中心=>错误查询选项；

  • 页面长这样，我们可以选择里面日期，版本，类型等条件进行查询；

  • 然后打开 chrome 的控制台，点击查询按钮, 我们可以看到请求了一个接口，这个接口微信用于查询错误的接口了，也是我们要用的接口

  • 下面我们要做的就是把上边所有的请求头参数粘贴出来拟微信请求了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const superagent = require("superagent");

const configs = {
  Accept: "application/json, text/plain,",
  "Accept-Encoding": "gzip, deflate, br",
  "Accept-Language": "zh-CN,zh;q=0.9",
  Connection: "keep-alive",
  "Content-Length": "96",
  "Content-Type": "application/x-www-form-urlencoded",
  Cookie: "xxxxxxxxxxx",
  Host: "mp.weixin.qq.com",
  Origin: "https://mp.weixin.qq.com",
  Referer: "https://mp.weixin.qq.com/wxamp/wxaalarm/get_jserr?token=730361255&lang=zh_CN",
  "Sec-Fetch-Dest": "empty",
  "Sec-Fetch-Mode": "cors",
  "Sec-Fetch-Site": "same-origin",
  "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36",
};
async function runBug(pageNum = 1) {
  const res = await superagent
    .post(`https://mp.weixin.qq.com/wxamp/cgi/route?path=xxx&token=xxx&lang=zh_CN&random=${Math.random()}`)
    // 请求所携带的参数
    // start_time 开始时间
    // end_time 结束时间
    // start 页数时间
    // limit 每页条数
    .send({ errmsg_keyword: "", type: 1, client_version: "", start_time: process.argv[2], end_time: process.argv[3], start: pageNum, limit: 5 })
    .set("Cookie", configs["Cookie"])
    .set("Host", configs["Host"])
    .set("Origin", configs["Origin"])
    .set("Sec-Fetch-Dest", configs["Sec-Fetch-Dest"])
    .set("Sec-Fetch-Mode", configs["Sec-Fetch-Mode"])
    .set("Sec-Fetch-Site", configs["Sec-Fetch-Site"])
    .set("User-Agent", configs["User-Agent"])
    .set("Accept", configs["Accept"])
    .set("Accept-Encoding", configs["Accept-Encoding"])
    .set("Accept-Language", configs["Accept-Language"])
    .set("Connection", configs["Connection"])
    .set("Content-Length", configs["Content-Length"])
    .set("Content-Type", configs["Content-Type"])
    .set("Referer", configs["Referer"]);

  console.log(res);
}
  • 然后可以看到接口请求成功了！

  • 接下来要做的就是根据每位同学负责的项目单独查找报错信息，并生成 excel（每位同学一个 sheet,如果某个报错不属于任何一个人的话，直接放到其他中）,这里就使用到了xlsx了，根绝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const XLSX = require("xlsx");

//excel里的sheet第一行
const basic = ["时间", "客户端版本", "小程序版本", "版本错误次数", "总错误次数", "错误内容", "备注（有特殊情况的，说明具体原因！）"];

const member = {
  a: {
    pages: ["pages/a1", "pages/a2"], // 页面路由
    result: [basic], // 匹配集合
  },
  b: {
    pages: ["pages/b1", "pages/b2"],
    result: [basic]
  }
  其他: { result: [basic] },
};

async function runBug(pageNum = 1) {
  let res = 接口返回的数据
  if (res.body.results && res.body.results.length) {
    // 遍历报错信息集合
    results: for (let i = 0; i < res.body.results.length; i++) {
      // 遍历成员集合
      for (let w = 0; w < memberKey.length - 1; w++) {
        // 遍历成员的路由
        for (let v = 0; v < member[memberKey[w]].pages.length; v++) {
          // 判断报错信息与成员负责的页面路由是否匹配
          if (res.body.results[i].errmsg.indexOf(member[memberKey[w]].pages[v]) >= 0) {
            member[memberKey[w]].result.push([format(res.body.results[i].time), res.body.results[i].client_version, res.body.results[i].app_version, res.body.results[i].version_error_cnt, res.body.results[i].total_error_cnt, res.body.results[i].errmsg]);
            continue results;
          }
        }
      }
      // 没有匹配上任何成员的路由，则默认放到“其他”sheet下面，统一管理
      member["其他"].result.push([format(res.body.results[i].time), res.body.results[i].client_version, res.body.results[i].app_version, res.body.results[i].version_error_cnt, res.body.results[i].total_error_cnt, res.body.results[i].errmsg], "");
    }
    runBug(++pageNum); // 当前页面查询完毕，接着查询下一页，直到没有内容位置
  } else {
      let wb = XLSX.utils.book_new();
      for (let i = 0; i < memberKey.length; i++) {
        const ws = XLSX.utils.aoa_to_sheet(member[memberKey[i]].result);
        XLSX.utils.book_append_sheet(wb, ws, memberKey[i]);
      }
      await XLSX.writeFile(wb, `${format(+process.argv[2]) + "-" + format(+process.argv[3]) + "错误统计"}.xlsx`); // 生成excel文件到当前目录中
    }
}
  • 然后我们打开 excel，这就是我们想要的

部署

  • 目前的开发设计在本地，发给每个人去更改，然后在反馈统计，显然是不太合理;我想要的是多人在线协作更改，实时反馈，目前有两个解决方案；
    • 1、通过飞书开放平台提供的api上传(不过目前公司搭建的飞书服务这个方法不能使用了，我也不知道为啥~~)
    • 2、通过飞书客户端手动上传，此方法简单直接点击选择就行了

  • 上传后，结构是乱的，我们需要手动转为在线表格才行

  • 这样就是我们最终想要的最终结果啦~