Специальные страницы ошибок в React с GraphQL и пределами ошибок

1656590529 speczialnye straniczy oshibok v react s graphql i predelami oshibok

автор Аби Нода

1*20J63XycbuDOp4NRTLKeMQ
Великолепная страница 500 ошибок GitHub

Если вам нравится эта статья, пожалуйста, поддержите меня, просмотрев Извлеките напоминаниебот Slack, который посылает вашей команде автоматические напоминания по запросам на подъемник GitHub.

Одной из проблем, с которой я недавно столкнулся при работе с GraphQL и React, было то, как обрабатывать ошибки. Как разработчики, мы, вероятно, ранее внедряли страницы 500, 404 и 403 по умолчанию в воспроизводимых сервером приложениях, но выяснить, как это сделать с помощью React и GraphQL, сложно.

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

Фон

Проект, над которым я работал, был достаточно типичным приложением CRUD, созданным в React с использованием GraphQL, Apollo Client и express-graphQL. Мы хотели обрабатывать определенные типы ошибок – например, неисправность сервера – путем отображения стандартной страницы ошибок для пользователя.

Нашей начальной задачей было найти лучший способ сообщить клиенту об ошибках. GraphQL не использует коды статуса HTTP, такие как 500, 400 и 403. errors массив со списком вещей, которые пошло не так (подробнее о errors в спецификации (GraphQL).

Например, вот как выглядел наш ответ GraphQL, когда что-то сломалось на сервере:

Поскольку ответы на ошибку GraphQL возвращают код статуса HTTP 200, единственным способом определить тип ошибки было проверить errors массив. Это казалось плохим подходом из-за ошибки message свойство содержало исключение, вызванное на сервере. В спецификации GraphQL указано, что значение message предназначен для разработчиков, но не указывает, должно ли быть понятным человеком сообщением или что-то, предназначенное для программной обработки:

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

Добавление кодов ошибок к ответам GraphQL

Чтобы решить эту проблему, мы добавили стандартизированные коды ошибок в наши объекты ошибок, которые могли бы использоваться клиентами для программного обнаружения ошибок. Это было вдохновлено тем, как REST API Stripe возвращает строковые коды ошибок в дополнение к сообщениям, которые можно читать.

Мы решили начать с трех кодов ошибок: authentication_error, resource_not_foundи server_error.

Чтобы добавить их в наши ответы GraphQL, мы передали свои собственные formatError функция для express-graphql, отображающая исключения, вызванные сервером, в стандартные коды, прилагаемые к ответу. Спецификация GraphQL обычно не рекомендует добавлять свойства к объектам ошибок, но допускает это, вкладывая эти записи в extensions объект.

Тогда наши ошибки ответа GraphQL было легко классифицировать:

Хотя мы разработали свой способ добавления кодов к ответам, сгенерированных express-graphql, apollo-server, похоже, предлагает подобное встроенное поведение.

Воспроизведение страниц ошибок с пределами ошибок React

Как только мы определили хороший способ обработки ошибок на нашем сервере, мы обратили внимание на клиента.

По умолчанию мы хотели, чтобы наша программа отображала глобальную страницу ошибок (например, страницу с сообщением «Ой, что-то пошло не так»), когда мы сталкиваемся с server_error, authorization_errorили authorization_not_found. Однако мы также хотели, чтобы гибкость могла обрабатывать ошибки в определенном компоненте, если мы этого хотим.

Например, если пользователь что-то вводил в строку поиска и что-то пошло не так, мы хотели бы отобразить сообщение об ошибке в контексте, а не перейти на страницу ошибки.

Для этого мы сначала создали компонент под названием GraphqlErrorHandler что будет сидеть между apollo-client‘s Query и Mutation компоненты и их дочерние элементы, которые должны быть отображены. Этот компонент проверил коды ошибок в ответе, генерировал исключение, если определил беспокоящий код:

Чтобы использовать GraphqlErrorHandlerмы завернули apollo-client Query и Mutation компоненты:

Наш компонент функции затем использовал наш собственный Query компонент вместо непосредственного доступа react-apollo:

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

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

Пределы ошибок React обеспечивают фантастический способ сделать это. Пределы ошибок – это компоненты React, которые могут ловить ошибки JavaScript в любом месте своего дочернего дерева компонентов, чтобы вы могли обрабатывать их с помощью специального поведения.

Мы создали предел ошибки под названием GraphqlErrorBoundary который перехватит любые исключения, связанные с сервером, и отобразит соответствующую страницу ошибки:

Мы используем предел ошибки как обертку для всех компонентов нашей программы:

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

Например, вот как это выглядело бы, если бы мы хотели пользовательское поведение обработки ошибок в нашем компоненте раньше:

Подведение итогов

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

Добавить комментарий

Ваш адрес email не будет опубликован.