# Sentry

The c15t sentry helper keeps Sentry error reports on from the first page under the necessary category in Inth. Session Replay and user data wait until visitors allow measurement.

## Key facts

- **Tool:** Sentry
- **Category:** Other
- **Consent categories:** Strictly necessary, Measurement
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/sentry)
- [Sentry](https://sentry.io/)

Keep Sentry error reports on from the first page, and hold Session Replay and user data until visitors allow measurement.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app, c15t in that app and the DSN of your Sentry project.

New to c15t? Complete the quickstart for your framework first. Keep its Inth endpoint, policy, styles and consent UI.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with Sentry

With a dsn and the default loadMode, the c15t sentry helper loads the Sentry CDN bundle on each page. Error reports use the necessary category.

While measurement has no permission, c15t removes user fields, cookies, request headers and the inferred IP address from events. A grant gives back your collection settings.

Session Replay waits for measurement. On withdrawal, c15t stops Replay without a flush and discards queued uploads. Data that Sentry already has stays in Sentry.

Your own Sentry SDK from ^10.67.0 or ^11.0.0 also works. Pass getClient, init and setUser in place of dsn.

## Installation

The helper has two modes for when Sentry runs. Pick the mode that your policy needs.

### Errors from the start

Errors go to Sentry before a choice, without user data. Replay waits for measurement.

```ts
loadMode: 'always'
```

### Wait for permission

Sentry runs only while measurement has permission. On withdrawal, Sentry sends nothing more.

```ts
loadMode: 'after-consent'
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Replay can start on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start Sentry.

```
pnpm add @c15t/integrations
```

#### Add your DSN

The helper loads SDK 11.4.0 with subresource integrity and calls Sentry.init. replay.min.js loads after consent when a Replay sample rate is above 0.

```
import { sentry } from '@c15t/integrations/sentry';

export const scripts = [
  sentry({
    dsn: 'https://your-key@o0.ingest.sentry.io/0',
    loadMode: 'always',
    initOptions: {
      release: 'my-app@1.0.0',
      replaysOnErrorSampleRate: 1,
      replaysSessionSampleRate: 0.1,
      tracesSampleRate: 0.1,
    },
  }),
];
```

A blank DSN logs an error, and the script does not load. CDN URLs need an exact release version.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="necessary">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Remove each Sentry Loader Script or CDN tag first. For Replay, allow worker-src blob: and your ingest endpoint in connect-src. CDN mode also needs https://browser.sentry-cdn.com in script-src.

## Verify your setup

These checks use the always mode, an opt-in policy and replaysSessionSampleRate: 1. Open a private window and DevTools Network, and filter by sentry. Then test the three states.

- **Before a choice**: bundle.min.js loads, and errors get to Sentry without user. No replay.min.js or replay\_recording request goes out.

- **After you allow measurement**: Without a page reload, Replay loads and replay\_recording requests start.

- **After you withdraw measurement**: Save your choice. c15t reloads the page. No replay request follows.

c15t does not gate tracing. Custom messages, tags, extras, attachments and URL paths stay in reports, so keep sensitive values out of them.

[Open the full Sentry guide](https://c15t.com/docs/integrations/sentry)

## Related guides

- [Vercel Speed Insights](/integrations/vercel-speed-insights)

- [FullStory](/integrations/fullstory)

- [Hotjar](/integrations/hotjar)