Already using Sentry? Check out these docs instead.
⏱ Estimated Time To Completion: 3 minutes
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.
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.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 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.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 AI and get your snippet to initialize the SDK
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.
Need help? Get white-glove onboarding support from the team, totally free.
