Skip to content
Merged
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
5 changes: 3 additions & 2 deletions docs/platforms/javascript/common/configuration/filtering.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ This integration can be very helpful in reducing noise that's not related to you

<Alert>

**Prerequisite**: To use the `thirdPartyErrorFilterIntegration`, ensure you are using a bundler and one of [Sentry's bundler plugins](https://github.com/getsentry/sentry-javascript-bundler-plugins).
**Prerequisite**: To use the `thirdPartyErrorFilterIntegration`, ensure you are using a bundler and one of [Sentry's bundler plugins](https://github.com/getsentry/sentry-javascript-bundler-plugins). For **Next.js with Turbopack**, use the [`_experimental.turbopackApplicationKey`](/platforms/javascript/guides/nextjs/configuration/build/#_experimentalturbopackapplicationkey) build option instead.

</Alert>

Expand Down Expand Up @@ -157,7 +157,8 @@ See <PlatformLink to="/configuration/options/#beforeBreadcrumb">beforeBreadcrumb

Hints are available in two places:

1. <PlatformIdentifier name="before-send" /> / <PlatformIdentifier name="before-breadcrumb" />
1. <PlatformIdentifier name="before-send" /> /
<PlatformIdentifier name="before-breadcrumb" />
2. Event processors added via `Sentry.addEventProcessor()`

Event and breadcrumb `hints` are objects containing various types of information used to put together an event or a breadcrumb. Typically `hints` hold the original exception so that additional data can be extracted or grouping can be affected.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -375,3 +375,86 @@ A list of React component names to exclude from component annotation.
Configuration options for tree shaking. Refer to the [tree shaking documentation](/platforms/javascript/guides/nextjs/configuration/tree-shaking) for more details.

</SdkOption>

## Experimental Turbopack Options

<Alert level="warning">
These options are experimental and require **Next.js 16+**. Their API may
change in future releases.
</Alert>

<SdkOption name="_experimental.turbopackReactComponentAnnotation.enabled" type="boolean" defaultValue="false">

<AvailableSince version="10.43.0" />

Enables React component name annotation for Turbopack builds. This is the Turbopack equivalent of [`webpack.reactComponentAnnotation`](#webpackreactcomponentannotationenabled).

When enabled, React components are annotated with `data-sentry-component`, `data-sentry-element`, and `data-sentry-source-file` attributes at build time. These attributes allow Sentry to identify which components users interacted with in [Session Replay](/platforms/javascript/guides/nextjs/session-replay/) and [breadcrumbs](/platforms/javascript/guides/nextjs/enriching-events/breadcrumbs/).

```javascript {filename:next.config.ts}
import { withSentryConfig } from "@sentry/nextjs";

export default withSentryConfig(nextConfig, {
_experimental: {
turbopackReactComponentAnnotation: {
enabled: true,
},
},
});
```

</SdkOption>

<SdkOption name="_experimental.turbopackReactComponentAnnotation.ignoredComponents" type="string[]">

A list of React component names to exclude from annotation in Turbopack builds.

```javascript {filename:next.config.ts}
import { withSentryConfig } from "@sentry/nextjs";

export default withSentryConfig(nextConfig, {
_experimental: {
turbopackReactComponentAnnotation: {
enabled: true,
ignoredComponents: ["SensitiveForm", "InternalDebugPanel"],
},
},
});
```

</SdkOption>

<SdkOption name="_experimental.turbopackApplicationKey" type="string">

<AvailableSince version="10.41.0" />

Application key used by [`thirdPartyErrorFilterIntegration`](/platforms/javascript/configuration/filtering/#using-thirdpartyerrorfilterintegration) to distinguish first-party code from third-party code in Turbopack builds. This is the Turbopack equivalent of setting `applicationKey` via the Sentry Webpack Plugin.

When set, a Turbopack loader injects `_sentryModuleMetadata` into every first-party module, enabling the `thirdPartyErrorFilterIntegration` to filter errors from browser extensions, injected scripts, and third-party widgets.

The value must match the `filterKeys` array in your `thirdPartyErrorFilterIntegration` configuration.

```javascript {filename:next.config.ts}
import { withSentryConfig } from "@sentry/nextjs";

export default withSentryConfig(nextConfig, {
_experimental: {
turbopackApplicationKey: "my-nextjs-app",
},
});
```

```javascript {filename:instrumentation-client.ts}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code block does not render in the preview 🤔. Everything else shows up, though

import * as Sentry from "@sentry/nextjs";

Sentry.init({
integrations: [
Sentry.thirdPartyErrorFilterIntegration({
filterKeys: ["my-nextjs-app"],
behaviour: "drop-error-if-exclusively-contains-third-party-frames",
}),
],
});
```

</SdkOption>
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ For a complete reference of all build configuration options, see the [Build Conf
| Middleware instrumentation | Automatic via Next.js telemetry | Build-time code injection |
| Source map upload | Post-compile during build | During build via plugin (default) |
| Route exclusion | Not supported | Supported via `webpack.excludeServerRoutes` |
| React component annotation | Not supported | Supported via `webpack.reactComponentAnnotation` |
| React component annotation | Experimental (Next.js 16+) | Supported via `webpack.reactComponentAnnotation` |
| Logger tree-shaking | Not supported | Supported via `webpack.treeshake.removeDebugLogging` |

## Auto-Instrumentation Options
Expand Down Expand Up @@ -268,8 +268,10 @@ export async function submitForm(formData: FormData) {
With Webpack, you can enable React component name tracking. This annotates React components with `data-sentry-*` attributes that allow Sentry to identify which components users interacted with in [Session Replay](/platforms/javascript/guides/nextjs/session-replay/) and [breadcrumbs](/platforms/javascript/guides/nextjs/enriching-events/breadcrumbs/).

<Alert level="info">
This feature is only available with Webpack. Turbopack does not support React
component annotation.
For Turbopack builds, component annotation is available as an experimental
feature requiring Next.js 16+. See
[`_experimental.turbopackReactComponentAnnotation`](/platforms/javascript/guides/nextjs/configuration/build/#_experimentalturbopackreactcomponentannotationenabled)
in the build options reference.
</Alert>

<SplitLayout>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
**Webpack:**

```javascript {tabTitle:CJS} {filename:next.config.js} {3}
module.exports = withSentryConfig(nextConfig, {
unstable_sentryWebpackPluginOptions: {
Expand All @@ -13,3 +15,13 @@ export default withSentryConfig(nextConfig, {
},
});
```

**Turbopack (Next.js 16+, experimental):**

```javascript {filename:next.config.ts} {3}
export default withSentryConfig(nextConfig, {
_experimental: {
turbopackApplicationKey: "your-custom-application-key",
},
});
```
Loading