为什么即使使用ErrorBoundary，路由也会停止工作? [英] Why does routing stop working even when using an ErrorBoundary?

问题描述

我们的应用程序使用 ErrorBoundary 来捕获错误.这样可以很好地工作，并且可以在定义的位置显示错误消息.但是在错误显示出来后，路由停止工作，从而实质上破坏了该应用程序！

Our app use an ErrorBoundary to catch errors. This works fine and it presents an error message at the defined place, as it should. But after the error has manifested itself routing stops working, essentially breaking the app!

考虑到该应用程序似乎可以正常运行，我发现它有点奇怪:DevTools显示正在调度 routing/LOCATION_CHANGED 动作(我正在监听 history 对象)，当我单击链接和/或使用后退按钮，并且网址已更新，但是没有呈现新的路线/屏幕时.

I find it a bit strange, considering that the app otherwise seems to work: DevTools shows routing/LOCATION_CHANGED actions being dispatched (I'm listening to the history object) when I click links and/or use the back button, and the url is updated, but no new routes/screens are being rendered.

由于React和Redux正常工作，所以我要指出React Router，因为它是处理路由的主要组件.有谁知道我能阻止它破裂吗?

Since React and Redux is working, I've come to point at React Router, since it's the main component dealing with routing. Does anyone know how I can stop it from breaking?

示例错误

此错误来自连接的组件，发生在 mapStateToProps

This error is from a connected component and happens in the mapStateToProps

connectAdvanced.js?fe33:242 Uncaught TypeError: Cannot read property '3528' of undefined
    at getUserInRoleById (VM7787 users-reducer.js:108)
    at getUserByUserInRoleId (VM7787 users-reducer.js:110)
    at Function.mapStateToProps [as mapToProps] (VM8180 EncounterNotesHistoryItem.jsx:360)

之后

The above error occurred in the <Connect(EncounterNotesHistoryItem)> component:
    in Connect(EncounterNotesHistoryItem)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by EncounterNotesHistory)
    in div (created by EncounterNotesHistory)

组件层次结构(选定的片段)

App.jsx

<Provider store={store}>
  <ConnectedRouter history={customHistory} dispatch={dispatch}>
    <ErrorBoundary>
      <Route exact path="/appinfo" component={AppInfoScreen} />
      <Redirect exact from="/" to={`/encounter?attenderId=${userId}`} />
      <Route exact path="/search" component={SearchScreen} />
      <Route exact path="/search/:searchText" component={SearchScreen} />
      // and so on
    </ErrorBoundary>
  </ConnectedRouter>
</Provider>

依赖项

"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^5.0.7",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^3.6.0",
"reselect": "^3.0.1",

推荐答案

错误边界背后的想法是提供一种优雅的方式来处理

The idea behind Error boundaries is to provide an elegant way to deal with cryptic errors.

错误边界的工作方式类似于JavaScript catch {}块，但对于组件而言.

Error boundaries work like a JavaScript catch {} block, but for components.

这意味着每次在由错误边界包裹的组件树中引发错误时，整个树将被 fallback 值替换(自定义错误消息).因此，每当您的 Route 组件之一抛出错误时，整个树都将被视为有错误，并且将不再呈现(卸载).

This means that everytime an error is thrown inside a component's tree that is wrapped by an Error boundary the whole tree will be replaced by the fallback value (a custom error message for example). So everytime one of your Route components throws an error the whole tree will be considered with error and will no longer be rendered (unmounted).

您可以将单个 Routes 包裹在错误边界内，以防止它们崩溃，从而导致应用程序的其余部分(包括其他 Routes )崩溃.

You could wrap individual Routes in an error boundary to protect them from crashing the rest of the application (including the other Routes).

详细了解您的错误边界的理想粒度 查看全文