前端资源文件加载失败_一道不一样的前端架构师最终面试题

来自公众号：前端巅峰

本次写作来源于一次面试，前端架构师岗位，最后面试官临时给我掏出了一道比较少见的面试题 ，终究斩获offer ，虽然这道题并不难，但是考察的东西挺有趣，加上近期有看到前端防御性编程、优雅处理前端错误的文章，于是想起来把这道题写了下来。

这是一个关于前端错误处理的题目，由浅入深

本题答案： xxxx未定义，致命错误，之前无错误捕获处理机制，页面没有跳转到百度

第二个版本：

这里还是比较简单，因为try里面才会捕获错误，一旦抛出错误就会被全局捕获错误的函数捕获  最终输出顺序：    try  抛出错误   全局捕获到错误

加入函数调用版本,问最终打印台输出什么

调用test，执行test,执行完了try同步代码后，执行抛出Error，结束test的函数的调用(只要函数内部抛出错误，就会结束这个函数的调用并且出栈)，全局捕获到的错误，还是‘抛出错误’这个我们自己定义的错误内容,console.log(a)并没有被执行到 

变异版本

这里主要考察的是函数的抛出错误配合finally的执行，我们一直认为，只要函数内部抛出错误，就会结束这个函数调用，立马出栈。所以return和throw new Error不能在一起用，但是finally却还是依然会执行。finally，顾名思义，最后都会执行

> finally 语句在 try 和 catch 之后无论有无异常都会执行。

加入webpack工程化构建的变异版本，选中此html为模板，问， 如果其他通过webpack构建的文件发生了致命错误，例如因为做了tree sharking，没有兼容低版本浏览器，此时可以捕获到全局错误吗

答案是不可以捕获到，因为经过webpack打包后，代码会变成

如果此时其他模块发生了致命错误，例如const这种代码跑在IE6中，那么就会直接致命错误，阻断浏览器解析代码，页面挂掉。js引擎也不会去解析下面的代码～ 还没有运行到window.onerror这里就挂了 

上面只是一个比较简单的面试题，考察错误处理能力，后面是结合React的错误边界，资源请求错误，ajax请求错误等的处理来口述,这里可能需要你平时对这些东西有比较多了解和实践才能hold住

window.onerror与window.addEventListener('error')捕获js运行时错误

使用window.onerror和window.addEventListener('error')都能捕获，但是window.onerror含有详细的error堆栈信息，存在error.stack中，所以我们选择使用onerror的方式对js运行时错误进行捕获。

资源加载错误使用addEventListener去监听error事件捕获

实现原理：当一项资源(如或