错误边界不会从 apollo 客户端捕获错误

Question

我试图在顶层捕获一些错误，以展示世界上最漂亮的错误页面。

由于某种原因，我看到我的节点断开连接，但错误边界从未触发。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import ApolloClient, { gql } from 'apollo-boost';

const client = new ApolloClient({ uri: "/graphql" });
const query = gql`{ items { id }}`;

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error: any) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Had error</h1>
    } else {
      return this.props.children;
    }
  }
}

function App() {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    client.query({ query })
      .then(res => setData(res))
      .catch(err => { console.warn("Error:", err); throw err; });
  }, []);

  return <pre>Data: {data}</pre>;
}

ReactDOM.render(
  <ErrorBoundary>
      <App />
  </ErrorBoundary>,
  document.getElementById('root')
);

我在一个空的 create-react-app 项目中运行它。

我希望看到<h1>Had error</h1>；我收到 CRA 未处理的错误屏幕。

Answer 1

来自docs

错误边界不捕获以下错误：

• 事件处理程序（了解更多）
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）
• 服务器端渲染
• 在错误边界本身（而不是其子项）中引发的错误

Promise 是异步的，因此被拒绝的 Promise 不会被错误边界捕获。目前，recommended but somewhat hackish approach 是在setState 中抛出错误。在功能组件中，可以使用useState钩子返回的set函数代替setState：

const [, setState] = useState()
useEffect(() => {
  client.query({ query })
    .then(res => setData(res))
    .catch(err => {
      console.warn("Error:", err);
      setState(() => {
        throw err;
      });
    });
}, []);

在useEffect 内部也可以使用，但在Promise 的then 或catch 回调中不行。您也不能将 useEffect 回调设为 async 函数，因为它不能返回 Promise。所以我们坚持使用setState。

还请注意，实际上没有理由直接调用client.query，尤其是因为如果缓存发生更改，此代码将不会重新呈现您的 UI。您应该使用 useQuery 和钩子已经为您公开的 data 状态。