test(tanstackstart): Add TanStack Start on Cloudflare Workers test app#20649
test(tanstackstart): Add TanStack Start on Cloudflare Workers test app#20649
Conversation
e581ac8 to
8dd6f21
Compare
| export const Route = createRootRoute({ | ||
| head: () => { | ||
| const traceData = getTraceData(); | ||
| const sentryMeta = Object.entries(traceData).map(([key, value]) => ({ |
There was a problem hiding this comment.
Not sure if this is the best way in TanStack to add trace propagation, couldn't find anything specific in the docs
There was a problem hiding this comment.
I have never looked into this, does that work? If yes that's amazing then we can document how to set that up :)
| tracesSampleRate: 1.0, | ||
| environment: 'qa', | ||
| }), | ||
| // @ts-expect-error - handler is not typed as a Cloudflare handler |
| expect(errorEvent.contexts?.trace?.span_id).toEqual(expect.any(String)); | ||
| }); | ||
|
|
||
| // Note: API route errors in TanStack Start are handled internally by the framework |
There was a problem hiding this comment.
I added a note there. I think the TanStack Start middleware won't work in Cloudflare (yet?), as the middleware is somehow added with the tanstack start SDK?!
| "scripts": { | ||
| "dev": "vite dev", | ||
| "build": "vite build", | ||
| "preview": "wrangler dev --var E2E_TEST_DSN:$E2E_TEST_DSN --log-level=$(test $CI && echo 'none' || echo 'log')", |
There was a problem hiding this comment.
Missing quotes around --var value in preview script
Medium Severity
The preview script passes --var E2E_TEST_DSN:$E2E_TEST_DSN without quotes around the value. Every other Cloudflare test app in the repo (cloudflare-workers, cloudflare-local-workers, cloudflare-mcp, cloudflare-workersentrypoint, astro-6-cf-workers) uses the quoted form --var \"E2E_TEST_DSN:$E2E_TEST_DSN\". Since DSN values contain shell-sensitive characters like :// and @, the unquoted expansion could cause parsing issues depending on the shell environment in CI.
Reviewed by Cursor Bugbot for commit 8dd6f21. Configure here.
size-limit report 📦
|
| "scripts": { | ||
| "dev": "vite dev", | ||
| "build": "vite build", | ||
| "preview": "wrangler dev --var E2E_TEST_DSN:$E2E_TEST_DSN --log-level=$(test $CI && echo 'none' || echo 'log')", |
There was a problem hiding this comment.
Preview bypasses built app
Medium Severity
The preview script starts wrangler dev, but this app is built through @cloudflare/vite-plugin. wrangler dev bypasses the Vite preview output that pnpm build creates, so Playwright can run a source Worker without the generated TanStack assets instead of the Cloudflare build under test.
Reviewed by Cursor Bugbot for commit d4d6179. Configure here.
d4d6179 to
2d2ea64
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 3 total unresolved issues (including 2 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2d2ea64. Configure here.
|
|
||
| const clientTransactionPromise = waitForTransaction('tanstackstart-react-cloudflare', transactionEvent => { | ||
| return transactionEvent?.contexts?.trace?.op === 'pageload' && transactionEvent?.transaction === '/'; | ||
| }); |
There was a problem hiding this comment.
Telemetry wait can flake
Low Severity
This hits the project rule about flaky telemetry waits: the GET / transaction predicate can match delayed root transactions from earlier tests. If serverTransactionPromise resolves with an older request, the trace comparison uses unrelated server and client events and flakes.
Triggered by project rule: PR Review Guidelines for Cursor Bot
Reviewed by Cursor Bugbot for commit 2d2ea64. Configure here.
There was a problem hiding this comment.
can't hurt using a longer route I guess
| export const Route = createRootRoute({ | ||
| head: () => { | ||
| const traceData = getTraceData(); | ||
| const sentryMeta = Object.entries(traceData).map(([key, value]) => ({ |
There was a problem hiding this comment.
I have never looked into this, does that work? If yes that's amazing then we can document how to set that up :)
| server: { | ||
| port: 3030, | ||
| }, | ||
| plugins: [cloudflare({ viteEnvironment: { name: 'ssr' } }), tsConfigPaths(), tanstackStart(), viteReact()], |
There was a problem hiding this comment.
q: have you tried using the sentry vite plugin here?
| environment: 'qa', | ||
| }), | ||
| // @ts-expect-error - handler is not typed as a Cloudflare handler | ||
| handler, |
There was a problem hiding this comment.
q: wondering if we could wrap this handler with wrapFetchWithSentry somehow? right now it's not that important but would future-proof us if that works
|
|
||
| const clientTransactionPromise = waitForTransaction('tanstackstart-react-cloudflare', transactionEvent => { | ||
| return transactionEvent?.contexts?.trace?.op === 'pageload' && transactionEvent?.transaction === '/'; | ||
| }); |
There was a problem hiding this comment.
can't hurt using a longer route I guess
|
|
||
| export const Route = createFileRoute('/ssr-error')({ | ||
| loader: () => { | ||
| throw new Error('Sentry SSR Test Error'); |
There was a problem hiding this comment.
l: this as well as the flush endpoint are not used I think? in other Tanstack Start apps we have a test that asserts that ssr errors are not captured (where this is used). fine to leave this out for this one I think but then we could trim down the application a bit (i.e. remove the flush endpoint and ssr error)


Adds an e2e test application for TanStack Start deployed to Cloudflare Workers using
@sentry/cloudflare. The setup uses a custom server entry point that wraps the TanStack Start handler withSentry.withSentry.Unfortunately the type safety is not great yet with
Sentry.withSentryand TanStack Start, so this needs to be adapted in another PR (or in v11 if it is not yet possible).Closes #18669