Create React App and Sentry

2 min readJun 19, 2019

Sentry doesn’t provide instructions for integration with Create React App. They do have well written official webpack plugin but plugins can not be used with CRA without ejection. Fortunately Sentry CLI documentation is great and clearly states how to integrate manually.

The plan

Only three steps are required:

Generate release name
Build CRA application having Sentry initialised with release from step 1
Create Sentry Release with name from step 1 and source maps from step 2

After this the build can be deployed and the errors will be caught by Sentry

Implementation

Going backwards from step 3 to 1.

Sentry Release script

As Create React App is already a JavaScript application and Sentry CLI has nice JavaScript interface the script will be also written in JavaScript.

Install Sentry CLI through npm:

yarn add --dev @sentry/cli

For setting non-secret parameters .sentryclirc file can be used:

[defaults]
project=YOUR_PROJECT
org=YOUR_ORG

Sentry token is considered private and it’s better to set it with environment variable SENTRY_AUTH_TOKEN

Now when CLI is all set up lets move to the script file itself:

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 — the name of environment variable where the Sentry Release name will be passed. It starts with REACT_APP_ prefix because it will be used in CRA as well and all env variables in CRA must have this prefix to be visible during the build.

React application part

At first Sentry for browser must be installed:

yarn add @sentry/browser

And the code for its initialisation may look something like this:

if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_SENTRY_RELEASE) {
  Sentry.init({
    dsn: SENTRY_DSN,
    release: process.env.REACT_APP_SENTRY_RELEASE,
  });
}

The main part here setting release from environment variable REACT_APP_SENTRY_RELEASE

Starting point

Following script in package.json is responsible for generating the release name from the latest git commit, building the app and uploading its data to Sentry:

"release": "(export REACT_APP_SENTRY_RELEASE=$(git rev-parse --short HEAD); react-scripts build && node scripts/sentry.js)"

git rev-parse --short HEAD retrieves short hash of latest git commit

👉 Parentheses are used for setting environment variable for both tasks.

The Result 🎉

Just run SENTRY_AUTH_TOKEN=YOUR_SENTRY_TOKEN yarn release and CRA will build the app and Sentry CLI will create release with it.

I created GitHub repository where I put all things together.