Add Sentry to React SPA

Install package

npm install --save @sentry/react

Configure SDK

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "<your-dsn>",
  // Setting this option to true will send default PII data to Sentry.
  // For example, automatic IP address collection on events
  sendDefaultPii: true
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />);

Upload source maps

TODO…

Configure allowed origins

Configure CORS headers

Sentry will include the sentry-trace and baggage headers when you make HTTP requests so ensure any servers that receive your requests are configure to allow those headers in incoming requests.

Verify all works ok

import * as Sentry from '@sentry/react';
// Add this button component to your app to test Sentry's error tracking
function ErrorButton() {
  return (
    <button
      onClick={() => {
        throw new Error('This is your first error!');
      }}
    >
      Break the world
    </button>
  );
}