Заметки про React(@ru_react_notes). Гайд по обработке ошибок в React В блоге Нади Макаревич вышел гайд по обработке ошибок в React. В

Гайд по обработке ошибок в React В блоге Нади Макаревич вышел гайд по обработке ошибок в React. В первую очередь стоит понять, почему необходимо обрабатывать ошибки. При возникновении ошибки в одной из фаз жизненного цикла React произойдет размонтирование всего приложения, и пользователь увидит белый экран. Для того, чтобы предотвратить такие ситуации и отловить ошибку во время фазы жизненного цикла React, есть Error Boundaries. У него есть минусы: если возникла ошибка в колбеке или в асинхронном коде, то такая ошибка не дойдет до Error Boundaries:

const Component = () => {
  useEffect(() => {
    // Будет обработан ErrorBoundary
    throw new Error('Destroy everything!');
  }, [])

  const onClick = () => {
    // Не будет обработан ErrorBoundary
    throw new Error('Hulk smash!');
  }

  useEffect(() => {
    // Если возникнет ошибка, то не будет обработан ErrorBoundary
    fetch('/bla')
  }, [])

  return <button onClick={onClick}>click me</button>
}

const ComponentWithBoundary = () => {
  return (
    <ErrorBoundary>
      <Component />
    </ErrorBoundary>
  )
}

Чтобы направить ошибку из колбека или асинхронного кода в ErrorBoundary, можно перекинуть ошибку в React используя трюк:

const onClick = () => {
  try {
    //–snip–
  } catch (e) {
    // вызвать обновление стейта с выбросом ошибки
    setState(() => throw e);
  }
}

Чтобы самостоятельно не изобретать колесо, рекомендуется использовать библиотеку react-error-boundary. В ней уже решены основные проблемы, возникающие при обработке ошибок. www.developerway.com/posts/h…in-react