Skip to content

Commit a21b785

Browse files
KiwiKilianantonpirker
authored andcommitted
feat(tanstackstart-react): update docs after devinxi (#14036)
## Upgrade TanStack Start React Docs after Vinxi has been removed Apply the necessary upgrades as described in the [TSS migration](TanStack/router#2863 (comment)). Regards: - getsentry/sentry-javascript#14990 - getsentry/sentry-javascript#16540 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) ## LEGAL BOILERPLATE <!-- Sentry employees and contractors can delete or ignore this section. --> Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms. ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)
1 parent 961f1ce commit a21b785

File tree

1 file changed

+10
-45
lines changed
  • docs/platforms/javascript/guides/tanstackstart-react

1 file changed

+10
-45
lines changed

docs/platforms/javascript/guides/tanstackstart-react/index.mdx

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -31,44 +31,9 @@ pnpm add @sentry/tanstackstart-react
3131

3232
## Step 2: Configure
3333

34-
Extend your app's default TanStack Start configuration by adding `wrapVinxiConfigWithSentry` to your `app.config.ts` file:
34+
Add the following initialization code to your `src/client.tsx` file to initialize Sentry on the client:
3535

36-
```TypeScript {filename:app.config.ts}
37-
import { defineConfig } from "@tanstack/react-start/config";
38-
import { wrapVinxiConfigWithSentry } from "@sentry/tanstackstart-react";
39-
40-
const config = defineConfig({
41-
// ... your other TanStack Start config
42-
})
43-
44-
export default wrapVinxiConfigWithSentry(config, {
45-
org: "___ORG_SLUG___",
46-
project: "___PROJECT_SLUG___",
47-
authToken: process.env.SENTRY_AUTH_TOKEN,
48-
49-
// Only print logs for uploading source maps in CI
50-
// Set to `true` to suppress logs
51-
silent: !process.env.CI,
52-
});
53-
```
54-
55-
{/* TODO(lforst): Remove "in future versions of this SDK," */}
56-
57-
In future versions of this SDK, setting the `SENTRY_AUTH_TOKEN` environment variable will upload sourcemaps for you to see unminified errors in Sentry:
58-
59-
```sh {filename:.env}
60-
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
61-
```
62-
63-
<Alert level="warning" title="Important">
64-
65-
Make sure to keep your auth token secret and out of version control.
66-
67-
</Alert>
68-
69-
Add the following initialization code to your `app/client.tsx` file to initialize Sentry on the client:
70-
71-
```tsx {filename:app/client.tsx}
36+
```tsx {filename:src/client.tsx}
7237
import { hydrateRoot } from "react-dom/client";
7338
import { StartClient } from "@tanstack/react-start";
7439
import { createRouter } from "./router";
@@ -124,9 +89,9 @@ Sentry.init({
12489
hydrateRoot(document, <StartClient router={router} />);
12590
```
12691

127-
Add the following initialization code anywhere in your `app/ssr.tsx` file to initialize Sentry on the server:
92+
Add the following initialization code anywhere in your `src/server.tsx` file to initialize Sentry on the server:
12893

129-
```tsx {filename:app/ssr.tsx}
94+
```tsx {filename:src/server.tsx}
13095
import * as Sentry from "@sentry/tanstackstart-react";
13196

13297
Sentry.init({
@@ -154,7 +119,7 @@ Sentry.init({
154119

155120
Wrap TanStack Start's `createRootRoute` function using `wrapCreateRootRouteWithSentry` to apply tracing to Server-Side Rendering (SSR):
156121

157-
```tsx {filename:app/routes/__root.tsx} {3,6}
122+
```tsx {filename:src/routes/__root.tsx} {3,6}
158123
import type { ReactNode } from "react";
159124
import { createRootRoute } from "@tanstack/react-router";
160125
import { wrapCreateRootRouteWithSentry } from "@sentry/tanstackstart-router";
@@ -167,7 +132,7 @@ export const Route = wrapCreateRootRouteWithSentry(createRootRoute)({
167132

168133
Wrap TanStack Start's `defaultStreamHandler` function using `wrapStreamHandlerWithSentry` to instrument requests to your server:
169134

170-
```tsx {filename:app/ssr.tsx} {12}
135+
```tsx {filename:src/server.tsx} {12}
171136
import {
172137
createStartHandler,
173138
defaultStreamHandler,
@@ -186,11 +151,11 @@ Add the `sentryGlobalServerMiddlewareHandler` to your global middlewares to inst
186151

187152
<Alert level="info">
188153

189-
If you haven't done so, create a `app/global-middleware.ts` file as outlined in the [TanStack Start Docs for Global Middleware](https://tanstack.com/start/latest/docs/framework/react/middleware#global-middleware).
154+
If you haven't done so, create a `src/global-middleware.ts` file as outlined in the [TanStack Start Docs for Global Middleware](https://tanstack.com/start/latest/docs/framework/react/middleware#global-middleware).
190155

191156
</Alert>
192157

193-
```ts {filename:app/global-middleware.ts}
158+
```ts {filename:src/global-middleware.ts}
194159
import {
195160
createMiddleware,
196161
registerGlobalMiddleware,
@@ -199,7 +164,7 @@ import * as Sentry from "@sentry/tanstackstart-react";
199164

200165
registerGlobalMiddleware({
201166
middleware: [
202-
createMiddleware().server(Sentry.sentryGlobalServerMiddlewareHandler()),
167+
createMiddleware({ type: 'function' }).server(Sentry.sentryGlobalServerMiddlewareHandler()),
203168
],
204169
});
205170
```
@@ -272,7 +237,7 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
272237

273238
To test tracing, create a test API route like `/api/sentry-example-api`:
274239

275-
```typescript {filename:app/routes/api/sentry-example-api.ts}
240+
```typescript {filename:src/routes/api/sentry-example-api.ts}
276241
import { json } from "@tanstack/react-start";
277242
import { createAPIFileRoute } from "@tanstack/react-start/api";
278243

0 commit comments

Comments
 (0)