Освоение обработки ошибок Next.js с помощью маршрутизатора приложений

Как добавить ввод тегов в NextJS Изучение

В этой статье мы узнаем, как обрабатывать ошибки в Next.js с помощью App Router и новых соглашений о файлах ошибок в Next.js.

Обработка ошибок является ключевым аспектом разработки любого веб-приложения, и в прошлом Next.js помогал разработчикам с этим с помощью настраиваемых страниц ошибок, таких как страницы 404 и 500.

Однако эти страницы имеют свои ограничения в Pages Router, такие как ограниченная поддержка определенных интеграций пользовательского интерфейса, устаревшая поддержка границ ошибок React и ограниченная функциональность приложения при возникновении ошибок.

Но с выпуском Next.js версии 13.4 новый App Router был помечен как стабильный для производства. Маршрутизатор приложений улучшает поддержку и удобство разработки для обработки ошибок и других важных частей создания веб-приложений.

Сценарий и подготовка

Чтобы облегчить понимание нового API обработки ошибок, мы рассмотрим его реализацию в приложении Next.js для аутентификации пользователей.

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

Прежде чем мы начнем, получите код демонстрационного приложения, которое мы будем использовать в статье, клонировав репозиторий, указанный здесь (в основной ветке). После запуска приложения вы должны увидеть ошибку, изображенную ниже.

В этом демонстрационном приложении главная страни

В этом демонстрационном приложении главная страница, на которой отображается таблица, может быть доступна только вошедшим в систему пользователям, но произошла некоторая ошибка (в данном случае рукотворная, но это могло произойти на законных основаниях), которая привела к тому, что sessionпеременная назначен как null.

Примечание: аутентификация не будет реализована в демонстрационном приложении для простоты.

Это, конечно, приводит к ошибке, и прямо сейчас приложение полностью падает, потому что оно не знает, как обработать ошибку!

Теперь мы узнаем, как обработать эту ошибку, чтобы предотвратить сбой нашего приложения, тем самым значительно улучшив UX приложения.

Создание страницы ошибки

Чтобы приложение не вылетало, в app/каталоге создайте error.tsxфайл. Создание этого файла автоматически создает границу ошибки React, которая оборачивает главную страницу. Затем в error.tsxфайле экспортируйте следующую функцию:

"use client";

export default function Error() {
  return (
    <div className="grid h-screen px-4 bg-white place-content-center">
      <div className="text-center">
        <h1 className="font-black text-gray-200 text-9xl">401</h1>

        <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          Unauthroized!
        </p>

        <p className="mt-4 text-gray-500">
          You must be logged in to access the page
        </p>

        <button
          type="button"
          className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring"
        >
          Try Again
        </a>
      </div>
    </div>
  );
}

Примечание: компоненты ошибок должны быть клиентскими компонентами! Обязательно отметьте их как таковые.

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

Экспортированная функция будет действовать как запасно

Когда происходит ошибка, компоненту резервного копирования передаются два реквизита — сам объект ошибки и функция, которая пытается восстановиться после ошибки (обычно называется reset):

"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  // ...
}

Теперь мы можем получить доступ к сообщению об ошибке через реквизит errorи отобразить его на экране следующим образом:

<p className="mt-4 text-gray-500">
  {error.message || "You must be logged in to access the page"}
</p>

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

Мы можем реализовать вызов функции сброса в нашей кнопке с помощью onClickобработчика:

<button
  type="button"
  onClick={() => reset()}
  className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring cursor-pointer"
>
  Try Again
</button>

И с этим нам удалось успешно справиться с нашей ошибкой!

Абстрагирование сообщения об ошибке

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

Чтобы абстрагировать сообщение об ошибке (и не писать его несколько раз), мы можем легко создать пользовательское исключение, связанное с аутентификацией.

Для этого создайте каталог с именем libи создайте в этом каталоге файл с именем exceptions.ts. В этом файле мы можем создать и экспортировать пользовательское исключение ошибки аутентификации следующим образом:

export class AuthRequiredError extends Error {
  constructor(message = "Auth is required to access this page") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

Теперь мы можем добавить этот новый кастом AuthRequiredErrorна главную страницу вместо обычного Error:

export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}

Ошибка даст нам либо сообщение по умолчанию, переданное в конструкторе, либо более конкретную ошибку, которую нам, возможно, потребуется передать позже.

Подробнее об обработке ошибок

Давайте закончим некоторыми дополнительными замечаниями об ошибках в макетах и ​​ошибках сервера.

Ошибки в макетах

Ошибки могут возникать в любом месте приложения (не только page.tsxв файлах), и система маршрутизации файлов, которую использует Next.js, влияет на то, как error.tsxработают границы между вложенными маршрутами и макетами.

Ошибки всплывают до ближайшей границы родительской ошибки, что можно увидеть на диаграмме ниже.

Ошибки всплывают до ближайшей гран

Этот характер всплытия ошибок означает, что error.tsxграница не поймает ошибку в файле макета в том же сегменте, потому что граница ошибки окружает файл макета.

тот характер всплытия ошибок означает, что err

Если в корневом макете или шаблоне возникает ошибка, используйте файл global-error.tsx, как показано на рисунке ниже.

ли в корневом макете или шаблоне возникает ошибк

Граница global-error.tsxохватывает все приложение, поэтому при использовании этого файла обязательно добавляйте собственные уникальные тегиитеги.

Эта граница ошибок перехватывает любые ошибки, которые не были обнаружены другими вложенными error.tsxграницами, и поэтому она не будет часто активироваться.

Ошибки сервера

В случае возникновения ошибки в серверном компоненте или при выборке данных Next.js перенаправит соответствующий Errorобъект на ближайшую error.tsx границу.

В случае возникновения ошибки в серверном ком

Заключение

Хотя многие разработчики рассматривают реализацию обработки ошибок как хлопот, это жизненно важная часть приложения, и успешная реализация обработки ошибок значительно улучшит UX приложения.

Next.js делает это невероятно простым с помощью маршрутизатора приложений и error.tsxсоглашения о файлах.

Читайте также:  Проблемы общедоступного облака: мониторинг ваших сервисов AWS
Оцените статью
bestprogrammer.ru
Добавить комментарий