From db33c95080f19e0c18395bd78fe9c9c085e31f66 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 17 Jun 2024 16:45:31 +0200 Subject: [PATCH 1/9] Add docs for thirdPartyErrorFilterIntegration --- .../common/configuration/filtering.mdx | 105 +++++++++++++++++- 1 file changed, 104 insertions(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index a0bc6c5719728..ee692e9d6a38d 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -83,11 +83,114 @@ Sentry.init({ You can also use `denyUrls` if you want to block specific URLs from sending exceptions to Sentry. +### Using the `thirdPartyErrorFilterIntegration` + +The `thirdPartyErrorFilterIntegration` allows you to filter out errors originating from third parties, such as browser extensions, code-injecting browsers, or widgets from third-party services that also use Sentry. +This integration can be very helpful when wanting to reduce noise that is unrelated to your own application code. + + + +**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). + + + +The integration works by "marking" your JavaScript files with an "application key" during the build process. +At runtime, if an error occurs, the integration checks application keys for each stack frame in the stack trace. +This allows you to filter out errors with "unmarked" stack frames, which would indicate third-party code. + +To set up the integration, first pass an `applicationKey` to your Sentry bundler plugin. This can be an arbitrary string that identifies your application code: + +```ts {tabTitle:Vite} {8} +// vite.config.ts +import { defineConfig } from "vite"; +import { sentryVitePlugin } from "@sentry/vite-plugin"; + +export default defineConfig({ + plugins: [ + sentryVitePlugin({ + applicationKey: "your-custom-application-key", + }), + ], +}); +``` + +```js {tabTitle:Webpack} {7} +// webpack.config.js +const { sentryWebpackPlugin } = require("@sentry/webpack-plugin"); + +module.exports = { + plugins: [ + sentryWebpackPlugin({ + applicationKey: "your-custom-application-key", + }), + ], +}; +``` + +```js {tabTitle:esbuild} {7} +// esbuild.config.js +const { sentryEsbuildPlugin } = require("@sentry/esbuild-plugin"); + +require("esbuild").build({ + plugins: [ + sentryEsbuildPlugin({ + applicationKey: "your-custom-application-key", + }), + ], +}); +``` + +```js {tabTitle:Rollup} {7} +// rollup.config.mjs +import { sentryRollupPlugin } from "@sentry/rollup-plugin"; + +export default { + plugins: [ + sentryRollupPlugin({ + applicationKey: "your-custom-application-key", + }), + ], +}; +``` + +Next, add the `thirdPartyErrorFilterIntegration` to your Sentry initialization: + +```js {3-14} +Sentry.init({ + integrations: [ + Sentry.thirdPartyErrorFilterIntegration({ + // Specify the application keys that you specified in the Sentry bundler plugin + filterKeys: ["your-custom-application-key"], + + // Defines how to handle errors that contain third party stack frames. + // Possible values are: + // - 'drop-error-if-contains-third-party-frames' + // - 'drop-error-if-exclusively-contains-third-party-frames' + // - 'apply-tag-if-contains-third-party-frames' + // - 'apply-tag-if-exclusively-contains-third-party-frames' + behaviour: "drop-error-if-contains-third-party-frames", + }), + ], +}); +``` + +The `filterKeys` option takes an array of strings that should be equal to the `applicationKey` value set in the bundler plugin options. +Unless your website hosts files from more than one of your build-processes, the array should only contain one item. + +The `behaviour` option defines what should happen with errors that contain stack frames from third-party code. +There are four modes you can choose from: + +- `"drop-error-if-contains-third-party-frames"`: Drop error events that contain at least one third-party stack frame. +- `"drop-error-if-exclusively-contains-third-party-frames"`: Drop error events that exclusively contain third-party stack frames. +- `"apply-tag-if-contains-third-party-frames"`: Keep all error events, but apply a `third_party_code: true` tag in case the error contains at least one third-party stack frame. +- `"apply-tag-if-exclusively-contains-third-party-frames"`: Keep all error events, but apply a `third_party_code: true` tag in case the error contains exclusively third-party stack frames. + +If you choise a mode to only apply tags, the tags can then be used in Sentry to filter your issue stream with the `third_party_code` tag in the issue search bar. + ## Filtering Transaction Events To prevent certain transactions from being reported to Sentry, use the or configuration option, which allows you to provide a function to evaluate the current transaction and drop it if it's not one you want. - ### Using You can use the option to filter out transactions that match a certain pattern. This option receives a list of strings and regular expressions to match against the transaction name. When using strings, partial matches will be filtered out. If you need to filter by exact match, use regex patterns instead. From 46d20d4748654ab9905d5d97fe409a9c0e3781ff Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 17 Jun 2024 16:53:19 +0200 Subject: [PATCH 2/9] Add version and browser req --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index ee692e9d6a38d..28de339983513 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -85,6 +85,8 @@ You can also use `denyUrls` if you want to block specific URLs from sending exce ### Using the `thirdPartyErrorFilterIntegration` +_Available in browser-based SDKs from version 8.10.0_ + The `thirdPartyErrorFilterIntegration` allows you to filter out errors originating from third parties, such as browser extensions, code-injecting browsers, or widgets from third-party services that also use Sentry. This integration can be very helpful when wanting to reduce noise that is unrelated to your own application code. From aef9897122869ae9f839767f7a146081826b8c05 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:27:47 +0200 Subject: [PATCH 3/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 28de339983513..9c73af89253fd 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -83,7 +83,7 @@ Sentry.init({ You can also use `denyUrls` if you want to block specific URLs from sending exceptions to Sentry. -### Using the `thirdPartyErrorFilterIntegration` +### Using `thirdPartyErrorFilterIntegration` _Available in browser-based SDKs from version 8.10.0_ From 14cca56e8d5f5788bd472cc3691a5311c0396299 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:27:54 +0200 Subject: [PATCH 4/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 9c73af89253fd..9cba83e581e80 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -88,7 +88,7 @@ You can also use `denyUrls` if you want to block specific URLs from sending exce _Available in browser-based SDKs from version 8.10.0_ The `thirdPartyErrorFilterIntegration` allows you to filter out errors originating from third parties, such as browser extensions, code-injecting browsers, or widgets from third-party services that also use Sentry. -This integration can be very helpful when wanting to reduce noise that is unrelated to your own application code. +This integration can be very helpful in reducing noise that's not related to your own application code. From fd4e2f76848863dc35b0d5e2785da2a968e21956 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:27:59 +0200 Subject: [PATCH 5/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 9cba83e581e80..7ad25dc70892c 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -96,7 +96,7 @@ This integration can be very helpful in reducing noise that's not related to you -The integration works by "marking" your JavaScript files with an "application key" during the build process. +This integration works by "marking" your JavaScript files with an "application key" during the build process. At runtime, if an error occurs, the integration checks application keys for each stack frame in the stack trace. This allows you to filter out errors with "unmarked" stack frames, which would indicate third-party code. From b1b5618bfbd874e991dddfa62b91eb1c70fa913e Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:28:04 +0200 Subject: [PATCH 6/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 7ad25dc70892c..9d80973bbd94b 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -97,7 +97,7 @@ This integration can be very helpful in reducing noise that's not related to you This integration works by "marking" your JavaScript files with an "application key" during the build process. -At runtime, if an error occurs, the integration checks application keys for each stack frame in the stack trace. +At runtime, if an error occurs, this integration checks application keys for each stack frame in the stack trace. This allows you to filter out errors with "unmarked" stack frames, which would indicate third-party code. To set up the integration, first pass an `applicationKey` to your Sentry bundler plugin. This can be an arbitrary string that identifies your application code: From 195767f226e477902293f0e372b587d7ff1b10fb Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:28:09 +0200 Subject: [PATCH 7/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 9d80973bbd94b..b9f33e741f254 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -100,7 +100,7 @@ This integration works by "marking" your JavaScript files with an "application k At runtime, if an error occurs, this integration checks application keys for each stack frame in the stack trace. This allows you to filter out errors with "unmarked" stack frames, which would indicate third-party code. -To set up the integration, first pass an `applicationKey` to your Sentry bundler plugin. This can be an arbitrary string that identifies your application code: +To set up this integration, first pass an `applicationKey` to your Sentry bundler plugin. This can be an arbitrary string that identifies your application code: ```ts {tabTitle:Vite} {8} // vite.config.ts From cbbfa12bd8d61185af85ee819036a9b416dcd4af Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:28:15 +0200 Subject: [PATCH 8/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index b9f33e741f254..33d560142b773 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -177,7 +177,7 @@ Sentry.init({ ``` The `filterKeys` option takes an array of strings that should be equal to the `applicationKey` value set in the bundler plugin options. -Unless your website hosts files from more than one of your build-processes, the array should only contain one item. +Unless your website hosts files from more than one of your build-processes, this array should only contain one item. The `behaviour` option defines what should happen with errors that contain stack frames from third-party code. There are four modes you can choose from: From c58025ac543ec565e613a6a8bb5f85ecd913f20d Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 18 Jun 2024 10:29:15 +0200 Subject: [PATCH 9/9] Update docs/platforms/javascript/common/configuration/filtering.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- docs/platforms/javascript/common/configuration/filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/configuration/filtering.mdx b/docs/platforms/javascript/common/configuration/filtering.mdx index 33d560142b773..e299d9ea2cf33 100644 --- a/docs/platforms/javascript/common/configuration/filtering.mdx +++ b/docs/platforms/javascript/common/configuration/filtering.mdx @@ -187,7 +187,7 @@ There are four modes you can choose from: - `"apply-tag-if-contains-third-party-frames"`: Keep all error events, but apply a `third_party_code: true` tag in case the error contains at least one third-party stack frame. - `"apply-tag-if-exclusively-contains-third-party-frames"`: Keep all error events, but apply a `third_party_code: true` tag in case the error contains exclusively third-party stack frames. -If you choise a mode to only apply tags, the tags can then be used in Sentry to filter your issue stream with the `third_party_code` tag in the issue search bar. +If you choose a mode to only apply tags, the tags can then be used in Sentry to filter your issue stream with the `third_party_code` tag in the issue search bar. ## Filtering Transaction Events