构建高阶组件误差边界

Question

我正在处理的项目需要更好的错误处理，并且开始我决定实现 reacts ErrorBoundary hook componentDidCatch，我可以简单地在单个组件中实现它。然而，一位高级开发人员建议我将错误边界设置为高阶组件，以便我可以将整个应用程序包装在其中。这是我遇到麻烦的地方，因为尽管阅读了文档，但高阶组件对我来说毫无意义。

这是我目前实现的：

我的 HOC

import React from "react";
import ErrorScreen from "./ErrorScreen"


export default function NewErrorHandler(WrappedComponent) {
 class ErrorHandler extends React.Component {
    constructor(props) {
        this.state = {hasError: false}
    };

    componentDidCatch(error, info) {
        this.setState({ hasError: true })
    }

    render() {
        if(this.state.hasError) {
            return (
                <ErrorScreen/> 
            )
        } else {
            return this.props.children
        }
    }
}
}

到目前为止，我的问题是我不确定如何将应用程序包装在错误边界中。在我看到的所有示例中，HOC 都可以通过导出轻松地包裹功能组件，但是这个应用程序的设置方式没有我可以看到的显式导出函数：

import ReactDOM from "react-dom";
import React from "react";
import { store, history } from "./store";
import { Provider } from "react-redux";
import { Route, Switch } from "react-router"; // react-router v4
import { ConnectedRouter } from "connected-react-router";
import DetectAdblock from "./components/DetectAdblock";
import ErrorBound from "./components/ErrorHOC";

const Encounter = Loadable({
  loader: () => import("./components/Encounter/Encounter"),
  loading: Loading,
  delay: 300
});

const VerifyInsuranceList = Loadable({
  loader: () => import("./components/VerifyInsurance/InsuranceList"),
  loading: Loading,
  delay: 300
});

const VideoChat = Loadable({
  loader: () => import("./components/VideoChat"),
  loading: Loading,
  delay: 300
});

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    
<Provider store={store}>
        <ConnectedRouter history={history}>
          <TokenLoader>
            <DetectAdblock />
            <BrowserBanner />
            <EnvBanner />
            <IdleMonitor />
            <TokenRefresher />
            <MonotonicClock frequency={15} />
            <RtcMonitor />
            <PatientPoller pollInterval={30000} />
            <Redirect />
            <Switch>
              <Route exact={true} path="/" component={ProviderDashboard} />
              <Route
                exact={true}
                path="/accept-invitation/:inviteID"
                component={AcceptInvite}
              />
              <Route exact={true} path="/login" component={Login} />
              <Route
                exact={true}
                path="/reset-password/:resetID"
                component={ResetPassword}
              />
              <Route
                exact={true}
                path="/request-password-reset"
                component={ForgotPassword}
              />
              <Route
                exact={true}
                path="/waiting-room"
                component={ProviderAvailablePatients}
              />
              <Route exact={true} path="/encounter" component={Encounter} />
              <Route exact={true} path="/video" component={VideoChat} />
              <Route
                exact={true}
                path="/providers"
                component={ManagerProviders}
              />
              <Route exact={true} path="/providers/new" component={Invite} />
              <Route
                exact={true}
                path="/providers/edit/:providerID"
                component={ProviderEdit}
              />
              <Route
                exact={true}
                path="/providers/audit/:providerID"
                component={ProviderAudit}
              />
              <Route
                exact={true}
                path="/activity-monitor"
                component={ActivitySummary}
              />
              <Route
                exact={true}
                path="/encounter-monitor"
                component={EncounterMonitor}
              />
              <Route
                exact={true}
                path="/encounter-monitor/:encounterID"
                component={EncounterMonitorDetails}
              />
              <Route exact={true} path="/billing" component={BillingTab} />
              <Route exact={true} path="/patients" component={PatientTab} />
              <Route exact={true} path="/rounding" component={RoundingTab} />
              <Route
                exact={true}
                path="/patients/:patientID"
                component={PatientChart}
              />
              <Route
                exact={true}
                path="/active-patient-chart/:patientID"
                component={ActivePatientChart}
              />
              <Route
                exact={true}
                path="/insurnace-history/:patientID"
                component={InsuranceHistory}
              />
              <Route
                exact={true}
                path="/verify-insurance"
                component={VerifyInsuranceList}
              />
              <Route render={() => <div>Not Found</div>} />
            </Switch>
          </TokenLoader>
        </ConnectedRouter>
      </Provider>
document.getElementById("app")
  );
});

这里我省略了一些导入语句，但展示了我是如何导入我的 ErrorHOC.js 的。任何关于如何包装整个应用程序的见解都会非常有帮助。如果我在这里缺少理解所需的信息，请告诉我。

Answer 1

正如 cmets 中所讨论的，错误边界不是 HOC 的用例，这里的任何方式都是逻辑应该如何工作的可能示例：

// withErrorBoundary.js
class ErrorHandler extends React.Component {}

// HOC wrapping the passed component
export default function withErrorBoundary(WrappedComponent) {
  const Component = (
    <ErrorHandler>
      <WrappedComponent />
    </ErrorHandler>
  );
  return Component;
}

// index.js
import withErrorBoundary from "./withErrorBoundary.js";

const App = <Provider store={store}>...</Provider>;

// Usage
const AppWithErrorBoundary = withErrorBoundary(App);

ReactDOM.render(<AppWithErrorBoundary />, document.getElementById("app"));

---

错误边界应该是一个包装器组件，因此您可以将有用的道具传递给它，在多种用途上更容易重用案例，等等：

class ErrorBoundaryWrapper extends React.Component {
  render() {
    return (
      <>
        {/** Use other props passed to wrapper **/}
        <div>...</div>
        {this.props.children}
      </>
    );
  }
}

// Usage, see the advantage over HOC
<>
  <ErrorBoundaryWrapper specialProps={props1}>
    <Component1 />
  </ErrorBoundaryWrapper>
  <ErrorBoundaryWrapper specialProps={props2}>
    <Component2 />
  </ErrorBoundaryWrapper>
</>

• 查看类似问题：What ErrorBoundary actually does。