Frontend Quickstart

Decipher collects data for the Browser/Frontend via the Sentry SDK. Add a small script to your HTML or install with a package manager to instantly start collecting data on product usage and errors.

Already using Sentry? Check out these docs instead.

⏱ Estimated Time To Completion: 3 minutes

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

• HTML snippet
• Package

1

Log in to Decipher AI and get your script to paste

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.20.0/bundle.tracing.replay.min.js"
  integrity="sha384-e4DRKCQjGj8HoVTcv07HyAm3g1wDECvRclj9gsw2d06z1aLh+78iJ21phn6RhkJD"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({
    dsn: "YOUR_DSN_FROM_DECIPHER", // This will be set for you once you're logged in.
    integrations: [
        Sentry.browserTracingIntegration(),
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
            maskAllInputs: true
        }),
    ],
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
    tracesSampleRate: 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).

2

Identify Users

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

app.tsx

Sentry.setUser({
  // At least one of {id, email, username} should be set.
  id: "unique_user_id",
  email: "[e-mail]",
  username: "username",
  // Additional user information can be added here as arbitrary key-value pairs.
});

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

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