Sentry не предоставляет инструкций по интеграции с Create React App. У них действительно есть хорошо написанный официальный плагин для веб-пакетов, но плагины не могут использоваться с CRA без извлечения. К счастью, документация Sentry CLI великолепна и четко описывает, как интегрировать вручную.
План
Требуется всего три шага:
- Сгенерировать название выпуска
- Создайте приложение CRA с Sentry, инициализированным выпуском из шага 1
- Создайте Sentry Release с именем из шага 1 и исходными картами из шага 2
После этого сборка может быть развернута, и ошибки будут обнаружены Sentry.
Реализация
Переход назад от шага 3 к 1.
Сценарий выпуска Sentry
Поскольку приложение Create React уже является приложением JavaScript, а Sentry CLI имеет приятный интерфейс JavaScript, сценарий также будет написан на JavaScript.
Установите Sentry CLI через npm:
yarn add --dev @sentry/cli
Для установки несекретных параметров можно использовать .sentryclirc
файл:
[defaults] project=YOUR_PROJECT org=YOUR_ORG
Токен Sentry считается частным, и его лучше установить с помощью переменной среды SENTRY_AUTH_TOKEN
Теперь, когда CLI настроен, перейдем к самому файлу сценария:
const SentryCli = require('@sentry/cli'); async function createReleaseAndUpload() { const release = process.env.REACT_APP_SENTRY_RELEASE; if (!release) { console.warn('REACT_APP_SENTRY_RELEASE is not set'); return; } const cli = new SentryCli(); try { console.log('Creating sentry release ' + release); await cli.releases.new(release); console.log('Uploading source maps'); await cli.releases.uploadSourceMaps(release, { include: ['build/static/js'], urlPrefix: '~/static/js', rewrite: false, }); console.log('Finalizing release'); await cli.releases.finalize(release); } catch (e) { console.error('Source maps uploading failed:', e); } } createReleaseAndUpload();
👉 REACT_APP_SENTRY_RELEASE
- имя переменной окружения, в которую будет передано имя Sentry Release. Он начинается с префикса REACT_APP_
, потому что он также будет использоваться в CRA, и все переменные env в CRA должны иметь этот префикс, чтобы быть видимыми во время сборки.
Часть приложения React
Сначала необходимо установить Sentry for browser:
yarn add @sentry/browser
А код для его инициализации может выглядеть примерно так:
if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_SENTRY_RELEASE) { Sentry.init({ dsn: SENTRY_DSN, release: process.env.REACT_APP_SENTRY_RELEASE, }); }
Основная часть здесь - установка release
из переменной окружения REACT_APP_SENTRY_RELEASE
Отправная точка
Следующий скрипт в package.json
отвечает за создание имени выпуска из последнего коммита git, создание приложения и загрузку его данных в Sentry:
"release": "(export REACT_APP_SENTRY_RELEASE=$(git rev-parse --short HEAD); react-scripts build && node scripts/sentry.js)"
git rev-parse --short HEAD
извлекает короткий хеш последнего коммита git
👉 Круглые скобки используются для установки переменной среды для обеих задач.
Результат 🎉
Просто запустите SENTRY_AUTH_TOKEN=YOUR_SENTRY_TOKEN yarn release
, и CRA создаст приложение, а Sentry CLI создаст с ним выпуск.
Я создал репозиторий GitHub, где все собираю.