Обработка ошибок

Эта документация объясняет, как можно обрабатывать ошибки в процессе разработки, на стороне сервера и на стороне клиента.

Обработка ошибок в процессе разработки

При возникновении ошибки во время выполнения в процессе разработки приложения Next.js вы увидите оверлей. Это модальное окно, которое накладывается на веб-страницу. Оно только видно при работе сервера разработки с использованием next dev через pnpm dev, npm run dev, yarn dev или bun dev и не отображается в продакшене. Исправление ошибки автоматически скроет оверлей.

Вот пример оверлея:

Обработка серверных ошибок

Next.js предоставляет статическую страницу 500 по умолчанию для обработки серверных ошибок в вашем приложении. Вы также можете настроить эту страницу, создав файл pages/500.js.

Наличие страницы 500 в вашем приложении не показывает конкретные ошибки пользователю.

Вы также можете использовать страницу 404 для обработки специфических ошибок выполнения, таких как файл не найден.

Обработка клиентских ошибок

React Границы ошибок (Error Boundaries) — это элегантный способ обработки JavaScript-ошибок на клиенте, позволяющий остальной части приложения продолжать работу. Помимо предотвращения падения страницы, это позволяет предоставить пользовательский резервный компонент и даже логировать информацию об ошибке.

Для использования границ ошибок в вашем приложении Next.js необходимо создать классовый компонент ErrorBoundary и обернуть проп Component в файле pages/_app.js. Этот компонент будет отвечать за:

• Отображение резервного интерфейса после возникновения ошибки
• Предоставление способа сброса состояния приложения
• Логирование информации об ошибке

Вы можете создать классовый компонент ErrorBoundary, расширив React.Component. Например:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // Определяем переменную состояния для отслеживания наличия ошибки
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Обновляем состояние, чтобы следующий рендер показал резервный интерфейс

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Здесь можно использовать ваш сервис логирования ошибок
    console.log({ error, errorInfo })
  }
  render() {
    // Проверяем, была ли ошибка
    if (this.state.hasError) {
      // Можно отобразить любой пользовательский резервный интерфейс
      return (
        <div>
          <h2>Упс, произошла ошибка!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Попробовать снова?
          </button>
        </div>
      )
    }

    // Возвращаем дочерние компоненты, если ошибки нет

    return this.props.children
  }
}

export default ErrorBoundary

Компонент ErrorBoundary отслеживает состояние hasError. Значение этой переменной — булево. Когда значение hasError равно true, компонент ErrorBoundary отобразит резервный интерфейс. В противном случае он отобразит дочерние компоненты.

После создания компонента ErrorBoundary импортируйте его в файл pages/_app.js, чтобы обернуть проп Component в вашем приложении Next.js.

// Импортируем компонент ErrorBoundary
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // Оборачиваем проп Component компонентом ErrorBoundary
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

Вы можете узнать больше о Границах ошибок (Error Boundaries) в документации React.

Отслеживание ошибок

Для мониторинга клиентских ошибок используйте такие сервисы, как Sentry, Bugsnag или Datadog.