Reactjs 错误边界不为'；无法从apollo客户端捕获错误

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

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

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
从“apollo boost”导入apollo客户端，{gql}；
const-client=new-client（{uri://graphql}）；
const query=gql`{items{id}}`；
类ErrorBoundary扩展了React.Component{
状态={hasError:false}；
静态getDerivedStateFromError（错误：任意）{
返回{hasError:true}；
}
render（）{
if（this.state.hasError）{
返回有错误
}否则{
返回此.props.children；
}
}
}
函数App（）{
const[data，setData]=useState（null）；
useffect（（）=>{
client.query（{query}）
.然后（res=>setData（res））
.catch（err=>{console.warn（“Error:，err）；throw err；}）；
}, []);
返回数据：{Data}；
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我在一个空的createreact应用程序项目中运行这个

我希望看到

有错误

；我获得CRA未处理错误屏幕。

来自

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

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

承诺是异步的，所以被拒绝的承诺不会被错误边界捕获。目前，最重要的是在

setState

中抛出错误。在功能组件中，您可以使用

useState

钩子返回的set函数代替

setState

：

在

useffect

内部抛出也会起作用，但在承诺的

然后
或
catch
回调中抛出则不起作用。您也不能使
useffect
回调函数成为
async
函数，因为它不能返回承诺。所以我们只能使用
setState

还要注意的是，实际上没有理由直接调用
client.query
，特别是因为如果缓存发生更改，此代码将而不是重新启动UI。您应该使用
useQuery
和钩子已经为您公开的
数据
状态。
错误边界将仅显示在生产版本上。你是如何测试你的边界的？错误边界肯定无处不在。只有调试错误覆盖未显示在生产中。我通过使用
纱线开始运行cra来测试它（然后我在react中看到调试窗口），并在生产中使用
纱线构建
&&&
npx serve构建
（显示带有“Data:”字符串的窗口（因此
HASRERROR
永远不会变为真）谢谢你的回答。这是有效的。对于UsBealy，这个例子是一个很小的复制案例，在现实世界中，它是一个在事件上加载数据的查询，所以使用UsCuy遗憾的是不起作用。@ Yaskel-GoTHA。同样的机制，您可以考虑添加一个Error Link来为Apple客户端进行全局错误处理，并使用其他所有的错误边界。即使有一点重复，它仍然可能是更干净的整体。只是一个建议。
const [, setState] = useState()
useEffect(() => {
  client.query({ query })
    .then(res => setData(res))
    .catch(err => {
      console.warn("Error:", err);
      setState(() => {
        throw err;
      });
    });
}, []);