Skip to content

Commit 88b9913

Browse files
authored
docs(tanstackstart-react): Add tanstackstart router feature page to tanstackstart-react docs (#15659)
Adding a feature page to the TanstackStart-React SDK docs for the TanstackStart router integration ([a similar page](https://docs.sentry.io/platforms/javascript/guides/react/features/tanstack-router/) already exists for React, adapted it for Tanstack).
1 parent f7ede56 commit 88b9913

File tree

2 files changed

+58
-0
lines changed

2 files changed

+58
-0
lines changed
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: TanStack Start React Features
3+
description: "Learn how Sentry's TanStack Start React SDK exposes custom components for first class integration with the TanStack Start React framework."
4+
sidebar_order: 4
5+
---
6+
7+
The Sentry TanStack Start React SDK offers TanStack Start-specific features for first class integration with the framework.
8+
9+
<PageGrid />
10+
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: TanStack Router
3+
description: "Learn about Sentry's TanStack Router integration."
4+
---
5+
6+
The TanStack Router integration is included in the `@sentry/tanstackstart-react` package and is compatible with version `1.64.0` of `@tanstack/react-router` and above.
7+
8+
<Alert title="Note">
9+
10+
The TanStack Router integration is designed to work with Sentry Tracing. Please see <PlatformLink to="/tracing/#enable-tracing">Getting Started with TanStack Start React Performance</PlatformLink> for more details on how to set up and install the SDK.
11+
12+
</Alert>
13+
14+
The TanStack Router instrumentation uses your TanStack Router routes to create `pageload/navigation` transactions to ensure you collect meaningful performance data about the health of your page loads and associated requests.
15+
16+
## Usage
17+
18+
To use the TanStack Router integration, pass the `Sentry.tanstackRouterBrowserTracingIntegration` inside your `integrations` option:
19+
20+
```tsx {diff} {filename:src/router.tsx}
21+
import * as Sentry from "@sentry/tanstackstart-react";
22+
import { createRouter } from '@tanstack/react-router'
23+
24+
// Create a new router instance
25+
export const getRouter = () => {
26+
const router = createRouter();
27+
28+
if (!router.isServer) {
29+
Sentry.init({
30+
dsn: "___PUBLIC_DSN___",
31+
integrations: [Sentry.tanstackRouterBrowserTracingIntegration(router)],
32+
33+
// Setting a sample rate is required for sending performance data.
34+
// We recommend adjusting this value in production, or using tracesSampler
35+
// for finer control.
36+
tracesSampleRate: 1.0,
37+
});
38+
}
39+
40+
return router;
41+
}
42+
```
43+
44+
## Next Steps:
45+
46+
- [Return to **Getting Started**](../../)
47+
- [Return to the main integrations page](../)
48+

0 commit comments

Comments
 (0)