Adjust Sentry with Tanstack Start

[CarlosZiegler]

Problem Statement

As Tanstack Start alphaalready merged intomain` we need adjust code / docs to support new version that will not use Vinxi anymore.

PR => https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/ Migration => https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960

Solution Brainstorm

Adjust code to work without plugin Vinxi ( wrapVinxiConfigWithSentry )

https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/

[Lms24]

Hey @CarlosZiegler thanks for writing in and for letting us know about this breaking change! (Admittedly, I'm a bit confused why TSS is breaking in a minor version but probably there's some reason for this...)

Since we're a bit short-staffed at the moment, do you by chance already know what needs to be adjusted? If so, we'd happily accept and review PRs :) Just let me know ("no" is of course also a valid answer). Thanks!

[CarlosZiegler]

Hey, thanks for fast answer, I am checking that now, I will be back as I have something :)

[CarlosZiegler]

Hello @Lms24 I trying to setup sentry on my boilerplate, looks like I can see some progress: Repository Link => https://github.com/CarlosZiegler/fullstack-start-template

Tracing working as well :

Replay:

Insights:

Backend:

But no issues if throw error on trpc ( we already have 403 error if acess setting page )

Can you check that if I am doing something wrong ?

Files related of Sentry setup:

/vite.config.ts /src/client.tsx /src/server.tsx /src/lib/trpc/init.ts /src/routes/__root.tsx

[KiwiKilian]

@CarlosZiegler I'm also trying to make TSS work with Sentry after Devinxi. On first sight, you are missing the setup in src/global-middleware.ts. The createMiddleware now requires a param:

import { sentryGlobalServerMiddlewareHandler } from '@sentry/tanstackstart-react';
import { createMiddleware, registerGlobalMiddleware } from '@tanstack/react-start';

registerGlobalMiddleware({
  middleware: [createMiddleware({ type: 'function' }).server(sentryGlobalServerMiddlewareHandler())],
});

I've started some initially fixes to the docs on https://github.com/getsentry/sentry-docs/pull/14036.

@Lms24 I see a totally different problem. I've removed the wrapVinxiConfigWithSentry and replaced it with the sentryVitePlugin, trying to make the sourcemap upload work. TSS currently uses two build steps, I've discussed this with @schiller-manuel (TSS Maintainer) to describe it correctly:

1. Vite
   • Outputs client chunks to .tanstack/start/build/client-dist/assets/
   • Builds server chunks but passes the virtually over to the next step (without writing to file system!)
2. Nitro
   • Builds again over Vite server build and outputs server chunks to .output/server/chunks/_/
   • Copies the Vite client chunks to .output/public/assets/ (hash IDs stay the same)

Enabling debug, it seems Sentrys' sourcemap upload is running after Vite but before the Nitro build by looking at the logs. Even though the sentryVitePlugin is last in my plugins array. I can only see artifacts with IDs from the client build, not the server/Nitro build within the artifacts of the release on Sentry.

They plan to get rid of the necessity to have the Nitro build. But it's unclear when this will be the case and some users might still have use cases to apply Nitro afterwards.

[CarlosZiegler]

@KiwiKilian Yes, but I moved the middleware to server.tsx not sure if was good approach, Maybe need to move to router.tsx ( if following this conversation ) => https://discord.com/channels/719702312431386674/1382109060052287509/1382686239320313868

[KiwiKilian]

@CarlosZiegler great catch, missed that! Maybe we need some more clarifications how it's supposed to work now without Vinxi...

[RulaKhaled]

Hey all, thanks for the additional context!

I think it makes sense to remove references to wrapVinxiConfigWithSentry from both the SDK and the documentation now. As for source maps upload, the docs already address this limitation, we recommend using Sentry Vite Plugin (recommended) or Sentry CLI (more flexible) for now (https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/sourcemaps/) and the vinxi wrapper function just returns the config as is, so nothing changed for users here.

I will check the two build steps and see if anything needs to be done here.

[CarlosZiegler]

Hello, thnks for the update! I will ask if someone tested that, already did it and dont get issues on dashboard, as I saw before I can see the release / source maps / transactions BUT after added sample issue this throw error but not send it to sentry.

[andreiborza]

@CarlosZiegler do you have a reproduction repo or something we can look at to figure this out?

[CarlosZiegler]

@andreiborza Hey, thanks for asnwer :)

last time added it here : https://github.com/CarlosZiegler/fullstack-start-template Maybe I need update, already didi in a private repo like DOcs and got same result :(

[nick-potts]

I've got a weird situation where the client side works fine, but the server refuses to send to sentry. When i add a console.log to the beforeBreadcrumbs on the server instance of sentry, it does actually print out breadcrumbs so its collecting, but it never gets submitted upstream to sentry.

[andreiborza]

Hi @nick-potts, please file a new issue with all the details about your app and a reproduction repo so we can investigate.

[nick-potts]

done #16985

[el-buku]

No status?

[RulaKhaled]

Hey @el-buku, automatic instrumentation (without manually calling the functions) for TanStack Start’s current server setup is not yet implemented. You can read more about it in JS-731. We aim to instrument Nitro in v1.

[chrisheninger]

Hey @el-buku, automatic instrumentation (without manually calling the functions) for TanStack Start’s current server setup is not yet implemented. You can read more about it in JS-731. We aim to instrument Nitro in v1.

Hi @RulaKhaled– that linear issue you linked above is a private workspace– can you share any more about what we can expect with the Sentry + TanStack Start implementation?

For now I've got it configured using @sentry/react and @sentry/vite-plugin– but that only gets me client side error logging/reporting.

Is there a way for me to manually set up and use @sentry/node or something like that on the server pre-v1 while we wait for TanStack Start to implement global middleware and/or the Nitro implementation coming with v1?

(I realize that tanstack-start is alpha software and there are likely blockers on both sides, I'm just trying to put together something that works right now and I've read through a handful of GitHub issues in both projects and am having a hard time figuring out the server bit)

Thanks!

[andreiborza]

@chrisheninger sorry about the link. Here's the issue in question: https://github.com/getsentry/sentry-javascript/issues/16985#issuecomment-3077920484

As for setting things up yourself, you could take some inspiration from https://github.com/getsentry/sentry-javascript/tree/develop/packages/nuxt maybe. You could set up a nitro plugin that hooks into errors and captures them with Sentry but we haven't really explored that yet.