随着项目的复杂度日益增加，我们时常会遇到各种难以预料的异常和错误。特别是在前端开发中，尽管我们竭力避免语法错误和常规逻辑错误，但仍无法确保代码在运行时的每一刻都能完美无缺。假设我们现在面对的是一段Vue代码，它在生命周期的created阶段进行异步请求并可能因接收错误数据而导致页面渲染出错。
当测试人员发现这类错误时，他们通常会查看控制台以确定问题的根源。对于真正的项目，可能会遇到更多“奇妙”的问题，特别是当错误仅在特定用户端出现时。我们需要在程序中处理捕获运行时错误，将错误上报至服务器，以便后续分析和改进代码。
作为前端开发者的一门必修课，学习如何应对并处理可能发生的错误变得尤为重要。我们可以在每个代码片段中重复编写try...catch...语句，为每个Promise都处理catch，但这会使得代码显得冗余和混乱。我们需要思考是否有更优雅的方式，能够在全局范围内统一处理所有异常。
实际上，在Vue中实现这样的全局异常处理并不困难。Vue的全局配置中提供了一个errorHandler处理钩子，可以轻松捕获大部分Vue应用中的错误。无论是组件生命周期中的错误、自定义事件处理函数内部的错误，还是v-on DOM器内部抛出的错误，都可以通过这个钩子来处理。
为了更全面地测试这个机制，我们可以模拟不同类型的错误场景，并观察errorHandler的响应。比如，我们可以在全局错误捕获中输出log，然后模拟一个数据错误导致渲染出错的场景。我们还可以尝试在函数中的Promise发生的错误、在组件中自定义事件中的错误等场景。
经过测试，我们发现这个errorHandler钩子能够成功地捕获大多数与Vue相关的错误。它也有其局限性，例如无法捕获与Vue无关的JS代码错误或宏任务中的错误。针对这些问题，我们可以使用BOM提供的全局错误处理函数window.onerror来尝试捕获。
对于JS异常错误，包括setTimeout宏任务的异步错误，我们都可以通过window.onerror进行捕获。但需要注意的是，未被正常处理的Promise错误仍无法被成功捕获。为了解决这个问题，我们可以借鉴Vue内部对异步任务的处理方式，即判断如果是Promise则把catch指向错误处理中。
为了提高代码的健壮性并减少控制台的大量报警信息，我们还可以编写插件来处理Vue实例中的methods的异常。通过条件判断和路由设置meta的配置，我们可以开启组件下的额外异常捕获功能。