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

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

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

При возникновении ошибки во время выполнения в процессе разработки приложения 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. Этот компонент будет отвечать за:

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

Вы можете создать классовый компонент 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.