Как мне работать с пользовательскими типами ошибок в границах ошибок React?

Я установил границу ошибки в верхней части дерева компонентов, например:

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

Если ошибка находит путь вверх по дереву, граница ошибки отображает простую страницу с ошибкой, пропуская саму ошибку в виде реквизита:

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

Однако на странице ошибок React распознает только то, что this.props.error является экземпляром Errorне из CustomError, Если я брошу, скажем, TypeError вместо CustomError, то страница ошибки может определить тип ошибки. Но передача пользовательского типа ошибки приводит к тому, что страница ошибки ничего не знает о типе, кроме того, что это ошибка, что, очевидно, противоречит цели определения пользовательских типов ошибок. Что мне здесь не хватает? Это ошибка в React? Любой вклад будет наиболее ценным.

Я обнаружил эту проблему с помощью React 16.0.0, обновился до 16.2.0, и проблема не устранена.

Источник

2 ответа

Решение

Проблема не в 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

Источник

Я создал репозиторий Github, который показывает, как React обрабатывает границы ошибок.

Кажется, что React способен обнаружить CustomError, Смотрите эту строку кода здесь.

Дайте мне знать, если этот пример является представителем того, что у вас есть.

Источник
Другие вопросы по тегам