> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getdecipher.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Monitoring Quickstart

> Add a small script to your HTML or install with a package manager to collect session replays, generate automated tests, and get alerted on issues.

<Note>
  Already using Sentry to collect replays? Check out the [Sentry migration guide](/pages/migrations/coming-from-sentry) instead.
</Note>

<Check>**⏱ Estimated Time To Completion: 3 minutes**</Check>

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

<Tabs>
  <Tab title="HTML snippet">
    <Steps>
      <Step title="Log in to Decipher AI and get your script to paste">
        Log in to [Decipher](https://app.getdecipher.com) with your work email. You will receive a snippet to paste into your HTML head, which will look
        something like the example below:

        <Note>
          **Important for automated testing:** If you're using Decipher's automated testing feature, you'll need to set `maskAllInputs: false` on the environment where you'll record test steps (usually localhost or staging). This ensures that input interactions are captured correctly for test generation.
        </Note>

        ```javascript Initialization (copy and paste) theme={null}
        <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, // Set to false if using automated testing on this environment
                    networkDetailAllowUrls: [/^.*$/],
                }),
                // 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).
      </Step>

      <Step title="Identify Users">
        Identify users where user information is available **in your application frontend**, typically after authentication or login.

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

        ```typescript theme={null}
        // 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.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Package">
    <Steps>
      <Step title="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.

        <CodeGroup>
          ```bash npm theme={null}
          npm install @sentry/browser --save
          ```

          ```bash yarn theme={null}
          yarn add @sentry/browser
          ```

          ```bash pnpm theme={null}
          pnpm add @sentry/browser
          ```

          ```bash bun theme={null}
          bun add @sentry/browser
          ```
        </CodeGroup>
      </Step>

      <Step title="Log in to Decipher AI and get your snippet to initialize the SDK">
        Log in to [Decipher](https://app.getdecipher.com) 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:

        <Note>
          **Important for automated testing:** If you're using Decipher's automated testing feature, you'll need to set `maskAllInputs: false` on the environment where you'll record test steps (usually localhost or staging). This ensures that input interactions are captured correctly for test generation.
        </Note>

        ```typescript theme={null}
        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 // Set to false if using automated testing on this environment
              }),
              // 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).
      </Step>

      <Step title="Identify Users">
        Identify users where user information is available **in your application frontend**, typically after authentication or login.

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

        ```typescript theme={null}
        // 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.
      </Step>
    </Steps>
  </Tab>
</Tabs>

Need help? <a href="https://cal.com/decipher/onboarding" target="_blank">Get white-glove onboarding support from the team, totally free</a>.