Введение

На бескрайних просторах вселенной программирования молодой и амбициозный орленок по имени Эдди создавал ИИ 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 становятся значительно чище. Названия функций теперь отражают их назначение, структура кода очевидна, и теперь намного легче определить, где выдается ошибка. Это значительно упрощает процесс отладки и позволяет быстро отследить ошибку до ее источника в исходном коде.

Помните, что каждое сообщение об ошибке — это вызов, который нужно преодолеть, а каждая ошибка — это возможность чему-то научиться. Удачной отладки!