Frontend Quickstart

Already using Sentry? Check out these docs instead. Already using PostHog? Check out these docs instead.

⏱ Estimated Time To Completion: 3 minutes

Decipher supports two SDK options for frontend integration: Sentry and PostHog. By default, we recommend using the Sentry SDK. If you already have PostHog replays setup via your own PostHog account, you may set up Decipher via the PostHog SDK.

You can choose to get started with the Sentry SDK by using the HTML script tag or via a package manager below.

Log in to Decipher with your work email. You will receive a snippet to paste into your HTML head, which will look something like the example below:

Initialization (copy and paste)
<script
  src="https://browser.sentry-cdn.com/8.47.0/bundle.tracing.replay.min.js"
  integrity="sha384-VaqNrma84jlgEWxBCMOnatKAHLSjaKGmo8Biuj3NQEg1MrmeukY8s6pnaTgRVjKM"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
            maskAllInputs: true
        }),
        // You can optionally specify log levels (see further docs)
        Sentry.captureConsoleIntegration(),
        Sentry.browserTracingIntegration(),
    ],
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
  });
</script>

This should be pasted into your website’s HTML head as early as possible. You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

Log in to Decipher with your work email. You will receive a snippet to paste into your HTML head, which will look something like the example below:

Initialization (copy and paste)
<script
  src="https://browser.sentry-cdn.com/8.47.0/bundle.tracing.replay.min.js"
  integrity="sha384-VaqNrma84jlgEWxBCMOnatKAHLSjaKGmo8Biuj3NQEg1MrmeukY8s6pnaTgRVjKM"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
            maskAllInputs: true
        }),
        // You can optionally specify log levels (see further docs)
        Sentry.captureConsoleIntegration(),
        Sentry.browserTracingIntegration(),
    ],
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
  });
</script>

This should be pasted into your website’s HTML head as early as possible. You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

Install the SDK

Using your package manager of choice, install the @sentry/browser SDK. This is the only package you need, no matter what framework and libraries your frontend is using.

npm install @sentry/browser --save

Log in to Decipher with your work email. You will receive a snippet to initialize the SDK — paste this at the root of your project frontend/client code. It will look something like this:

Sentry.init({
  dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
  integrations: [
      Sentry.replayIntegration({
          maskAllText: false,
          blockAllMedia: false,
          maskAllInputs: true
      }),
      // You can optionally specify log levels (see further docs)
      Sentry.captureConsoleIntegration(),
      Sentry.browserTracingIntegration(),
  ],
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 1.0,
  tracesSampleRate: 1.0,
});

You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

You can choose to get started with the Sentry SDK by using the HTML script tag or via a package manager below.

Log in to Decipher with your work email. You will receive a snippet to paste into your HTML head, which will look something like the example below:

Initialization (copy and paste)
<script
  src="https://browser.sentry-cdn.com/8.47.0/bundle.tracing.replay.min.js"
  integrity="sha384-VaqNrma84jlgEWxBCMOnatKAHLSjaKGmo8Biuj3NQEg1MrmeukY8s6pnaTgRVjKM"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
            maskAllInputs: true
        }),
        // You can optionally specify log levels (see further docs)
        Sentry.captureConsoleIntegration(),
        Sentry.browserTracingIntegration(),
    ],
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
  });
</script>

This should be pasted into your website’s HTML head as early as possible. You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

Log in to Decipher with your work email. You will receive a snippet to paste into your HTML head, which will look something like the example below:

Initialization (copy and paste)
<script
  src="https://browser.sentry-cdn.com/8.47.0/bundle.tracing.replay.min.js"
  integrity="sha384-VaqNrma84jlgEWxBCMOnatKAHLSjaKGmo8Biuj3NQEg1MrmeukY8s6pnaTgRVjKM"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
            maskAllInputs: true
        }),
        // You can optionally specify log levels (see further docs)
        Sentry.captureConsoleIntegration(),
        Sentry.browserTracingIntegration(),
    ],
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
  });
</script>

This should be pasted into your website’s HTML head as early as possible. You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

Install the SDK

Using your package manager of choice, install the @sentry/browser SDK. This is the only package you need, no matter what framework and libraries your frontend is using.

npm install @sentry/browser --save

Log in to Decipher with your work email. You will receive a snippet to initialize the SDK — paste this at the root of your project frontend/client code. It will look something like this:

Sentry.init({
  dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
  integrations: [
      Sentry.replayIntegration({
          maskAllText: false,
          blockAllMedia: false,
          maskAllInputs: true
      }),
      // You can optionally specify log levels (see further docs)
      Sentry.captureConsoleIntegration(),
      Sentry.browserTracingIntegration(),
  ],
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 1.0,
  tracesSampleRate: 1.0,
});

You can configure some of the parameters (e.g. to adjust capture rate).

Identify Users

Identify users where user information is available in your application frontend, typically after authentication or login.

For Next.js applications, ensure that this code is placed in a file that includes the "use client" directive at the top.

// Set user information in Decipher via the Sentry TypeScript SDK
Sentry.setUser({
  "email": "jane.doe@example.com",  // Recommended identifier to set
  "id": "your_internal_unique_identifier", // Optional: use if email not available
  "username": "unique_username", // Optional: use if email not available
  "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
  "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
  "role": "client", // Optional: what is this user's role/type?
  // You can add more user information here as key/value pairs.
});

Once you’re done, simply use your website to validate that Decipher is collecting session replay data.

This section is exclusively for users who already have PostHog installed in their application. If you’re starting from scratch, please use the Sentry SDK option instead.

⏱ Estimated Time To Completion: 2 minutes

Get your new api host by creating a project in Decipher

Log in to Decipher with your work email. On the Organization Settings page, choose a project name and click “Create New Project”.

We auto-create a Decipher-only project called “FirstFrontendProject” when your organization registers with Decipher, but that is separate from the PostHog project you’re about to add.

On the following screen, choose “Decipher and PostHog” as your data source.

After creating your project, you’ll see the API host (as Decipher DSN) that you’ll need to use in your code:

Update your PostHog initialization to use the Decipher host and configuration

Find your PostHog init and update the api_host to the **Decipher DSN **provided above.
Ensure capture_dead_clicks = true and rageclick = true.

 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY as string, {
      api_host: process.env.NEXT_PUBLIC_DECIPHER_API_HOST as string, // Update this to the Decipher DSN
      rageclick: true, // [Required] ensure to enable rage clicks
      capture_dead_clicks: true, //[Required] ensure to enable rage clicks
      ip: true, // optional
      ...
    })
  }

Identify Users

Make sure to identify users where user information is available in your application frontend, typically after authentication or login.

// Set user information in Decipher via the Posthog TypeScript SDK

import {usePostHog} from 'posthog-js/react'

// ... then in your component
const {posthog} = usePostHog()
posthog.identify(
  "your_internal_unique_identifier",
  {
    "email": "jane.doe@example.com",  // Recommended identifier to set
    "username": "unique_username", // Optional: use if email not available
    "account": "AcmeCo",  // Recommended: Which account/organization is this user a member of?
    "created_at": "2025-04-01T15:30:00Z", // Recommended: date this user signed up.
    "role": "admin"
  }
);

Once you’re done, simply use your website to validate that Decipher is collecting session replay data (and that Posthog is too).

Need help? Get white-glove onboarding support from the team, totally free

Introduction

Frontend Frameworks

Backend Frameworks

Features

Advanced

Migrations