持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

前言

身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人

开开心心学技术大法~~

来了来了，他真的来了~

正文

前端监控skd小结

埋点监控

成熟的系统往往需要埋点数据的支持，以便更好的利用流量。

通过img发送

通过内部new一个Image标签，然后直接将埋点请求+参数拼接到Image的src属性上即可。

src也是有讲究的，因为img的src一定要指定一个已有的资源，所以建议用一个1 * 1的透明gif来作为请求资源。

1 * 1足够小
透明保持图片信息小
gif在图片中本身就是体积更小的

通过sendBeacon发送

sendBeacon是navigator上的属性，因为依赖于浏览器自身的api，所以会有一些兼容问题。

使用时

navigator.sendBeacon(url,data);

优缺点比较

img的src请求会作为一般请求来进行处理，会占用业务请求通道。
sendBeacon兼容性不太好，但是可以闲暇时发送埋点请求。
所以建议支持sendBeacon的可以使用sendBeacon，然后用img的方案兜底

性能监控

通过window.performance来做页面的性能时间统计，然后依然可以采用埋点监控那一套发送请求。

      dns: timing.domainLookupEnd - timing.domainLookupStart, // DNS 查询耗时

      tcp: timing.connectEnd - timing.connectStart, // TCP建立连接时间
      ssl:
        timing.secureConnectionStart > 0
          ? timing.connectEnd - timing.secureConnectionStart
          : 0, // TLS时间

      ttfb: timing.responseStart - timing.requestStart, // request 耗时 Time to First Byte (TTFB)
      download: timing.responseEnd - timing.responseStart, // response结束 耗时 Response time only (download)

      /* dom相关 */
      domLoading: timing.domLoading - timing.navigationStart, // 浏览器开始解析dom时间

      /* 总时间 */
      fst: timing.domContentLoadedEventStart - timing.navigationStart, // 首屏时间

      domComplete: timing.domComplete - timing.navigationStart, // dom解析完成，并且dom内所有内嵌资源也加载完成

      load: timing.loadEventEnd - timing.navigationStart // 加载时间

报错监控

监听onerror事件

此类事件为代码中的正常报错，比如语法错误，资源加载失败等

window.addEventListener('error', onError, true);

其中onError是你上传错误的方法

监听unhandledrejection事件

此类事件针对的是promise的reject事件，换言之就是promise内部有报错，但是没有通过catch或reject捕获。

W.addEventListener('unhandledrejection', onUnhandledrejection, true);

小程序埋点可以走web端那一套，性能监控和报错监控用小程序自带的api即可，道理都是一样的。

结语

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

前端监控SDK小结

前言

正文