Frontend Quickstart
Decipher collects data for the Browser/Frontend via the Sentry SDK. Add a small script or install via NPM to instantly start collecting data on product usage and errors.
You can choose to get started with Decipher by using the Loader Script or NPM Package below.
Paste the script into your website
Install the SDK by including the script below on your website. Tracing, session replay, and errors will automatically be captured.
You can configure some of the parameters (e.g. to adjust capture rate) below.
<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", // Get this at https://app.getdecipher.com/settings
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({
maskAllText: false,
blockAllMedia: false,
maskAllInputs: true
}),
],
replaysOnErrorSampleRate: 1.0,
replaysSessionSampleRate: 1.0,
tracesSampleRate: 1.0,
});
</script>
You can get the dsn
parameter by logging into Decipher with your work email. On the Settings page, select a new project name and click ”Create New Project”. Decipher will generate a DSN to that you can paste.
Test the integration
That’s it! Now test the integration by forcing an error anywhere in your app, e.g.
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 usage and errors to highlight the important, high-impact bugs.