Sentry не предоставляет инструкций по интеграции с Create React App. У них действительно есть хорошо написанный официальный плагин для веб-пакетов, но плагины не могут использоваться с CRA без извлечения. К счастью, документация Sentry CLI великолепна и четко описывает, как интегрировать вручную.

План

Требуется всего три шага:

  1. Сгенерировать название выпуска
  2. Создайте приложение CRA с Sentry, инициализированным выпуском из шага 1
  3. Создайте 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, где все собираю.