这是我参与 8 月更文挑战的第 8 天，活动详情查看： 8月更文挑战
前言
对于前端而言，不管是开发还是生产阶段，异常的捕获和定位都是至关重要的。
开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。
window.onerror
当 JavaScript 运行时错误（包括语法错误）发生时候， window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。加载一个全局的 error 事件处理函数可用于自动收集错误报告。
window.onerror = function(message, source, lineno, colno, error) { }
参数说明：
- message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
- source：发生错误的脚本URL（字符串）
- lineno：发生错误的行号（数字）
- colno：发生错误的列号（数字）
- error：Error 对象
try(){}catch{}
当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}
promise错误
.catch方法在内部也是调用的Promise.prototype.then方法中的reject状态下的方法，也就是calling obj.catch(onRejected)内部calls obj.then(undefined, onRejected)；
它返回了一个失败的promise， 以及返回一个参数作为一个失败理由。值得注意的是这里返回的是一个已定型的promise，这个过程是promise从pending到reject的改变过程。
p.then((val) => console.log('fulfilled:', val))
.catch((err) => console.log('rejected', err));
// 等同于
p.then((val) => console.log('fulfilled:', val))
.then(null, (err) => console.log("rejected:", err));
unhandledrejection
使用Promise编写异步代码时，使用reject来处理错误。有时，开发者通常会忽略这一点，导致一些错误没有得到处理。
一些浏览器(例如Chrome)能够捕获未处理的Promise错误。
window.addEventListener('unhandledrejection', event => {});
跨域错误
如果引用外链不同源的文件，外链不同源js文件报错，onerror只会提示Script error，无法精确到指定文件和行数，可以通过script标签的：
crossorigin="anonymous"
html标签中的src属性的资源服务器也需要开启cors验证，并允许引用页面的域名访问
Access-Control-Allow-Headers:
Origin, X-Requested-With, Content-Type, Accept, Range
Access-Control-Allow-Origin:
*
小结
上面差不多是我对前端代码监控的一些理解，说起来容易，但是一旦在工程化运用，难免需要考虑到兼容性等种种问题，读者可以通过自己的具体情况进行调整，前端代码异常监控对于我们的网站的稳定性起着至关重要的作用。
最后打波小广告，美团校招社招内推，不限部门，不限岗位，不限投递数量，海量hc，快来快来～
