摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。
前端异常监控
如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。主要内容
如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？
Web规范中相关前端异常
异常按照捕获方式分类
异常的捕获方式
日志上报的方式
前端异常类型(Execption) WebIDL和ecma-262中的错误类型
ECMAScript exceptions <==> IDL 的简单异常
当脚本代码运行时发生的错误，会创建Error对象，并将其抛出，除了通用的Error构造函数外，以下是另外几个ECMAScript 2015中定义的错误构造函数。
EvalError eval错误
RangeError 范围错误
ReferenceError 引用错误
TypeError 类型错误
URIError URI错误
SyntaxError 语法错误 (这个错误WebIDL中故意省略，保留给ES解析器使用)
Error 通用错误 （这个错误WebIDL中故意省略，保留给开发者使用使用）
DOMException 最新的DOM规范定义的错误类型集，兼容旧浏览的DOMError接口, 完善和规范化DOM错误类型。
IndexSizeError 索引不在允许的范围内
HierarchyRequestError 节点树层次结构是不正确的。
WrongDocumentError 对象是错误的
InvalidCharacterError 字符串包含无效字符。
NoModificationAllowedError 对象不能被修改。
NotFoundError 对象不能在这里被找到。
NotSupportedError 不支持的操作
InvalidStateError 对象是一个无效的状态。
SyntaxError 字符串不匹配预期的模式
InvalidModificationError 对象不能以这种方式被修改
NamespaceError 操作在XML命名空间内是不被允许的
InvalidAccessError 对象不支持这种操作或参数。
TypeMismatchError 对象的类型不匹配预期的类型。
SecurityError 此操作是不安全的。
NetworkError 发生网络错误
AbortError 操作被中止
URLMismatchError 给定的URL不匹配另一个URL。
QuotaExceededError 已经超过给定配额。
TimeoutError 操作超时。
InvalidNodeTypeError 这个操作的 节点或节点祖先 是不正确的
DataCloneError 对象不能克隆。
前端错误异常按照捕获方式分类[x] 语法错误
[x] 运行时异常
[x] 资源加载异常
img
script
link
audio
video
iframe
...外链资源的DOM元素
[x] 异步请求异常
XMLHttpRequest
fetch
[x] Promise异常
[ ] CSS中资源异常
@font-face
background-image
...暂时无法捕获
前端错误异常的捕获方式
try-catch (ES提供基本的错误捕获语法)
只能捕获同步代码的异常
回调
setTimeout
promise
window.onerror = cb (DOM0)
img
script
link
window.addEventListener("error", cb, true) (DOM2)
window.addEventListener("unhandledrejection", cb) (DOM4)
Promise.then().catch(cb)
封装XMLHttpRequest&fetch | 覆写请求接口对象
try-catch-finally将能引发异常的代码块放到try中，并对应一个响应，然后有异常会被捕获
try {
// 模拟一段可能有错误的代码
throw new Error("会有错误的代码块")
} catch(e){
// 捕获到try中代码块的错误得到一个错误对象e，进行处理分析
report(e)
} finally {
console.log("finally")
}
onerror事件
window.onerror
当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的事件，并执行window.onerror();
但这里有个信息要注意，语法错误会导致出现语法错误的那个脚本块执行失败，所以语法错误会导致当前代码块运行终止，从而导致整个程序运行中断，如果语法错误这个发生在我们的错误监控语句块中，那么我们就什么也监控不到了。
/**
* @description 运行时错误处理器
* @param {string} message 错误信息
* @param {string} source 发生错误的脚本URL
* @param {number} lineno 发生错误的行号
* @param {number} colno 发生错误的列号
* @param {object} error Error对象
*/
function err(message,source,lineno,colno,error) {...}
window.onerror = err
element.onerror
当一项资源（如或
在H5的规定中，只要满足下面俩个条件，是允许获取跨源脚本的错误信息的。
客户端在script标签上增加crossorigin属性；
服务端设置js资源响应头Access-Control-Origin:*（或者是域名）。
扩展阅读 业界已经有的监控平台Sentry开源
阿里的ARMS
fundebug
FrontJS
几个异常监控的问题如何保证大家提交的代码是符合预期的？ 如何了解前端项目的运行是否正常，是否存在错误？
代码质量体系控制和错误监控以及性能分析
如果用户使用网页，发现白屏，现在联系上了你们，你们会向他询问什么信息呢？先想一下为什么会白屏？
我们以用户访问页面的过程为顺序，大致排查一下
用户没打开网络
DNS域名劫持
http劫持
cdn或是其他资源文件访问出错
服务器错误
前端代码错误
前端兼容性问题
用户操作出错
通过以上可能发生错误的环节，我们需要向用户手机一下以下的用户信息
当前的网络状态
运营商
地理位置
访问时间
客户端的版本(如果是通过客户端访问)
系统版本
浏览器信息
设备分辨率
页面的来源
用户的账号信息
通过performance API收集用户各个页面访问流程所消耗的时间
收集用户js代码报错的信息
如果我们使用了脚本代码压缩，然而我们又不想将sourcemap文件发布到线上，我们怎么捕获到错误的具体信息？
CSS文件中也存在引用资源，@font-face, background-image ...等这些请求错误该如何进行错误捕获？
总结
Web规范中相关前端异常
DOM处理异常
ECMAScript处理异常
异常按照捕获方式分类
运行时异常
资源加载异常
异步请求异常
Promise异常
异常的捕获方式
try-catch (ES提供基本的错误捕获语法)
只能捕获同步代码的异常
回调
setTimeout
promise
window.onerror = cb (DOM0)
img
script
link
window.addEventListener("error", cb, true) (DOM2)
window.addEventListener("unhandledrejection", cb) (DOM4)
Promise.then().catch(cb)
封装XMLHttpRequest&fetch | 覆写请求接口对象
注意点：跨源脚本异常的捕获
日志上报的方式
异步请求上报
new img上报 避免跨域问题
扩展阅读
业界已有的异常监控平台
几个跟异常监控有关的问题
==========12月13日修正===========
语法错误的捕获有些特殊，一般情况下，语法错误在开发阶段就会报错，很容易解决。但是如果在上线之后程序运行在不兼容的环境中也可能存在语法错误，引用的外部脚本存在语法错误等情况，我们就可以捕获到一个包含错误信息的错误对象，而不仅仅是“Uncaught SyntaxError: Invalid or unexpected token”
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99137.html
摘要：注解在类上为类提供一个全参的构造方法，加了这个注解后，类中不提供默认构造方法了。这个注解用在类上，使用类中所有带有注解的或者带有修饰的成员变量生成对应的构造方法。 转载请注明原创地址：http://www.54tianzhisheng.cn/2018/01/07/lombok/ showImg(http://ohfk1r827.bkt.clouddn.com/blog/180107/7...
摘要：手动创建执行线程存在以上问题，而线程池就是用来解决这些问题的。线程池详解上面我们已经知道了线程池的作用，而对于这样一个好用，重要的工具，当然已经为我们提供了实现，这也是本篇文章的重点。，线程池一旦空闲超过时间，线程都将被回收。 showImg(https://segmentfault.com/img/remote/1460000018476903); 本文原创地址，我的博客：https...
摘要：如果遇到非常的复杂的匹配，正则表达式的优势就更加明显了。关于正则表达式书写规则，可查看，上面说的很清楚了，我就不贴出来了。替换与正则表达式匹配的子串，并返回替换后的字符串。结语正则表达式并不难，懂了其中的套路之后，一切都变得简单了。 前言 在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个浏览器可以识别的规则，有了这个规则，浏览器就可以帮我们判断...
摘要：但监听器要在事件源上实现接口也就是说，直接用一个类实现和接口是监听不到内对象的变化的。 什么是监听器 监听器就是一个实现特定接口的普通java程序，这个程序专门用于监听另一个java对象的方法调用或属性改变，当被监听对象发生上述事件后，监听器某个方法将立即被执行。。 为什么我们要使用监听器？ 监听器可以用来检测网站的在线人数，统计网站的访问量等等！ 监听器组件 监听器涉及三个组件：事件...
阅读 3535·2021-11-18 13:20
阅读 2688·2021-10-15 09:40
阅读 1712·2021-10-11 10:58
阅读 2063·2021-09-27 13:36
阅读 2534·2021-09-07 10:06
阅读 1828·2021-08-11 11:21
阅读 1406·2019-08-29 17:04
阅读 2061·2019-08-29 14:06
