错误处理

JavaScript 是一种灵活的解释性语言，这意味着在运行时遇到错误是可能的（甚至很容易）。无论是因为意外的情况还是因为我们编写的代码中出现错误，都必须能够监控错误并实施某种形式的恢复或优雅的错误处理。

在 Preact 中，我们执行此操作的方式是捕获错误并将其保存为状态。这使组件能够拦截意外或损坏的渲染，并切换到渲染其他内容作为后备。

将错误转换为状态

有两种 API 可用于捕获错误并将其转换为状态：componentDidCatch 和 getDerivedStateFromError。它们在功能上类似，并且都是可以在类组件中实现的方法

componentDidCatch 会传递一个 Error 参数，并可以决定根据具体情况对该错误采取何种操作。它可以调用 this.setState() 来呈现回退或备用树，这将“捕获”错误并将其标记为已处理。或者，该方法可以简单地将错误记录在某个地方，并允许它继续未处理（崩溃）。

getDerivedStateFromError 是一个静态方法，它会传递一个 Error，并返回一个状态更新对象，该对象通过 setState() 应用于组件。由于此方法总是会产生导致其组件重新渲染的状态更改，因此它总是将错误标记为已处理。

以下示例展示了如何使用任一方法来捕获错误并显示优雅的错误消息，而不是崩溃

import { Component } from 'preact'

class ErrorBoundary extends Component {
  state = { error: null }

  static getDerivedStateFromError(error) {
    return { error: error.message }
  }

  componentDidCatch(error) {
    console.error(error)
    this.setState({ error: error.message })
  }

  render() {
    if (this.state.error) {
      return <p>Oh no! We ran into an error: {this.state.error}</p>
    }
    return this.props.children
  }
}

上面的组件是一个相对常见的示例，展示了如何在 Preact 应用程序中实现错误处理，通常称为错误边界。

嵌套和错误冒泡

在 Preact 渲染虚拟 DOM 树时遇到的错误会“冒泡”，就像 DOM 事件一样。从遇到错误的组件开始，树中的每个父组件都有机会处理错误。

因此，如果使用 componentDidCatch 实现，则可以嵌套错误边界。当组件的 componentDidCatch() 方法不调用 setState() 时，错误将继续冒泡到虚拟 DOM 树，直到它到达具有 确实调用 setState() 的 componentDidCatch 方法的组件。

试试看！

为了测试我们的错误处理知识，让我们向一个简单的 App 组件添加错误处理。App 中的某个深层组件可能会在某些情况下引发错误，我们希望捕获此错误，以便我们可以向用户显示一条友好消息，告知他们我们遇到了意外错误。