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

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

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

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

Пример оверлея:

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

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

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

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

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

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

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

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

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

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

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

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Здесь можно использовать свой сервис логирования ошибок
    console.log({ error, errorInfo })
  }
  render() {
    // Проверяем, была ли ошибка
    if (this.state.hasError) {
      // Можно отрендерить любой пользовательский запасной UI
      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 отрендерит запасной UI. В противном случае он отрендерит дочерние компоненты.

После создания компонента 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.