You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Adds `reactComponentAnnotation` docs to the `sentryTanstackStart` Vite
plugin page. Enabled in the SDK via
getsentry/sentry-javascript#21149. This should
be merged after the next SDK release (`10.55.0`).
Also changed the structure to have a separate section for each TSS
specific option and put them all one level below the `Configuration
Options` section.
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx
+36-5Lines changed: 36 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,7 +53,11 @@ export default defineConfig({
53
53
54
54
The plugin passes through all options to the underlying [`@sentry/vite-plugin`](/platforms/javascript/sourcemaps/uploading/vite/). See the [Sentry Vite Plugin documentation](/platforms/javascript/sourcemaps/uploading/vite/) for the full list of available options.
55
55
56
-
Additionally, the plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior:
56
+
### Automatic Middleware Instrumentation
57
+
58
+
<AvailableSinceversion="10.37.0" />
59
+
60
+
The plugin automatically instruments all TanStack Start middlewares for tracing by default. To disable this behavior:
57
61
58
62
```typescript {filename:vite.config.ts}
59
63
sentryTanstackStart({
@@ -62,15 +66,42 @@ sentryTanstackStart({
62
66
}),
63
67
```
64
68
65
-
## Tunnel Route
69
+
### Component Name Annotation
70
+
71
+
<AvailableSinceversion="10.55.0" />
72
+
73
+
The `reactComponentAnnotation` option annotates your React components with `data-sentry-component` and `data-sentry-source-file` attributes at build time. This lets you see component names instead of generic selectors in Session Replay, breadcrumbs, and performance monitoring.
74
+
75
+
```typescript {filename:vite.config.ts}
76
+
sentryTanstackStart({
77
+
// ...
78
+
reactComponentAnnotation: {
79
+
enabled: true,
80
+
},
81
+
}),
82
+
```
83
+
84
+
To exclude specific components from annotation:
85
+
86
+
```typescript {filename:vite.config.ts}
87
+
sentryTanstackStart({
88
+
// ...
89
+
reactComponentAnnotation: {
90
+
enabled: true,
91
+
ignoredComponents: ["MyInternalComponent"],
92
+
},
93
+
}),
94
+
```
95
+
96
+
### Tunnel Route
66
97
67
98
<AvailableSinceversion="10.51.0" />
68
99
69
100
The `tunnelRoute` option registers a same-origin TanStack Start server route that forwards Sentry envelopes to Sentry's ingest servers. It also automatically sets the client `tunnel` option in `Sentry.init()` so browser events go through that route. This helps avoid ad blockers and corporate firewalls that block requests to `*.sentry.io`.
70
101
71
102
`tunnelRoute` accepts three shapes:
72
103
73
-
### `tunnelRoute: true` (recommended)
104
+
####`tunnelRoute: true` (recommended)
74
105
75
106
Generates an opaque, unguessable route path for each dev session and production build. Because the path changes between builds, ad blockers can't reliably target it.
76
107
@@ -80,7 +111,7 @@ sentryTanstackStart({
80
111
}),
81
112
```
82
113
83
-
### Static path
114
+
####Static path
84
115
85
116
Pass a string to use a fixed route path. This is easier to reason about, but a known path is easier for ad blockers to add to a list.
86
117
@@ -90,7 +121,7 @@ sentryTanstackStart({
90
121
}),
91
122
```
92
123
93
-
### Object form
124
+
####Object form
94
125
95
126
Use the object form to control the DSN allowlist or set a static path explicitly:
0 commit comments