英文：mknichel 译文：Jocs https://github.com/Jocs/jocs.github.io/issues/1
本文主要摘抄自：https://juejin.cn/post/7172072612430872584#heading-10，主要用来记录和学习，也推荐大家看看原博主的文章。
前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。
对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。
开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。
随着前端页面承载功能越来越多，用户本地浏览器环境也错综复杂，因此即使有完善的测试，我们也无法保证上线的代码不会出错。在这种场景下，前端页面的监控就成了各个web项目必备的工具。
本次写作来源于一次面试，前端架构师岗位，最后面试官临时给我掏出了一道比较少见的面试题 ，终究斩获offer ，虽然这道题并不难，但是考察的东西挺有趣，加上近期有看到前端防御性编程、优雅处理前端错误的文章，于是想起来把这道题写了下来。
JavaScript代码在用户浏览器中执行时，由于一些边界情况、本地环境的不可控等因素，可能会存在js运行时错误。
在前端的开发工作当中，我们对于异常的处理可能关注的不是太多，因为js有基本的异常处理能力，很多错误会直接抛出来，打开控制台就能看到。但是如果因为异常导致网站卡死，甚至崩溃无法继续进行下去，对于用户的体验是相当差的，我们应该及时的捕获这些异常，对用户进行一些简要的温馨提示，并将异常进行及时的上报，以便于快速解决。
在当今的互联网时代，web开发越来越受到重视，网页能实现的功能也越来多，之前只能在客户端上运行的程序，也逐渐转到网页上，面对成千上万的用户，出现错误的概率也是越来大。项目上线前期的粒度较大的错误我们都会在自测和QA测试中发现，然而上线之后的错误就不是那么好发现。同时移动端的开发也面临着一个问题就是不好调试，所以web开发的错误监控是一个非常有用的措施。前端的错误监控有哪些方法呢。
你以为这种错误很少吗，就我们团队就这种bug就出现好多次，被大佬骂惨了，看看我们现在线上监控到的错误
但是onerror事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等)，例如img标签下图片url 404 网络请求异常的时候，onerror无法捕获到异常，此时需要监听unhandledrejection。
以 init 为程序的入口，代码中所有同步执行出现的错误都会被捕获，这种方式也可以很好的避免程序刚跑起来就挂。
1. 定义window.onerror全局事件函数 window.onerror = function(message, source, lineno, colno, error) { ... } / * * message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。 * source：发生错误的脚本URL（字符串） * lineno：发生错误的行号（数字） * colno：发生错误的列号（数字） * error：Error对象 */ 是一个全局变
JavaScript的异常主要使用try catch finally语句以及窗口对象window的onerror事件来捕获。
运行以上程序，在右侧第二个窗口中执行了 /error 路由，因为没有定义 a 这个对象，则会引发错误。
这篇文章是我的好朋友广胤所写，里面记录了我们2018年探索的前端监控体系的历程，由于在建设完后的我离职了，后续也没有继续能和广胤一起更进一步的探索，还是有一些些遗憾。还记得我第一次进入「兑吧」的时候，我就在简历里描述了错误监控之类的项目，其实当时我并没有在一个公司进行过实践，这大概是之前在网易的时候，闲来没事，进行的自我探索。然后进入「兑吧」后，没想到当时公司正好缺少这一块的基建，于是 TL 就让我和广胤负责了这块项目，也是这次经历让我从实习阶段就正式踏入了前端基础建设的道路，还是非常感谢这一次的机会，让我从单一的业务开发人员，转化到了结构型开发人员。记得在开发的项目的那一个月中，除了吃饭，或者和广胤讨论项目的进度问题，近乎一种忘我的开发状态。
在我司线上运行的是近亿级别的广告页面，这样线上如果裸奔，出现了什么问题不知道，后置在业务端发现，被业务方询问，这种场景很尴尬。
bug是不可能被全部测试出来的，由于成本和上线档期的考虑，测试无法做到“面面俱到”，即使时间充裕也总会有这样或那样的bug埋藏在某个角落。
1. 业界案例 目前前端性能监控系统大致为分两类：以GA为代表的代码监控和以webpagetest为代表的工具监控。 代码监控依托于js代码并部署到需监控的页面，手动计算时间差或者使用浏览器的的API进行数据统计。 影响代码监控数据的因素有以下几种： 浏览器渲染机制； 浏览器对API的实现程度，比如performance API； 工具监控不用将统计代码部署到页面中，一般依托于虚拟机。以webpageTest为例，输入需统计的url并且选择运行次url的浏览器版本，webpageTest后台虚拟机对url进
由于浏览器可以渲染DOM，JS也可以修改DOM结构，未避免冲突，JS执行的时候，浏览器DOM渲染会停止。 两段JS不能同时执行。
相比express的保守，koa则相对激进，目前Node Stable已经是v7.10.0了，async&await是在v7.6加入豪华午餐的，这么好的东西必须用起来
这是第 89 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队 关注我们吧～ 本文首发于政采云前端团队博客：前端异常的捕获与处理 https://www.zoo.team/arti
``` javascript的出错我们应该都很熟悉，例如`xxx undefined`,`SyntaxError`等。 我们team将出现错误的javascript代码取名为badjs，也有一个
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错，报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现，用真机又会出现，不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案，这是github上关于这个问题的讨论： Loading chunk {n} failed #742，虽然最后还是不了了之，但是大家可以参考一下。
作者：vienwu 随便写点啥，不然要被k。。 javascript 的出错我们应该都很熟悉，例如xxx undefined,SyntaxError等。 我们 team 将出现错误的 javascri
自 HTML5 标准正式发布之后，其得天独厚的跨平台特性吸引了众多开发者的目光。 伴随着 HTML5 的发展，JavaScript 的重要性也在逐步增加，要说现在哪门语言最火的话，那一定是 JavaScript 了。 学了JavaScript 成为全栈工程师，迎娶白富美，步入人生巅峰，想想也是醉了。 但有个问题：很多开发者却并未考虑过收集 JavaScript 出错时抛出的异常信息。因为只要 JavaScript 异常后 App 不会崩溃，当没有发生过就好了。 或许，在浏览器时代，让用户刷新下页面，可以
function define(){ ... } var a = define; define = function(){ try{ a.apply(this,arguments); }catch(e){ ...错误上报 } };
☞ 收集日志的方法 平时收集日志的手段，可以归类为两个方面，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径，暴力式获取错误信息，如 try..catch 和 window.onerror。 1. 主动判断 我们在一些运算之后，得到一个期望的结果，然而结果不是我们想要的 // test.js function calc(){ // code... return val; } if(calc() !== "someVal"){ Reporter.send({ positi
常常会苦恼，平常做的项目很普通，没啥亮点；面试中也经常会被问到：做过哪些亮点项目吗？
随着网页项目越来越复杂，许多异常报错很难在开发和测试阶段被发现，尽管你可能避开了语法等常规错误，但不可避免的是代码在运行时的错误你仍旧无法准确预料，假设现在有如下一段 Vue 代码，它在生命周期的 created 阶段异步请求并接收了错误的数据，可能就会导致页面渲染出现错误：
https://juejin.cn/post/6966432934756794405
前言 开发者有时会面临上线的生产环境包出现了异常? ，在长期生产bug并修复bug的循环中总结出一下几个痛点： 无法快速定位到发生错误的代码位置，因为脚手架构建时会用webapck自动帮我们压缩代码
https://juejin.cn/post/6965022635470110733
随着业务的快速发展，我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层，前端的表现是否可靠、稳定、好用，很大程度上决定着用户对整个产品的体验和感受。因此，对于前端的监控不容忽视。
监控这个词对于前端，个人觉得有三个定义，分别是“性能监控”、“异常监控”、“数据监控” 性能监控则是针对web应用的性能，涉及包括用户体验、用户交互时间等 异常监控则是指Web应用得不到预期效果结果的情况监控 数据监控则是获取用户使用过程的行为数据反馈 1.性能监控 性能监控可以让我们更好的监控当前应用的性能情况，然后对性能情况反馈去做优化，性能会影响到用户体验，而常见的性能指标我们能通过浏览器Performance里面看到 1.1 Performace 允许访问当前页面性能相关的信息，perf
err指代 error 对象，info是一个 Vue 特有的字符串，vm指代 Vue 应用本身。记住在一个页面你可以有多个 Vue 应用。这个 error Handler 作用到所有的应用。
我们的开发过程中并不总是一帆风顺。特别是在某些情况下，我们可能希望停止程序或在发生不良情况时通知用户。
app组件加载异常监控 软件异常监控常常直接关联到软件本身的质量，完备的异常监控体系常常能够快速定位到软件运行中发生的问题，并能帮助我们快速定位异常的源头，提升软件质量。在服务端的话，可以通过tomcat日志查看定位，在native开发的app中我们也可以通过各种异常监控工具去监控，但是对于混合开发的app来说，通过上面的方式就不那么容易做到了。通常混合开发的app通过webview本地加载html、js、css，如果发生错误，应该怎样去捕获并传送给服务器呢？前端错误日志传送给服务器很简单，在异常发生
脚本错误主要有两类：语法错误、运行时错误。监控的方式主要有两种：try-catch、window.onerror。
是指用户在使用应用时，无法得到预期的结果。不同的异常带来的后果程度不同，轻则引起用户使用不悦，重则导致产品无法使用，从而使用户丧失对产品的认可。
感兴趣的读者可以点击阅读。 其他源码计划中的有：express、vue-rotuer、redux、 react-redux 等源码，不知何时能写完（哭泣），欢迎持续关注我（若川）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
