如何在React錯誤邊界中使用自定義錯誤類型？

Question

我在組件樹的頂部設置了一個錯誤邊界，如下所示：

renderApp() {
  return (
    <ErrorBoundary>
      { this.props.children }
    </ErrorBoundary>
  );
}

如果錯誤在樹上找到了，錯誤邊界將呈現一個簡單的錯誤頁面，將錯誤本身作為prop傳遞：

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

render() {
  if (this.state.hasError) {
    return (
      <ErrorPage error={this.state.error}/>
    );
  }
  return this.props.children;
}

我已經開始定義自定義錯誤，以便在引發某些異常時拋出應用程序，只需擴展Error類：

class CustomError extends Error {}

然后在我的組件中，我拋出這些自定義錯誤，我想在錯誤頁面中檢測到這些錯誤，並根據其類型構建消息。 例如，如果我在組件樹中進一步拋出此錯誤：

throw new CustomError('This is the custom error message');

我希望能夠在我的錯誤頁面中嗅探該類型，並顯示與該類型相關的消息。

import CustomError from '../../errors/custom-error';

// This code has obviously been edited for brevity's sake

class ErrorPage extends React.Component {
  render() {
    if (this.props.error instanceof CustomError) {
      errorMessage = "A custom error occurred.";
    }
    return <div>{errorMessage}</div>;
  }
}

然而，在錯誤頁面，陣營只能識別this.props.error是一個instanceof Error ，而不是CustomError 。 如果我拋出TypeError而不是CustomError ，那么錯誤頁面可以檢測錯誤類型。 但是傳遞自定義錯誤類型導致錯誤頁面不知道除了錯誤之外的類型，這顯然違背了定義自定義錯誤類型的目的。 我在這里錯過了什么？ 這是React中的錯誤嗎？ 任何輸入都將是最受歡迎的。

我使用React 16.0.0發現了這個問題，更新到16.2.0並且問題仍然存在。

Answer 1

問題不在於React，而在於Babel，我認為你正在使用它。 編譯類的方式不支持將instanceof與擴展本機類（如Error類一起使用。

：你可以在這里看到的是行為的一個例子https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEDCCuEAuB7AtgUQE5ZV6ApgB5IEB2AJjNrvgN4C-A3AFDApnLRjQC80ZAgHc4iVJhx4AFAEpW7TihAEAdCBQBzKTwCWnJGDLACKAGajk6GnjlA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=true&presets= ES2015％2Creact％2Cstage-2＆漂亮=假目標=版本= 6.26.0＆envVersion =

有關更多信息，請參閱此Babel問題： https ： //github.com/babel/babel/issues/3083

Answer 2

我創建了一個Github存儲庫 ，顯示了React如何處理錯誤邊界。

似乎React能夠檢測到CustomError 。 請在此處查看此行代碼 。

如果這個例子代表你所擁有的，請告訴我。