From d1eab4ef6c4cfd5f9bc1e913f55de889a9e48740 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 3 May 2022 14:43:08 +0200 Subject: [PATCH 1/4] feat(javascript): Add tree shaking for default integrations guide --- .../configuration/tree-shaking/index.mdx | 57 +++++++++++++++++-- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index e75914ca1e5d0..9788fb8d452d5 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -5,9 +5,15 @@ description: "Learn how to reduce Sentry bundle size by tree shaking unused code keywords: ["bundle size", "webpack", "rollup", "debug"] --- -The Sentry SDK ships with code that is not strictly required for it to collect your errors. This includes, for example, code to debug your Sentry configuration or code to enable performance monitoring. While debug code can be very useful in development environments, it's not typically necessary to include it in your production bundles where it takes up valuable space. The JavaScript SDK includes a special flags in its CommonJS and ESM distributions, which can be used to facilitate [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) (removal) of such code during the build process. +The Sentry SDK supports [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) in various ways. +To fully utilize the tree shaking capabilities of modern bundlers like Webpack or Rollup, some additional configurations must be applied. +If you want to minimize the bundle size of the Sentry SDK, we recommend reading through this page and applying the tree shaking configurations as shown. -## List Of Flags +## Tree Shaking Optional Code + +The Sentry SDK ships with code that is not strictly required for it to collect your errors. This includes, for example, code to debug your Sentry configuration or code to enable performance monitoring. While debug code can be very useful in development environments, it's not typically necessary to include it in your production bundles where it takes up valuable space. The JavaScript SDK includes a special flags in its CommonJS and ESM distributions, which can be used to facilitate tree shaking (removal) of such code during the build process. + +### List Of Flags To make optional code eligible for tree shaking, you can replace various flags in the Sentry SDK with `false`. @@ -21,7 +27,7 @@ To make optional code eligible for tree shaking, you can replace various flags i -## Tree Shaking Optional Code With Webpack +### Tree Shaking Optional Code With Webpack To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). @@ -44,7 +50,7 @@ module.exports = { -## Tree Shaking Optional Code With Rollup +### Tree Shaking Optional Code With Rollup If you're using `rollup.js`, we recommend using [Rollup's `replace` plugin](https://github.com/rollup/plugins/tree/master/packages/replace). @@ -92,3 +98,46 @@ const nextConfig = { For more information on custom webpack configurations in Next.js, see [Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) in the Next.js docs. + +## Tree Shaking Default Integrations + +By default, the Sentry SDK sets up a list of [default integrations](../integrations/default) that extend your +SDK functionality. Furthermore, you can also add [additional](../integrations/plugin) or [custom](../integrations/custom) +integrations to your SDK configuration. +In case you do not want to include default integrations in your config, you can [disable](../options/#integration-configuration) +them and add your custom array of integrations. +However, if you also want to tree shake the unused default integrations, you can do so by creating a `Client` yourself. +By doing this, you essentially bypass `Sentry.init` which normally creates a `Client` for you. + +The following example shows how to create and bind a `Client` which enables tree shaking of unused default integrations: + +```javascript {filename:main.js} +import { + BrowserClient, + defaultStackParser, + makeFetchTransport, + Integrations, + getCurrentHub, +} from "@sentry/browser"; + +const client = new BrowserClient({ + // all options you normally pass to Sentry.init + dsn: "your DSN", + // ... + + transport: makeFetchTransport, + stackParser: defaultStackParser, + // Only the integrations listed here will be used + integrations: [ + new Integrations.Breadcrumbs(), + new Integrations.GlobalHandlers(), + new Integrations.LinkedErrors(), + new Integrations.Dedupe(), + ], +}); + +getCurrentHub().bindClient(client); +``` + +Note that in contrast to `Sentry.init`, the `Client` constructor expects options of type `ClientOptions` instead of `Options`. +This means that the `ClientOptions.integrations` property is the final array of integrations that will be used. From 1a28136d2d2838e8cb8955fdb5a6b9ba8c12991b Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 3 May 2022 15:44:16 +0200 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../common/configuration/tree-shaking/index.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index 9788fb8d452d5..5727e363f1c0a 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -29,7 +29,7 @@ To make optional code eligible for tree shaking, you can replace various flags i ### Tree Shaking Optional Code With Webpack -To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). +To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): ```javascript {filename:webpack.config.js} const webpack = require("webpack"); @@ -52,7 +52,7 @@ module.exports = { ### Tree Shaking Optional Code With Rollup -If you're using `rollup.js`, we recommend using [Rollup's `replace` plugin](https://github.com/rollup/plugins/tree/master/packages/replace). +If you're using `rollup.js`, we recommend using [Rollup's `replace` plugin](https://github.com/rollup/plugins/tree/master/packages/replace): ```javascript {filename:rollup.config.js} import replace from "@rollup/plugin-replace"; @@ -102,9 +102,9 @@ For more information on custom webpack configurations in Next.js, see [Custom We ## Tree Shaking Default Integrations By default, the Sentry SDK sets up a list of [default integrations](../integrations/default) that extend your -SDK functionality. Furthermore, you can also add [additional](../integrations/plugin) or [custom](../integrations/custom) +SDK functionality. You can also add [additional](../integrations/plugin) or [custom](../integrations/custom) integrations to your SDK configuration. -In case you do not want to include default integrations in your config, you can [disable](../options/#integration-configuration) +If you don't want to include default integrations in your config, you can [disable](../options/#integration-configuration) them and add your custom array of integrations. However, if you also want to tree shake the unused default integrations, you can do so by creating a `Client` yourself. By doing this, you essentially bypass `Sentry.init` which normally creates a `Client` for you. @@ -139,5 +139,9 @@ const client = new BrowserClient({ getCurrentHub().bindClient(client); ``` -Note that in contrast to `Sentry.init`, the `Client` constructor expects options of type `ClientOptions` instead of `Options`. + + +In contrast to `Sentry.init`, the `Client` constructor expects options of type `ClientOptions` instead of `Options`. This means that the `ClientOptions.integrations` property is the final array of integrations that will be used. + + From f895c8be5eb9ce3ea1fa25319d676515987fdc21 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 3 May 2022 15:47:09 +0200 Subject: [PATCH 3/4] add small note correction --- .../javascript/common/configuration/tree-shaking/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index 5727e363f1c0a..f71447dfa4037 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -142,6 +142,6 @@ getCurrentHub().bindClient(client); In contrast to `Sentry.init`, the `Client` constructor expects options of type `ClientOptions` instead of `Options`. -This means that the `ClientOptions.integrations` property is the final array of integrations that will be used. +This means that the `ClientOptions.integrations` property is the final array of all integrations that will be used. From 9f59369d65d7eed2a88b9060a950f47f71847ca6 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 4 May 2022 09:36:32 +0200 Subject: [PATCH 4/4] update tree shaking example after integration export changes --- .../common/configuration/tree-shaking/index.mdx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index f71447dfa4037..d408c36cc8aaf 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -75,7 +75,7 @@ export default { -## Tree Shaking Optional Code With Next.js +### Tree Shaking Optional Code With Next.js To tree shake Sentry debug code in Next.js projects, you can use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) in your Next.js configuration. @@ -114,10 +114,13 @@ The following example shows how to create and bind a `Client` which enables tree ```javascript {filename:main.js} import { BrowserClient, + Breadcrumbs, + Dedupe, defaultStackParser, - makeFetchTransport, - Integrations, getCurrentHub, + GlobalHandlers, + makeFetchTransport, + LinkedErrors, } from "@sentry/browser"; const client = new BrowserClient({ @@ -129,10 +132,10 @@ const client = new BrowserClient({ stackParser: defaultStackParser, // Only the integrations listed here will be used integrations: [ - new Integrations.Breadcrumbs(), - new Integrations.GlobalHandlers(), - new Integrations.LinkedErrors(), - new Integrations.Dedupe(), + new Breadcrumbs(), + new GlobalHandlers(), + new LinkedErrors(), + new Dedupe(), ], });