只用一行代码快速收集H5聊天用户体验数据——附赠告警机器人

之前的WEB项目一直缺少一种通用的前端埋点方案，用来收集用户体验的指标，苦于没有方便的手段。

要么要对系统做较多的改动，但是怕影响系统稳定性，一直没有动；

要么用百度分析，谷歌分析等，但是系统大多运行于内部网络，无法观测前端应用，即使可以连外网，也需要把这些数据掌握到自己手中，便于内部进行分析。

最近新做的H5即时聊天项目，后端使用Skywalking来进行调用链追踪分析，一般认为它只用来观测后端服务，比如调用链分析，接口性能，数据库性能，内存使用情况等。

但是查看Skywalking8.2.0发现新增了一些特性，可以用来直接观测前端页面性能，前端的渲染速度，前端请求后端接口报错信息（ajax XMLHttpRequest ，fetch， Axios, SuperAgent, OpenApi等），这些信息是获取最终用户体验的最有效指标。

甚至PV（page views，页面浏览量），UV（unique visitors，独立访客数），浏览量前 N 的页面（Top N Page Views）等指标。这些数据可以为产品队伍优化他们的产品提供线索。

突然眼前一亮，这正是我们需要的啊！集成简单，自带页面展示，对于后端来说简直是幸福照进了脑壳壳！

#安装浏览器埋点组件
npm install skywalking-client-js --save-dev
import ClientMonitor from 'skywalking-client-js';
// 报告数据到 `http:// + window.location.host + /browser/perfData` 
ClientMonitor.register({
  //collector是后端skywalking-aop地址，这里需要考虑跨域问题，最好用代理屏蔽
  collector: 'http://127.0.0.1:12800',
  service: 'test-ui',
  pagePath: location.href,
  enableSPA: true, //单页应用
  vue: Vue, //报告vue报错信息
  serviceVersion: 'v1.0.0',
});

集成就这么简单，然后刷一刷页面，在skywalking-ui中查看吧。

需要注意两点：

另外，送个彩蛋，Skywalking8.2.0的alarm报警系统原生支持发送消息到企业微信，钉钉。

只要配置alarm-settings.yml中的webhook即可，这里需要在企业微信或者钉钉中创建组织，然后增加群助手，自定义机器人。这样就可以及时告警了！！

这里以钉钉为例，创建组织后，进入群设置->群助手->添加机器人->自定义机器人，即可生成webhook地址，重要的是这都是免费的！！免费的！！免费的！！

还有其他你感兴趣的机器人，比如github机器人，gitlab机器人，如果你做devops自动化集成，通过此机器人，可以把devops你关心的动作都通知到钉钉群中。一个钉钉群可以添加N个群助手机器人呢！！！