errorCallback() — Error Boundary Pattern

同学，咱们今天来看一个很重要的概念：errorCallback。你可以把它想象成组件世界里的一张“安全网”，专门用来优雅地处理那些没有被捕获的错误。 为什么需要它呢？想想看，当你的组件树很深时，某个角落里的一个小错误如果不处理，可能会导致整个应用崩溃，用户体验非常糟糕。这时，errorCallback 就派上用场了。它实现了一种叫做“错误边界”的模式，原理特别像 JavaScript 里的 catch 块。但它的能力更强——它不仅仅捕获它直属子组件的错误，而是能捕获到它下面所有后代组件里抛出的、未被处理的错误。一旦后代里出错了，这个错误就会一直往上冒泡，直到被离它最近的 errorCallback 这张网接住。 那具体怎么用呢？errorCallback 是一个生命周期钩子，它接收两个参数：一个是原生的 error 对象，包含了错误的描述信息；另一个是 stack 字符串，显示了调用堆栈，帮你定位问题。典型的使用模式，是用一个标记来控制界面切换，比如我们常用 lwc:if 和 lwc:else 指令。平时页面正常显示，一旦捕获到错误，我们就更新一个状态变量，然后卸载掉出问题的组件，转而显示一个对用户友好的错误提示界面。这样，其他健康的部分还能正常工作，崩溃就被控制在局部了。 而且这个错误边界你可以按需放置。比如说，你可以把整个应用包在一个大的边界里，就像给整个房子铺了张安全网，任何地方掉下来都能接住；你也可以只包裹一部分核心或容易出错的区块，做局部的错误隔离。这给了你非常大的灵活性。 不过，有一个关键限制你一定要记住：errorCallback 它只捕获得那种在模板里直接绑定的事件抛出的错误，比如说你在 HTML 里写了个 onclick={handleClick}，如果 handleClick 内部报错了，errorCallback 可以抓到。但如果你是通过 addEventListener 这种编程方式动态添加的事件处理器里出错了，errorCallback 是抓不到的。所以别把所有的错误处理都指望它，自己代码里该 try-catch 的地方还是要做好防护。 好了，关于 errorCallback 的使用和限制就讲到这里，下节我们会动手演示一下，让你更直观地感受它的作用。咱们下节见！