Хотя мы все стремимся обеспечить максимально четкое взаимодействие с пользователем, не менее важно отслеживать системные аномалии. И когда мы говорим о ненормальном поведении веб-сайта, очень важно понимать своих пользователей и проблемы, с которыми они могут столкнуться.

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

Как мы отслеживаем ошибки?

Команда Creditas использует New Relic для мониторинга производительности и отслеживания ошибок. New Relic — одно из лучших приложений в этой области, несколько других популярных приложений — это сторожевое, ловушка для ошибок и т. д. Подробнее о мониторинге браузера с помощью New Relic

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

Эти инструменты по умолчанию не деминифицируют ваш код и показывают ошибку, как указано выше, что совершенно нечитаемо.

Затем на помощь приходит {“Jadoo” : “Sourcemap” }.
Когда вы создаете для производства, наряду с минимизацией и объединением файлов JavaScript, вы можете создать исходную карту, которая содержит информацию о ваших исходных файлах. По сути, это способ сопоставить минифицированный файл с несобранным состоянием.
Подробнее об исходных картах

Автоматическое связывание исходной карты с New Relic

New Relic и другие основные инструменты предоставляют остальные API/скрипты/пакеты для загрузки исходных карт с JS-файлами.
Мы использовали пакет @newrelic/publish-sourcemap для публикации исходной карты в New Relic.

//sample snippet to push a source map file corresponding to a javascript link
const publishSourcemap = require(‘@newrelic/publish-sourcemap’).publishSourcemap;
publishSourcemap({
    sourcemapPath : jsMapFileAbsolutePath, // js map path on machine
    javascriptUrl : jsUrl, // js url reachable by new relic
    applicationId: APP_ID, // new relic app id
    apiKey: NEW_RELIC_USER_API_KEY, // new relic user key
},(err)=>{console.log('error in pushing::',err)});

Можете ли вы сделать это с локального хоста и протестировать?

Ответ - нет, в общем. Ваш локальный хост не будет доступен из NewRelic и, следовательно, он не сможет найти JS, для которого вы загружаете исходную карту. Если вы просто хотите протестировать код, вы можете использовать несколько доступных ссылок prod/uat вашего приложения во фрагменте выше и test.

На каком этапе развертывания вы бы это активировали?

Единственный вариант здесь, который у нас есть, — это выполнить этот шаг после развертывания, чтобы JS был доступен для серверов New Relic. Мы написали API-интерфейс узла, который запускается после развертывания в качестве последующего этапа для этапа сборки. Этот API рекурсивно перебирает сборку, находит все исходные карты и отправляет их в New Relic.

Скриншот шагов сборки с публикацией исходной карты в действии:

Вы действительно хотите включить исходную карту в рабочей среде?

Как правило, вы не хотите включать исходную карту в рабочей среде, чтобы избежать раскрытия/доступности JS в консоли.
По умолчанию исходные карты создаются параллельно с файлами .js на том же уровне пути с расширением .js.map. так что инструменты разработчика выбирают их по умолчанию, и это предоставляет код в консоли для всех.

Решение. Исходная карта доступна для New Relic, но анонимизирована

В процессе сборки мы перемещаем все исходные карты из их местоположения по умолчанию в анонимное и идентифицируемое по коду местоположение. Затем это используется API-интерфейсом после развертывания для чтения js в jsmap и отправки его в New Relic.

Результат: образец снимка ошибки в New Relic, опубликовавший этот процесс

И наконец:

Это магия! Это волшебство :-)
Если вы нашли это полезным, нажмите «хлопать».