建立高阶分量误差边界

Question

我正在从事的项目需要更好的错误处理，开始时，我决定实现ErrorBoundary钩子componentDidCatch，这是我能够简单地在一个组件中实现的。然而，一位高级开发人员建议我将错误边界设置为更高的顺序组件，这样我就可以将整个应用程序包装在其中。这是我遇到麻烦的地方，因为尽管我阅读了文档，但高阶组件对我来说没有什么意义。

这就是我到目前为止所实施的：

我的临时

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
        }
    }
}
}

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

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

正如注释中所讨论的那样，错误边界不是特定情况下的用例，这里的任何方式都是逻辑应该如何工作的一个可能的例子：

// 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.：