前端链路追踪与监控

• 作为一个前端开发，我们怎么保证我们的应用处于一个可安全可靠的状态，了解应用的运行状态、问题的排查等，是整个开发过程中很重要的一环,作为一个开发同学，本文将介绍自己在有限的开发经历中，关于前端链路追踪和性能监控过程中的经验！

前置预备知识准备

• 业界参考典范: https://juejin.cn/post/7195496297150709821;
• 监控elk套件: https://www.elastic.co/cn/what-is/elk-stack;
• 前端埋点: https://cloud.tencent.com/developer/article/1887830;
• uuid: https://en.wikipedia.org/wiki/Universally_unique_identifier;
• session-id: https://en.wikipedia.org/wiki/Session_ID;
• rr-web: https://www.rrweb.io/
• 参考实践: https://cloud.tencent.com/developer/article/1983779;
• FCP,LCP计算: fp: https://wukongdoc.tingyun.com/browser/metric/FCP.html;
  lcp: https://wukongdoc.tingyun.com/browser/metric/LCP.html;

具体实践

app接入elk套件

• 通常我们在“大厂”中开发app应用，会有很多中台组提供基础服务，比如监控方面的elk能力的快速接入。一般来说通常是，通过关联前端部署机器的nginx的日志或者将前端部署的容器镜像关联一些基础监控组件，从而将nginx日志上报到监控中台，其实服务端的项目也是类似，通过在关键的代码位置调用了一些基础的sdk能力，来实现日志的上报，因而实现在一个elastic-search中一个trace-id即可串联起一个请求调用中的所有日志，从而实现快速定位某个具体请求的问题！

巧用elastic-search和kibana

• 参考资源: https://www.elastic.co/guide/en/elasticsearch/reference/6.8/query-dsl-query-string-query.html#query-string-syntaxhttps://developer.aliyun.com/article/1135069
  http://www.tlcement.com/40230.html
• 多个条件+ 模糊查询,eg1: uid:"25610" && req_url: *create
• eg2: uid:"25610" && req_url: order

日志查询基本套路

• 核心思路: session-id + trace-id;
• 通常来说，每次前端页面在初始化时，会创建一个session-id，这个id可以通过uuid的机制来创建，可以挂在window的全局变量上，然后在浏览器的每个请求都会附带上这个sessionId, 所以在这个页面打开过程中的所有请求都会附带上这个session-id,后续可以通过这个session-id通过kibana来检索出这个页面使用中所有的请求；

备注: uuid的常见生成策略: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid;

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

console.log(uuidv4());

• 对于每一个http的请求，通常来说，在response-header中，会附带会trace-id这个字段，我理解这个字段的使用场景主要是在: 当前端的请求结果不符合预期时，可以把这个trace-id给后端同学，后端通过同学可以在kibana上通过这个trace-id来检索日志，这个trace-id会把这个请求调用链路中的所有打下的日志检索出来，通常后端同学会在收集错误的关键地方，调用封装好的公共函数来打日志，来存储报错信息，然后辅助在查trace-id时，快速定位到问题原因；
• 一些小技巧: session-id和trace-id可以结合起来用，我们在知道session-id，可以检索出这个过程中的所有trace-id; 在知道一个trace-id时，可以检索出这个请求附带的session-id，从而检索出上下文的所有请求，来辅助定位原因；通过kibana，在知道用户的某些信息，比如某些页面上会附带上用户的用户名信息，可以结合上reference、访问时候、特定请求，从而快速捞出特定的一些请求，来缩小范围；

app监控

• 行为统计；
• 性能监控；

app监控录制

• rrweb: https://zhuanlan.zhihu.com/p/622591441;