Как создать исходные карты с помощью Angular CLI и загрузить их в Sentry?

Question

Существует два способа настройки исходных карт: размещение их на сайте и ссылки в связанных файлах или загрузка их непосредственно в службу, такую ​​как сторожевой. Я пытаюсь выполнить последнее. Проблема заключается в том, что, похоже, нет способа генерировать исходные карты с использованием угловых значений без записи пути к файлу в записанные файлы.

Моей первой мыслью было создание двух сборок - одна с генерацией исходных карт, а другая без. Затем я просто развернул бы сборку без исходных карт и загрузил ее вместе с ними в часовой. Это не работает, потому что имена файлов пакета отличаются (angular cli использует хэш файла в качестве имени файла для очистки кэша, и когда вы генерируете исходные карты, он добавляет путь к файлу.map в качестве комментария в конце, вызывая изменение хеша и имя файла).

Мой другой вариант - создать исходные карты, загрузить их в часовой и затем удалить файлы карт перед развертыванием сайта. Однако проблема в том, что файлы комплекта все еще содержат ссылку на несуществующий в настоящее время файл карты. Это не должно быть проблемой само по себе, но это может вызвать проблему с расширениями или браузерами в будущем и просто кажется хакерским решением.

Как бы вы внедрили что-то подобное в процесс сборки?

Answer 1

Как упоминалось в комментариях, вы можете включить sourceMaps в angular.json файл вроде этого:

 "configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "hidden": true
    },

Также я рекомендую вам удалить .mapфайлы после загрузки в часовой и перед развертыванием. Итак, в вашем ci добавьте эту строку:

rm -rf dist/YOUR_PROJECT/*.map

Answer 2

Я столкнулся с этой проблемой, и я решил ее по-другому. Скрытые исходные карты не работают. Sentry заявляет, что файлы JavaScript должны иметь ссылку на карты с использованием комментария sourceMappingURL в конце файлов JavaScript. Я исправил это:

1. Создание исходных карт путем измененияangular.jsonчтобы к этому пути были добавлены следующие настройки (projects -> dashboard -> architect -> build -> configurations -> production) быть следующим:

      {
  "sourceMap": {
    "hidden": false,
    "scripts": true,
    "styles": false
  }
}

2. В моем CI я запускаю следующие команды

      build:
  scripts:
    - npm run build
    - npm run sentry:release    # Create a new release
    - npm run sentry:commits    # Associate commits
    - npm run sentry:deploy     # Upload source maps
    - npm run sentry:finalize   # Finalize release
    # Remove all sourceMappingURL reference from js files
    - find dist -type f -name '*.js' -exec sed -i -E 's/\/\/# sourceMappingURL=[^ ]*\.js\.map//g' {} \;
    # Delete all map files
    - find dist -name "*.map" -exec rm {} \;

И он мгновенно удалит ссылку и исходные карты. Таким образом, у Sentry есть исходные карты, а производственная среда бесплатна, и все довольны.

Answer 3

Официальная рекомендация Sentry — загружать исходные карты через sentry-webpack-plugin или sentry- cli .

В документах CLI не упоминается проблема с публикацией исходных карт, но многие спрашивают об этом в отношении плагина: 1, 2, 3, 4, 5.

Сообщество, похоже, остановилось на решении удалить исходные карты после загрузки. Это может быть достигнуто различными способами, как обсуждалось в приведенных выше вопросах, таких как

1, просто rm -rf dist/**/*.map

2. Различные плагины для веб-пакетов, в первую очередь плагин для чистого веб-пакета.

3. Пользовательский плагин веб-пакета, такой как этот :

webpack.config.js

      const glob = require("glob");
const { removeSync } = require("fs-extra");

...
plugins: [
  ...
  {
    apply: compiler =>
      compiler.hooks.done.tap("CleanJsMapPlugin", () => {
        glob.sync(".webpack/**/*.js.map").forEach(f => removeSync(f));
      }),
      cb();
  },
  ...
]

Answer 4

Вот статья, в которой объясняется, как загружать и отслеживать исходные карты angular в часовую.