From 980970a4a37dd3f012ae84538a1ba0726ac1fdfe Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 31 Aug 2022 15:32:03 +0200 Subject: [PATCH 1/4] feat(svelte): Add documentation for component tracking --- .../svelte/features/componenttracking.mdx | 58 +++++++++++++++++++ .../guides/svelte/features/index.mdx | 11 ++++ 2 files changed, 69 insertions(+) create mode 100644 src/platforms/javascript/guides/svelte/features/componenttracking.mdx create mode 100644 src/platforms/javascript/guides/svelte/features/index.mdx diff --git a/src/platforms/javascript/guides/svelte/features/componenttracking.mdx b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx new file mode 100644 index 0000000000000..8282c193eb660 --- /dev/null +++ b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx @@ -0,0 +1,58 @@ +--- +title: Track Svelte Components +--- + +Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: **Component Tracking**. By enabling this feature, you will get spans in your transactions showing the initialization and update cycles of your Svelte components. This feature allows you to get a drilled down view into how your components are behaving, to e.g. identify slow component initializations or frequent component updates which might have an impact on your app's performance. + +## Usage + +To get started, simply add the Sentry `componentTrackingPreprocessor` to your `svelte.config.js` file: + +```javascript {tabTitle: svelte.config.js} +import * as Sentry from "@sentry/svelte"; + +const config = { + preprocess: [ + Sentry.componentTrackingPreprocessor({ + // Add the components you want to be tracked to this array. + // Specificy `true` to track all components or `false` to disable + // tracking entirely + // (defaults to `true`) + trackComponents: ["Navbar", "PrimaryButton", "LoginForm"], + // To disable component initialization spans, set this to `false`. + // (defaults to `true`) + trackInit: true, + // To disable component update spans, set this to `false` + // (defaults to `true`) + trackUpdates: false, + }), + // ... + ], + // ... +}; + +export default config; +``` + +This preprocessor is called at application build time. It inserts a function call to a function in the Sentry SDK into the ` +``` diff --git a/src/platforms/javascript/guides/svelte/features/index.mdx b/src/platforms/javascript/guides/svelte/features/index.mdx new file mode 100644 index 0000000000000..dd6804ff02ca6 --- /dev/null +++ b/src/platforms/javascript/guides/svelte/features/index.mdx @@ -0,0 +1,11 @@ +--- +title: Svelte Features +description: "Learn how Sentry's Svelte SDK exposes features for first class integration with Svelte." +excerpt: "" +--- + +The Sentry Svelte SDK offers Svelte specific features for first class integration with the framework. + +- **[Component Tracking](./componenttracking/)** + + If you are using Performance monitoring, you can track the individual components of you Svelte application. From f678a83c442a8260975c37c27dd5d612b5b21366 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 31 Aug 2022 15:47:18 +0200 Subject: [PATCH 2/4] adjust wording --- .../javascript/guides/svelte/features/componenttracking.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platforms/javascript/guides/svelte/features/componenttracking.mdx b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx index 8282c193eb660..cdf92b2d7b7b2 100644 --- a/src/platforms/javascript/guides/svelte/features/componenttracking.mdx +++ b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx @@ -2,7 +2,7 @@ title: Track Svelte Components --- -Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: **Component Tracking**. By enabling this feature, you will get spans in your transactions showing the initialization and update cycles of your Svelte components. This feature allows you to get a drilled down view into how your components are behaving, to e.g. identify slow component initializations or frequent component updates which might have an impact on your app's performance. +Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: **Component Tracking**. By enabling this feature, you will get spans in your transactions showing the initialization and update cycles of your Svelte components. This feature allows you to get a drilled down view into how your components are behaving, to e.g. identify slow initializations or frequent updates which might have an impact on your app's performance. ## Usage @@ -34,11 +34,11 @@ const config = { export default config; ``` -This preprocessor is called at application build time. It inserts a function call to a function in the Sentry SDK into the ` ``` From ba91a858188a3ffc321899713dc8a2a947ab1a84 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 31 Aug 2022 23:50:29 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../javascript/guides/svelte/features/componenttracking.mdx | 6 +++--- src/platforms/javascript/guides/svelte/features/index.mdx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/platforms/javascript/guides/svelte/features/componenttracking.mdx b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx index c16312498ba9e..7936bf1df0425 100644 --- a/src/platforms/javascript/guides/svelte/features/componenttracking.mdx +++ b/src/platforms/javascript/guides/svelte/features/componenttracking.mdx @@ -2,11 +2,11 @@ title: Track Svelte Components --- -Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: **Component Tracking**. By enabling this feature, you will get spans in your transactions showing the initialization and update cycles of your Svelte components. This feature allows you to get a drilled down view into how your components are behaving, to e.g. identify slow initializations or frequent updates which might have an impact on your app's performance. +Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: component tracking. Enabling this feature provides you with spans in your transactions that show the initialization and update cycles of your Svelte components. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow initializations or frequent updates, which might have an impact on your app's performance. ## Usage -To get started, simply add the Sentry `componentTrackingPreprocessor` to your `svelte.config.js` file: +To get started, add the Sentry `componentTrackingPreprocessor` to your `svelte.config.js` file: ```javascript {tabTitle: svelte.config.js} import * as Sentry from "@sentry/svelte"; @@ -34,7 +34,7 @@ const config = { export default config; ``` -This preprocessor is called at application build time. It inserts a function call to a function in the Sentry SDK into the `