浅谈监控异常采集

大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

原文链接: https://juejin.cn/post/7197075558940622907
作者：radawn

一、监控能做什么？

• 发现问题，第一时间发现提前预警风险

• 定位问题，系统复杂，介入排查人员多上下游复杂，提高定位效率

• 解决问题，直观确认问题解决，避免引发二次问题

二、如何从⽤户感知上监控？

1. 流畅：

APP/PC启动速度、操作反馈、页面跳转都是反应流畅度体验的地方；

手机性能可从硬件监控和软件性能两个维度来划分

动态容器监控、分阶段测速、页面加载时长是常见用来判断软件性能的方法

端到端请求耗时可从网络质量、接入耗时、业务耗时三个维度来划分

• 网络质量：理应从地区、运营商、网络类型、连接类型等去考虑；

• 接入耗时：可根据长链接监控来判断性能

• 业务耗时：从本地业务耗时跟外部依赖耗时多方面来判断，其中本地业务耗时需要考虑到硬件性能（可使用系统监控）、软件性能（可使用性能监控）来判断，而外部依赖耗时则需要考虑到网络耗时（可使用网络监控）、服务性能（可使用RPC/Pass监控）

1. 精准：

精准是指获取到的信息准确度，是用户想要的信息；

可从DNS劫持率、CDN可用性、请求成功率三个维度来划分

判断请求成功率时需要观测网络成功率和业务成功率

• 本地业务成功率：需根据业务指标和错误异常来判断

• 外部调用成功率：需根据端到端访问成功率、端到端访问异常数来判断

1. 稳定：

稳定性指用户体验稳定，随时随地都可以用；

可从崩溃日志、异常日志、端到端请求、PV监控、自定义指标来观察稳定性数据

可利用业务指标监控和错误异常监控来判断端到端请求数据

三、前端异常类型

1. 请求异常：

如：静态资源异常、API 异常

1. JS运行异常：

如：JS异常、自定义异常

1. 环境异常：

如：小程序框架、容器框架异常

1. 业务异常：

如：业务指标异常

四、前端异常采集与定位

1、请求异常采集⽅法-静态资源异常：

借助于error事件，这个事件既可以静态资源加载出错，也可以监听js执行过程中的错误

window.addEventListener('error', (err) => {

  // 说明是资源加载报错

  if (err.target && (err.target.src || err.target.href)) {

    const log = {

      type: 'resourceError',

      fileName:  err.target.src || err.target.href, // 哪个资源加载出错

      tagName: err.target.tagName

    }

    console.log(log) // 进行上报

  } else {

    // js 执行报错

  }

}, true)

2、Ajax 请求原理与采集方法：

创建一个XMLHttpRequest对象，通过XMLHttpRequest向服务器发送请求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返回的时候才调用callback()函数，对响应数据进行处理。

XMLHttpRequest是ajax的核心机制，它是IE5中首先引入的，是一种支持异步请求的技术。

• 自动化测试工具chromedriver进行采集

• 通过抓包找到网页发送Ajax发送请求并返回的数据

3、 JS 异常采集⽅法：

• 可使用sentry进行监控，sentry在异常错误捕获会通过onError和onunhandledrejection

(点我了解unhandledrejection¹)两个方法进行监听；

• try/catch，Js中处理异常的一种模式，try用于可能会发生错误的代码，catch对错误的处理；

• Promise异常捕获，使用unhandledrejection事件；

window.addEventListener("unhandledrejection", e => {

//throw，用来抛出一个用户自定义的异常，执行将被停止。

  throw e.reason

});

• 使用Vue.config.errorHandler、react-error-catch捕获异常等；

还有很多其他方法，大家可以多补充交流~

4、 小程序 异常采集方法：

• 微信小程序生命周期里提供了onError函数，可以通过在onError里收集异常信息；

App({ // 监听错误 

  onError: function (err) { // 上报错误 

    wx.request({

     url: "https://url", // 自行定义报告服务器 

     method: "POST", 

     errMsg: err 

    }) 

  } 

})

• 使用小程序的实时日志，在小程序管理后台-运维中心-实时日志即可查看异常日志；

五、什么是APM？

APM 的全称是 Application Performance Management（应用性能管理），对关键业务应用进行监测、优化，提高企业应用的可靠性和质量，保证用户得到良好的服务，降低IT总拥有成本。

apm 有什么用？

中台、微服务、云原生架构的流行，应用系统变得越来越难管理，终端用户的一次请求往往需要涉及到多个服务，因此服务性能监控和问题排查就变得异常的复杂。不同的服务可能由不同国家，不同团队，和不同编程语言来实现，服务可能部署在成千上万台服务器，跨越不同机房，不同数据中心。

