Skip to content

ref(svelte): Update component tracking docs with new withSentryConfig approach #5649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 21, 2022
Merged
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
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,55 @@ To set up component tracking, you need to configure performance monitoring. For

</Alert>

To get started, add the Sentry `componentTrackingPreprocessor` to your `svelte.config.js` file:
To get started, wrap your Svelte app's config from `svelte.config.js` with our `withSentryConfig` function:

```javascript {tabTitle: svelte.config.js}
import * as Sentry from "@sentry/svelte";
import { withSentryConfig } 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,
}),
// ...
],
// ...
// Your svelte config
compilerOptions: {...},
};

export default config;
export default withSentryConfig(config);
```

This preprocessor is called at application build time. It inserts a function call to a function in the Sentry SDK into the `<script>` tag of your components before your app is compiled and bundled. The called function takes care of recording the spans by using the Svelte component's lifecycle hooks.
This wrapper will insert Sentry's component tracking preprocessor into your config. The preprocessor inserts a function call to a function in the Sentry SDK into the `<script>` tag of your components before your app is compiled and bundled.

### Configuration

Once you add `withSentryConfig` around your Svelte config, our SDK will track all your components by default. If you want to customize which components or lifecycle events should be tracked, you can pass additional options to `withSentryConfig`:

```javascript {tabTitle: svelte.config.js}
import { withSentryConfig } from "@sentry/svelte";

const config = {
// Your svelte config
compilerOptions: {...},
};

const sentryOptions = {
// Groups all component tracking-related options
// (optional)
componentTracking: {
// Add the components you want to be tracked to this array.
// Specificy `true` to track all components or `false` to disable
// tracking entirely
// (optional, defaults to `true`)
trackComponents: ["Navbar", "PrimaryButton", "LoginForm"],
// To disable component initialization spans, set this to `false`.
// (optional, defaults to `true`)
trackInit: true,
// To disable component update spans, set this to `false`
// (optional, defaults to `true`)
trackUpdates: false,
},
};

export default withSentryConfig(config, sentryOptions);
```

## Component Tracking Spans

This feature adds the following spans to the ongoing transaction:

Expand All @@ -55,7 +75,7 @@ This feature adds the following spans to the ongoing transaction:

## Alternative Usage

If you don't want to use our preprocessor to automatically insert the function call at build time, you can call the tracking function manually in every component you would like to see tracked:
If you don't want to use our `withSentryConfig` wrapper to automatically instrument your components at build time, you can call the tracking function manually in every component you would like to see tracked:

```javascript {tabTitle: MyComponent.svelte}
<script>
Expand Down