Gatsby

Learn how to use Sentry with Gatsby.

To use Sentry with your Gatsby application, you will need to use @sentry/gatsby (Sentry’s Gatsby SDK):

Copied
npm install --save @sentry/gatsby

@sentry/gatsby is a wrapper around the @sentry/react package, with added functionality related to Gatsby. All methods available in the @sentry/react package can also be imported from @sentry/gatsby.

Register the @sentry/gatsby plugin in your Gatsby configuration file (typically gatsby-config.js).

gatsby-config.js
Copied
module.exports = {
  plugins: [
    {
      resolve: "@sentry/gatsby",
    },
  ],
};

Then, configure your Sentry.init:

sentry.config.(js|ts)
Copied
import * as Sentry from "@sentry/gatsby";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").