因此，就需要一个可以帮助理解系统行为、用于分析性能问题的工具，以便发生故障的时候，能够快速定位和解决问题，这就是APM系统。

1. 从用户的角度来说：可以保证为用户提供高质量的服务。

2. 从企业的角度来说：可以为企业降低IT的总成本。

监控 与可观测性的区别？

监控和可观测性是相互依赖的不同概念

1. 监控告诉我们系统的哪些部分是⼯作的，可观测性告诉我们那⾥为什么不⼯作了

2. 可观测性是监控的超集

3. 监控侧重宏观，可观测包括微观能⼒

可观测三大支柱：

1、Metrics（指标）：

指标是在⼀段时间内测量的数值，包括特定属性，例如时间戳、名称、KPI 和值。

与⽇志不同，指标在默认情况下是结构化的，这使得查询和优化存储变得更加容易，能够将它们保留更⻓时间。

2、Logging（日志）：

⽇志是在特定时间发⽣的事件的⽂本记录，包括说明事件发⽣时间。

⽇志有三种格式：纯⽂本、结构化和⼆进制。纯⽂本是最常⻅的，但结构化⽇志⸺包括额外的数据和元数据并且更容易查询⸺正变得越来越流⾏。

当系统出现问题时，⽇志通常也是⾸先查看的地⽅。

3、Tracing（跟踪）：

跟踪表示请求通过分布式系统的端到端旅程，每个跟踪都包含⼀个或多个跨度。

通过查看跟踪，可以通过分布式系统跟踪其进程并确定瓶颈或故障的原因。

六、主流框架介绍：

1. Sentry（sentry.io/welcome/）：²

这是每个前端开发人员都很熟悉的监控工具了，Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。

Sentry 分为服务端和客户端 SDK。

• 服务端可以直接使用官方提供的在线服务，也可以本地自行搭建；

• 客户端提供了多种主流语言和框架的支持，例如：React、Angular、Node。同时它可提供了和其他流行服务集成的方案，例如 GitHub、GitLab、bitbuck等。

1. Webfunny（www.webfunny.cn/）：³

支持项目：H5、微信小程序、uni-app

含有监控错误的功能，可以支持千万级别日PV量，可以远程调试、性能分析，也可以docker私有化部署（免费），业务代码加密过，较轻量。

1. Prometheus（prometheus.io）：⁴

Prometheus 是一套开源的系统监控报警框架，可以算是容器化必备监控软件。

目前很多大厂都在用prometheus ， 主要语言是GO；Prometheus 的生态系统包括多个组件，因此部署非常方便，而这些组件大部分都是可选的。

1. Elastic（www.elastic.co/cn/）⁵

Elastic功能涵盖监控、日志和数据可视化。

它由 ElasticSearch, Logstash, Kibana 三部分组成。其中，Elasticsearch 负责搜索和分析，Logstash 是日志聚积器，而 Kibana则提供华丽的可视化仪表盘。

国内大数据互联网公司都采用ELK做日志采集。

1. Skywalking（skywalking.apache.org）⁶/ "https://skywalking.apache.org%EF%BC%89")

Skywalking是由国内开源爱好者开源并提交到Apache孵化器的产品，支持非侵入式埋点。

是一款基于分布式跟踪的应用程序性能监控系统，主要语言是Java。

Skywalking已经是一个比较完整的APM解决方案了，如果公司体量不是很大，建议使用。

6、open-falcon（open-falcon.org）⁷/ "http://open-falcon.org%EF%BC%89")

小米开源的企业级监控工具，用 Go 语言开发而成，包括小米、滴滴、美团等在内的互联网公司都在使用它，是一款灵活、可扩展并且高性能的监控方案。

主要语言是GO跟Python，用于做服务器端监控是一个不错的选择。

参考资料

[1]

点我了解unhandledrejection:https://developer.mozilla.org/zh-CN/docs/web/api/window/unhandledrejection_event

[2]

sentry.io/welcome/）：:https://sentry.io/welcome/%EF%BC%89%EF%BC%9A

[3]

www.webfunny.cn/）：:https://www.webfunny.cn/%EF%BC%89%EF%BC%9A

[4]

prometheus.io）：:https://prometheus.io%EF%BC%89%EF%BC%9A

[5]

www.elastic.co/cn/）:https://www.elastic.co/cn/%EF%BC%89

[6]

skywalking.apache.org）:https://skywalking.apache.org

[7]

open-falcon.org）:http://open-falcon.org

Node 社群



我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