Введение
На бескрайних просторах вселенной программирования молодой и амбициозный орленок по имени Эдди создавал ИИ Wisedoc с помощью приложения Create React (CRA). У Эдди был острый глаз, как у орла, и он использовал Sentry, чтобы отслеживать ошибки и обеспечивать бесперебойную работу своего кода.
Проблема 1: Эдди ломает голову, чтобы понять минимизированный код в Sentry:
Однажды, когда он парил высоко над своим кодом, он заметил, что его пакет кода JavaScript в Sentry был минимизирован. Он знал, что ему нужно деминифицировать пакет, чтобы отследить ошибки до его исходного кода, но он не хотел извлекать CRA, чтобы настроить Webpack для Sentry .
Решение 1: react-app-rewired
и @sentry/webpack-plugin
Но Эдди был находчив. Он вспомнил react-app-rewired,
инструмент, о котором слышал от мудрых сов кодирующего леса. Этот инструмент позволит ему настраивать свои конфигурации, не отключая CRA.
Эдди принялся за работу. Он установил react-app-rewired
и @sentry/webpack-plugin
с помощью следующих команд:
Затем он обновил свои package.json
скрипты, чтобы использовать react-app-rewired
:
Теперь он был готов переопределить конфигурации Webpack. После настройки конфигурации ему все еще нужно решить проблему создания исходных карт и управления ими, особенно когда мы хотим интегрироваться с Sentry.
Чтобы решить эту проблему, мы используем подключаемый модуль Sentry Webpack, инструмент, который автоматически создает релизы и загружает исходные карты в Sentry при сборке нашего приложения. Вот как Эдди настроил плагин Sentry Webpack в config-overrides
. Эдди получил свой токен авторизации на странице настроек панели управления Sentry.
Проблема 2: Исходные карты не разминируются
После настройки плагина мы столкнулись с проблемой, из-за которой Sentry не может отменить минимизацию нашего исходного кода. Это связано с тем, что Sentry необходимо сопоставить загруженные исходные карты с правильными файлами в нашем приложении.
Решение 2. Обеспечение совпадения имен артефактов
Мы настраиваем параметры include
и ignore
в нашей конфигурации, чтобы они соответствовали нашим путям исходной карты.
Вывод: непревзойденный успех
Преодолев эти проблемы, мы теперь можем видеть неминифицированный код в задачах Sentry, что значительно упрощает отслеживание и устранение ошибок. И все это было достигнуто без извлечения нашей установки Create-React-App.
Конечно, давайте изменим пример кода, чтобы он соответствовал сценарию конструктора резюме, используя соглашение об именах Wisedoc:
Перед неминификацией:
В этом уменьшенном коде довольно сложно понять проблему, поскольку имена функций являются общими, и нет ясности в отношении назначения этих функций или контекста ошибки.
После деминификации:
После деминификации журналы ошибок Sentry становятся значительно чище. Названия функций теперь отражают их назначение, структура кода очевидна, и теперь намного легче определить, где выдается ошибка. Это значительно упрощает процесс отладки и позволяет быстро отследить ошибку до ее источника в исходном коде.
Помните, что каждое сообщение об ошибке — это вызов, который нужно преодолеть, а каждая ошибка — это возможность чему-то научиться. Удачной отладки!