一、监控能做什么？
发现问题，第一时间发现提前预警风险 定位问题，系统复杂，介入排查人员多上下游复杂，提高定位效率 解决问题，直观确认问题解决，避免引发二次问题
二、如何从⽤户感知上监控？
流畅：
APP/PC启动速度、操作反馈、页面跳转都是反应流畅度体验的地方；
手机性能可从硬件监控和软件性能两个维度来划分
动态容器监控、分阶段测速、页面加载时长是常见用来判断软件性能的方法
端到端请求耗时可从网络质量、接入耗时、业务耗时三个维度来划分
网络质量：理应从地区、运营商、网络类型、连接类型等去考虑； 接入耗时：可根据长链接监控来判断性能 业务耗时：从本地业务耗时跟外部依赖耗时多方面来判断，其中本地业务耗时需要考虑到硬件性能（可使用系统监控）、软件性能（可使用性能监控）来判断，而外部依赖耗时则需要考虑到网络耗时（可使用网络监控）、服务性能（可使用RPC/Pass监控）
精准：
精准是指获取到的信息准确度，是用户想要的信息；
可从DNS劫持率、CDN可用性、请求成功率三个维度来划分
判断请求成功率时需要观测网络成功率和业务成功率
本地业务成功率：需根据业务指标和错误异常来判断 外部调用成功率：需根据端到端访问成功率、端到端访问异常数来判断
稳定：
稳定性指用户体验稳定，随时随地都可以用；
可从崩溃日志、异常日志、端到端请求、PV监控、自定义指标来观察稳定性数据
可利用业务指标监控和错误异常监控来判断端到端请求数据
三、前端异常类型
请求异常：
如：静态资源异常、API 异常
JS运行异常：
如：JS异常、自定义异常
环境异常：
如：小程序框架、容器框架异常
业务异常：
如：业务指标异常
四、前端异常采集与定位
1、请求异常采集⽅法-静态资源异常：
借助于error事件，这个事件既可以静态资源加载出错，也可以监听js执行过程中的错误
javascript 代码解读复制代码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事件；
javascript 代码解读复制代码window.addEventListener("unhandledrejection", e => {
//throw，用来抛出一个用户自定义的异常，执行将被停止。
throw e.reason
});
使用Vue.config.errorHandler、react-error-catch捕获异常等；
还有很多其他方法，大家可以多补充交流~
4、 小程序 异常采集方法：
微信小程序生命周期里提供了onError函数，可以通过在onError里收集异常信息；
javascript 代码解读复制代码App({ // 监听错误
onError: function (err) { // 上报错误
wx.request({
url: "https://url", // 自行定义报告服务器
method: "POST",
errMsg: err
})
}
})
使用小程序的实时日志，在小程序管理后台-运维中心-实时日志即可查看异常日志；
五、什么是APM？
APM 的全称是 Application Performance Management（应用性能管理），对关键业务应用进行监测、优化，提高企业应用的可靠性和质量，保证用户得到良好的服务，降低IT总拥有成本。
apm 有什么用？
中台、微服务、云原生架构的流行，应用系统变得越来越难管理，终端用户的一次请求往往需要涉及到多个服务，因此服务性能监控和问题排查就变得异常的复杂。不同的服务可能由不同国家，不同团队，和不同编程语言来实现，服务可能部署在成千上万台服务器，跨越不同机房，不同数据中心。
因此，就需要一个可以帮助理解系统行为、用于分析性能问题的工具，以便发生故障的时候，能够快速定位和解决问题，这就是APM系统。
从用户的角度来说：可以保证为用户提供高质量的服务。 从企业的角度来说：可以为企业降低IT的总成本。
监控 与可观测性的区别？
监控和可观测性是相互依赖的不同概念
监控告诉我们系统的哪些部分是⼯作的，可观测性告诉我们那⾥为什么不⼯作了 可观测性是监控的超集 监控侧重宏观，可观测包括微观能⼒
可观测三大支柱：
1、Metrics（指标）：
指标是在⼀段时间内测量的数值，包括特定属性，例如时间戳、名称、KPI 和值。
与⽇志不同，指标在默认情况下是结构化的，这使得查询和优化存储变得更加容易，能够将它们保留更⻓时间。
2、Logging（日志）：
⽇志是在特定时间发⽣的事件的⽂本记录，包括说明事件发⽣时间。
⽇志有三种格式：纯⽂本、结构化和⼆进制。纯⽂本是最常⻅的，但结构化⽇志⸺包括额外的数据和元数据并且更容易查询⸺正变得越来越流⾏。
当系统出现问题时，⽇志通常也是⾸先查看的地⽅。
3、Tracing（跟踪）：
跟踪表示请求通过分布式系统的端到端旅程，每个跟踪都包含⼀个或多个跨度。
通过查看跟踪，可以通过分布式系统跟踪其进程并确定瓶颈或故障的原因。
六、主流框架介绍：
Sentry（sentry.io/welcome/）：
这是每个前端开发人员都很熟悉的监控工具了，Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。
Sentry 分为服务端和客户端 SDK。
服务端可以直接使用官方提供的在线服务，也可以本地自行搭建； 客户端提供了多种主流语言和框架的支持，例如：React、Angular、Node。同时它可提供了和其他流行服务集成的方案，例如 GitHub、GitLab、bitbuck等。
Webfunny（www.webfunny.cn/）：
支持项目：H5、微信小程序、uni-app
含有监控错误的功能，可以支持千万级别日PV量，可以远程调试、性能分析，也可以docker私有化部署（免费），业务代码加密过，较轻量。
Prometheus（prometheus.io）：
Prometheus 是一套开源的系统监控报警框架，可以算是容器化必备监控软件。
目前很多大厂都在用prometheus ， 主要语言是GO；Prometheus 的生态系统包括多个组件，因此部署非常方便，而这些组件大部分都是可选的。
Elastic（www.elastic.co/cn/）
Elastic功能涵盖监控、日志和数据可视化。
它由 ElasticSearch, Logstash, Kibana 三部分组成。其中，Elasticsearch 负责搜索和分析，Logstash 是日志聚积器，而 Kibana则提供华丽的可视化仪表盘。
国内大数据互联网公司都采用ELK做日志采集。
Skywalking（skywalking.apache.org）
Skywalking是由国内开源爱好者开源并提交到Apache孵化器的产品，支持非侵入式埋点。
是一款基于分布式跟踪的应用程序性能监控系统，主要语言是Java。
Skywalking已经是一个比较完整的APM解决方案了，如果公司体量不是很大，建议使用。
6、open-falcon（open-falcon.org）
小米开源的企业级监控工具，用 Go 语言开发而成，包括小米、滴滴、美团等在内的互联网公司都在使用它，是一款灵活、可扩展并且高性能的监控方案。
主要语言是GO跟Python，用于做服务器端监控是一个不错的选择。
作者：radawn
链接：https://juejin.cn/post/7197075558940622907
加我微信，拉你进前端进阶、面试交流群，互相监督学习进步等！
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的博客 https://github.com/qappleh/Interview，让我们成为长期关系
关注公众号「深圳湾码农」，持续为你推送精选好文，回复「加群」加入面试互助交流群
点一下，代码无 Bug
