⏱ Estimated Time To Completion: 5 minutes

Please make sure you’ve installed Decipher for your frontend before continuing.

1

Initialize the Sentry SDK

Initialize the Sentry SDK in your backend project. The steps for this vary based on your language and framework; see Sentry docs here.

For example, for a NextJS project, run the following command at the root of your repository.

Terminal
npx @sentry/wizard@latest -i nextjs
2

Create a Decipher project and get your DSN

If you're using Decipher only (recommended)

3

Update your Sentry initialization

Update the DSN parameter in your Sentry init call (which varies by language) to the new DSN.

For example:

instrumentation.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.DECIPHER_DSN_FROM_STEP_2, // Replace with your Decipher DSN.
  // Other Sentry options can go here.
});
For NextJS projects, you’ll need to update the DSN in sentry.client.config.ts, sentry.edge.config.ts, and sentry.server.config.ts (or instrumentation.ts).
4

[Frontend Only] Configuring Session Replays for AI Analysis

To provide enough context for the AI to determine which errors are high severity, you need to make sure session replays are configured correctly.

It is important that you set maskAllText: false. For additional privacy, you can set maskAllInputs: true.

Recommended configuration:

sentry.client.config.ts
Sentry.init({
  dsn: process.env.DECIPHER_DSN_FROM_STEP_2, // Replace with your Decipher DSN.
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      maskAllInputs: false, // Set this to `true` for extra privacy.
      blockAllMedia: false,
    }),
  ],
  // Other Sentry options can go here.
});
5

Test the integration

That’s it! Now test the integration by forcing an error anywhere in your app, e.g.

app/cart.tsx
function Cart() {
    // ... existing code ...

    const handleError = () => {
        throw new Error("This is a test error for Decipher's Sentry integration.");
    };

    return (
        <div>
            <button onClick={handleError}>Trigger Error</button>
        </div>
    );
    // ... existing code ...
}

Check out the Decipher dashboard to see information about your captured error. Decipher will automatically analyze and group your errors to highlight the important, high-impact ones.