使用react-error-boundary中的useErrorHandler钩子重置回程中的错误边界

Question

我正在使用react-error-boundary包来显示回退UI，以防应用程序抛出任何错误。该软件包对我来说效果很好。如果我使用浏览器后退按钮转到上一页，我需要了解如何重置应用程序错误状态，因为转到上一页还会显示回退 UI 而不是原始组件。无论如何我们可以渲染原始组件吗？

在下面的代码中，用户将在 Page2 上抛出错误，因为我将空对象作为 props 传递。在这种情况下，它将显示后备屏幕。如果我单击后退按钮，Page1 上仍然会显示我不想要的后备屏幕。

应用程序.js

const errorHandler = (error) =>{
      console.log(error)
}

<BrowserRouter basename={'/bookingtool/obt/'}>
     <ErrorBoundary FallbackComponent={Fallback} onError={errorHandler}>
          <Routes>
               <Route path="/page1" element={<Page1 PageName="Page1" />} />
               <Route path="/page2" element={<Page2 PageName={{}} /> } />
          </Routes>
    <ErrorBoundary />
</BrowserRouter>

Page1.js

import { useErrorHandler } from 'react-error-boundary';
const Page1 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

Page2.js

import { useErrorHandler } from 'react-error-boundary';
const Page2 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

回退.js

import React from "react";

const Fallback= (props) => {
    return(<h1>Something went wrong</h1>)
}

Answer 1

提供一个key至<ErrorBoundary />. 每当发生key变化时，错误边界就会重置。

在您的情况下，使用useLocation().pathnameaskey意味着每当路径发生变化时它将重置：

const location =  useLocation();

// ...
return (
  <ErrorBoundary key={location.pathname}>
    {/* ... */}
  </ErrorBoundary>
)

作为一个单独的建议，我会将错误处理移至布局组件内。这将允许在发生错误时保留导航，这是很好的用户体验。

这里有一个基本的例子。

Answer 2

当您离开时尝试重置错误状态：

const Fallback= ({ error, resetErrorBoundary} ) => {
    const location = useLocation();
    const errorLocation = useRef(location.pathname);
    useEffect(() => {
        if (location.pathname !== errorLocation.current) {
            resetErrorBoundary();
        }
    },[location.pathname])
    return(<h1>Something went wrong</h1>)
}