Мы исследуем использование Sentry с React.

Эта статья является частью серии, начинающейся с Пример создания Sentry Error Reporting: Часть 1.

Реализация React

Сначала нам нужно добавить новый проект Sentry для этого приложения; с сайта Sentry. В этом случае мы выбираем React.

Мы повторно реализуем наши две кнопки, Hello и Error, в приложении React. Начнем с создания нашего стартового приложения:

npx create-react-app react-app

Затем мы импортируем пакет Sentry:

yarn add @sentry/browser

и инициализируем его:

react-app / src / index.js

Наблюдения:

  • Во время разработки у нас есть другие механизмы для наблюдения за проблемами, например, консоль, поэтому мы включаем Sentry только для производственных сборок.

Затем мы реализуем наши кнопки Hello и Error и добавляем их в приложение:

react-app / src / Hello.js

react-app / src / MyError.js

react-app / src / App.js

Проблема (исходные карты)

Мы можем протестировать Sentry с производственной сборкой, введя:

yarn build

и из папки build введите:

npx http-server -c-1

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

Служба Sentry учитывает это, извлекая исходные карты для минифицированного пакета после получения ошибки. В этом случае мы работаем с localhost (недоступно для службы Sentry).

Решено (исходные карты)

Решение этой проблемы сводится к запуску приложения с общедоступного веб-сервера. Чтобы воспользоваться службой GitHub Pages (бесплатно), достаточно одной простой кнопки. Обычно используются следующие шаги:

  1. Скопируйте содержимое папки build в папку docs в корне репозитория.
  2. Включите GitHub Pages в репозитории (из GitHub), чтобы использовать папку docs в ветке master
  3. Отправьте изменения на GitHub

примечание: постфактум я понял, что мне нужно использовать функцию домашней страницы create-create-app, чтобы запустить приложение. С учетом добавления в package.json следующего содержания: «домашняя страница»: «https://larkintuckerllc.github.io/hello-sentry/ '

Финальная версия работающего приложения доступна по адресу: https://larkintuckerllc.github.io/hello-sentry/

Иллюстрация обнаруженных ошибок

Давайте пройдемся по кнопке Привет.

Ошибка выглядит следующим образом:

Наблюдения:

  • Этот отчет об ошибке не может быть более ясным, BRAVO.

Изображение неперехваченных ошибок

Точно так же давайте пройдемся по кнопке Ошибка.

Ошибка выглядит следующим образом:

Более эффективная обработка неперехваченных ошибок (рендеринга)

Введение в границы ошибок
Ошибка JavaScript в части пользовательского интерфейса не должна нарушать работу всего приложения. Чтобы решить эту проблему для пользователей React, React 16 вводит новую концепцию «границы ошибки».

Границы ошибок - это компоненты React, которые перехватывают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс вместо дерева компонентов, в котором произошел сбой. Границы ошибок улавливают ошибки во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними.
…
Новое поведение для неперехваченных ошибок
Это изменение имеет важное значение. Начиная с React 16, ошибки, которые не были обнаружены какой-либо границей ошибок, приводят к отключению всего дерева компонентов React.

- Дэн Абрамов - Обработка ошибок в React 16

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

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

react-app / src / MyRenderError

Наблюдение:

  • При нажатии кнопки React попытается отобразить flag.busted.bogus, что приведет к ошибке.
  • Без границы ошибки размонтируется все дерево компонентов.

Затем мы пишем наш код границы ошибки (использует новый метод жизненного цикла componentDidCatch); по сути, это пример, приведенный в статье Дэна Абрамова:

react-app / src / ErrorBoundary.js

Наконец, мы используем этот компонент:

react-app / src / App.js

После этого нажатие кнопки Ошибка рендеринга отображает откатной пользовательский интерфейс и сообщает об ошибке в Sentry.

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

Надеюсь, вы нашли это полезным.