Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 40 additions & 16 deletions sdk/next-js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -335,33 +335,57 @@ function SyncIdentity() {

## Consent

By default all features are active. To respect a cookie banner or privacy preference, pass `consent` to the provider. Once you do, only essential capture (error tracking and logs) plus the categories you opt into will run:
Without a `consent` option, the SDK runs with its configured defaults. To wait for a visitor's choice before starting analytics or replay, pass `false` to `init()`:

```tsx app/layout.tsx
<InterfereProvider consent={{ analytics: true, replay: false }}>{children}</InterfereProvider>
```ts instrumentation-client.ts
import { init } from "@interfere/next/instrumentation-client";

await init({ consent: false });
```

| Category | What it covers | Gateable |
| ----------- | ------------------------------------- | --------- |
| `necessary` | Error tracking, logs | Always on |
| `analytics` | Page events, rage clicks, device info | Yes |
| `replay` | Session replay | Yes |
Set this before React renders. Passing consent only to the provider leaves a gap between initialization and the first render.

Consent describes what the visitor allows **right now**. The same values work in `init()`, the provider's `consent` prop, and `consent.set()`:

Update consent at runtime through the same hook:
| Value | What it allows |
| ------------------------------------ | ---------------------------- |
| `false` | Neither analytics nor replay |
| `true` | Both analytics and replay |
| `{ analytics: true, replay: false }` | Analytics only |

| Category | What it covers |
| ----------- | ------------------------------------- |
| `analytics` | Page events, rage clicks, device info |
| `replay` | Session replay |

Update the decision when the visitor accepts, declines, or changes their preferences:

```tsx
const { consent } = useInterfere();

consent.set({ analytics: true, replay: true }); // selective
consent.set(); // grant everything
consent.set(true);
```

Interfere works with any consent platform (c15t, CookieYes, OneTrust). Map its booleans to the categories above.
Use `consent.set(false)` to withdraw both permissions, or pass an object for separate choices:

```tsx
consent.set({ analytics: true, replay: false });
```

<Tip>
Set the `consent` prop from the provider's first render so a non-consented feature never gets a
chance to load. Update it through the hook as the user changes their mind.
</Tip>
Each update replaces the previous decision. Omitted categories are allowed, so include both booleans when mapping choices from a consent platform such as c15t, CookieYes, or OneTrust.

You can also keep the decision synchronized through the provider:

```tsx
<InterfereProvider consent={{ analytics: true, replay: false }}>{children}</InterfereProvider>
```

Omitting the provider's `consent` prop preserves the decision supplied to `init()` or updated at runtime. Calling `consent.set()` without a value removes consent restrictions; it does not record the visitor's acceptance.

<Note>
Consent controls analytics and replay. It does not disable errors, logs, tracing, or session
storage, and granting consent does not enable plugins disabled in configuration.
</Note>

## Mask replay data

Expand Down
58 changes: 40 additions & 18 deletions sdk/vite.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -245,35 +245,57 @@ function SyncIdentity() {

## Consent

Everything captures out of the box. To tie that to a cookie banner or a privacy choice, hand the provider a `consent` object. From then on only essential capture (error tracking and logs) runs, plus whichever categories you switch on:
Without a `consent` option, the SDK runs with its configured defaults. To wait for a visitor's choice before starting analytics or replay, pass `false` to `init()`:

```tsx
<InterfereProvider consent={{ analytics: true, replay: false }}>
{/* your routes */}
</InterfereProvider>
```ts src/main.tsx
import { init } from "@interfere/vite/init";

await init({ consent: false });
```

| Category | What it covers | Gateable |
| ----------- | ------------------------------------- | --------- |
| `necessary` | Error tracking, logs | Always on |
| `analytics` | Page events, rage clicks, device info | Yes |
| `replay` | Session replay | Yes |
Set this before React renders. Passing consent only to the provider leaves a gap between initialization and the first render.

Update consent at runtime through the same hook:
Consent describes what the visitor allows **right now**. The same values work in `init()`, the provider's `consent` prop, and `consent.set()`:

| Value | What it allows |
| ------------------------------------ | ---------------------------- |
| `false` | Neither analytics nor replay |
| `true` | Both analytics and replay |
| `{ analytics: true, replay: false }` | Analytics only |

| Category | What it covers |
| ----------- | ------------------------------------- |
| `analytics` | Page events, rage clicks, device info |
| `replay` | Session replay |

Update the decision when the visitor accepts, declines, or changes their preferences:

```tsx
const { consent } = useInterfere();

consent.set({ analytics: true, replay: true }); // selective
consent.set(); // grant everything
consent.set(true);
```

Interfere works with any consent platform (c15t, CookieYes, OneTrust). Map its booleans to the categories above.
Use `consent.set(false)` to withdraw both permissions, or pass an object for separate choices:

<Tip>
Set the `consent` prop from the provider's first render so a non-consented feature never gets a
chance to load. Update it through the hook as the user changes their mind.
</Tip>
```tsx
consent.set({ analytics: true, replay: false });
```

Each update replaces the previous decision. Omitted categories are allowed, so include both booleans when mapping choices from a consent platform such as c15t, CookieYes, or OneTrust.

You can also keep the decision synchronized through the provider:

```tsx
<InterfereProvider consent={{ analytics: true, replay: false }}>{children}</InterfereProvider>
```

Omitting the provider's `consent` prop preserves the decision supplied to `init()` or updated at runtime. Calling `consent.set()` without a value removes consent restrictions; it does not record the visitor's acceptance.

<Note>
Consent controls analytics and replay. It does not disable errors, logs, tracing, or session
storage, and granting consent does not enable plugins disabled in configuration.
</Note>

## Mask replay data

Expand Down
Loading