Якщо вам сумно постійно писати обробку помилок ви завжди можете написати універсальний компонент:

Для цього потрібно створити класовий компонент (функціональні такого не вміють) в якому реалізувати три методи:

getDerivedStateFromError - оновлює ваш стейт у випадку перехоплення помилки
componentDidCatch - перехоплює помилку і може щось із нею зробити (залогувати, наприклад)
render - відображає контент в залежності від того чи була помилка, чи ні.

В коді це виглядає так:

class SimpleErrorBoundaries extends PureComponent<
  SimpleErrorBoundariesProps,
  SimpleErrorBoundariesState
> {
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  state = { hasError: false };

  render() {
    const { children, errorFallback } = this.props;
    return this.state.hasError ? errorFallback : children;
  }

  componentDidCatch(error: Error): void {
    this.props.onError && this.props.onError(error);
  }
}

Типи виглядають досить просто

type SimpleErrorBoundariesProps = {
  children: ReactNode;
  errorFallback: ReactNode;
  onError?: (error: Error) => void;
};

type SimpleErrorBoundariesState =
  | { hasError: false }
  | { hasError: true; error: Error };

Тепер ви можете писати код накшталт такого:

<SimpleErrorBoundaries errorFallback={<>Sorry mate</>}>
  <ErrorComponent />
</SimpleErrorBoundaries>

❗️Варто пам'ятати:

1) Виключення, які стаються в середині промісів просто так не перехоплюються, для цього потрібно використовувати async/await
2) Виключення, що стаються в середині самого компоненту ErrorBoundaries також не перехоплюються.

Для обробки помилок в Next.JS цей підхід також працює. Але, як ще один варіант, ви можете використати файл error.tsx дефолтний експорт якого буде відображений у випадку, якщо в роуті станеться помилка.

А ось пакет від одного з розробників #React, який вирішує те саме завдання. Майже 4 мільйона скачувань, а він і досі не в основній бібліотеці 😢

@reactbeginners