-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
examples: Add a new TanStack Start example for typed readable streams #5363
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
examples: Add a new TanStack Start example for typed readable streams #5363
Conversation
View your CI Pipeline Execution ↗ for commit e884da1
☁️ Nx Cloud last updated this comment at |
WalkthroughAdds a new React example and docs demonstrating typed streaming from server functions (Typed ReadableStream and async generators), new example project scaffolding (router, generated route tree, Vite/TS configs, styles), and reorganizes server-functions docs to separate Streaming and Raw Responses sections. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant C as React Client (Route)
participant SF as Server Function
participant Stream as Stream / Generator
U->>C: Click "Stream (ReadableStream)" or "Stream (Async Gen)"
alt ReadableStream flow
C->>SF: call streamingResponseFn()
SF-->>C: returns ReadableStream<TextPart>
loop chunks
C->>Stream: reader.read()
Stream-->>C: chunk (TextPart)
C->>C: append chunk to UI
end
else Async generator flow
C->>SF: call streamingWithAnAsyncGeneratorFn()
SF-->>C: returns AsyncGenerator<TextPart>
loop for await
SF-->>C: yield (TextPart)
C->>C: append chunk to UI
end
end
C-->>U: render accumulated streamed text
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
examples/react/start-typed-readable-stream/public/favicon.ico
is excluded by!**/*.ico
📒 Files selected for processing (8)
examples/react/start-typed-readable-stream/package.json
(1 hunks)examples/react/start-typed-readable-stream/src/routeTree.gen.ts
(1 hunks)examples/react/start-typed-readable-stream/src/router.tsx
(1 hunks)examples/react/start-typed-readable-stream/src/routes/__root.tsx
(1 hunks)examples/react/start-typed-readable-stream/src/routes/index.tsx
(1 hunks)examples/react/start-typed-readable-stream/src/styles/app.css
(1 hunks)examples/react/start-typed-readable-stream/tsconfig.json
(1 hunks)examples/react/start-typed-readable-stream/vite.config.ts
(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/start-typed-readable-stream/tsconfig.json
examples/react/start-typed-readable-stream/src/routes/__root.tsx
examples/react/start-typed-readable-stream/vite.config.ts
examples/react/start-typed-readable-stream/src/routes/index.tsx
examples/react/start-typed-readable-stream/src/routeTree.gen.ts
examples/react/start-typed-readable-stream/package.json
examples/react/start-typed-readable-stream/src/styles/app.css
examples/react/start-typed-readable-stream/src/router.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/react/start-typed-readable-stream/src/routes/__root.tsx
examples/react/start-typed-readable-stream/vite.config.ts
examples/react/start-typed-readable-stream/src/routes/index.tsx
examples/react/start-typed-readable-stream/src/routeTree.gen.ts
examples/react/start-typed-readable-stream/src/router.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/react/start-typed-readable-stream/src/routes/__root.tsx
examples/react/start-typed-readable-stream/src/routes/index.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/react/start-typed-readable-stream/package.json
🧠 Learnings (2)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/react/start-typed-readable-stream/tsconfig.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/react/start-typed-readable-stream/src/routeTree.gen.ts
🧬 Code graph analysis (3)
examples/react/start-typed-readable-stream/src/routes/__root.tsx (2)
examples/react/start-typed-readable-stream/src/routes/index.tsx (1)
Route
(60-62)packages/react-router-devtools/src/TanStackRouterDevtools.tsx (1)
TanStackRouterDevtools
(46-126)
examples/react/start-typed-readable-stream/src/routes/index.tsx (1)
examples/react/start-typed-readable-stream/src/routes/__root.tsx (1)
Route
(13-18)
examples/react/start-typed-readable-stream/src/routeTree.gen.ts (2)
e2e/react-router/js-only-file-based/src/routeTree.gen.js (2)
IndexRoute
(30-34)rootRouteChildren
(90-94)examples/react/start-typed-readable-stream/src/router.tsx (1)
getRouter
(4-14)
🔇 Additional comments (2)
examples/react/start-typed-readable-stream/tsconfig.json (1)
1-22
: LGTM!The TypeScript configuration correctly enables strict mode with extensive type safety, aligning with the project's coding standards. The modern settings (ESNext, Bundler resolution, ES2022 target) are appropriate for this Vite-based React example.
Based on learnings.
examples/react/start-typed-readable-stream/src/routes/index.tsx (1)
64-100
: LGTM!The client-side streaming implementation correctly demonstrates typed ReadableStream usage. The code properly handles the stream reader, maintains type safety (lines 81-83), and updates the UI incrementally as chunks arrive.
examples/react/start-typed-readable-stream/src/routes/__root.tsx
Outdated
Show resolved
Hide resolved
const stream = new ReadableStream<TextPart>({ | ||
async start(controller) { | ||
for (const message of messages) { | ||
await sleep(500) | ||
controller.enqueue(message) | ||
} | ||
sleep(500) | ||
controller.close() | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Critical: Missing await
before final sleep call.
Line 52 calls sleep(500)
without await
, causing the stream to close immediately instead of waiting 500ms after the last message. This can result in the last chunk being dropped or incomplete.
Apply this diff to fix the missing await:
for (const message of messages) {
await sleep(500)
controller.enqueue(message)
}
- sleep(500)
+ await sleep(500)
controller.close()
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
const stream = new ReadableStream<TextPart>({ | |
async start(controller) { | |
for (const message of messages) { | |
await sleep(500) | |
controller.enqueue(message) | |
} | |
sleep(500) | |
controller.close() | |
}, | |
const stream = new ReadableStream<TextPart>({ | |
async start(controller) { | |
for (const message of messages) { | |
await sleep(500) | |
controller.enqueue(message) | |
} | |
await sleep(500) | |
controller.close() | |
}, |
🤖 Prompt for AI Agents
In examples/react/start-typed-readable-stream/src/routes/index.tsx around lines
46 to 54, the final sleep(500) call is not awaited so controller.close() runs
immediately; change the code to await the final sleep before calling
controller.close() so the stream waits 500ms after the last message is enqueued
and the last chunk is not dropped.
f80fc07
to
5d18df4
Compare
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
thanks, we are also looking into async generator functions to make this even easier. so let's wait with this example, then we can showcase all of the possibilities |
Awesome! Async generator functions sound like a good solution for this problem, can't wait to see them in action. |
5d18df4
to
bc120b4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 5
🧹 Nitpick comments (2)
docs/router/framework/react/guide/streaming-data-from-server-functions.md (1)
82-88
: Simplify the async generator exampleWrapping each chunk in
new Promise<Message>
with anasync
executor adds noise and encourages an anti-pattern. Yielding the message directly keeps the code focused on streaming while preserving the typing story.- for (const msg of messages) { - // Notice how we defined the type of the streamed chunks - // in the generic passed down the Promise constructor - yield new Promise<Message>(async (r) => { - // Send the message - return r(msg) - }) - } + for (const msg of messages) { + // Each yielded value remains fully typed as `Message` + yield msg + }examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)
4-7
: Remove unused Link import
Link
isn’t referenced in this file; dropping the import keeps the example tidy.-import { - HeadContent, - Link, - Outlet, - Scripts, - createRootRoute, -} from '@tanstack/react-router' +import { + HeadContent, + Outlet, + Scripts, + createRootRoute, +} from '@tanstack/react-router'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
examples/react/start-streaming-data-from-server-functions/public/favicon.ico
is excluded by!**/*.ico
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
docs/router/framework/react/guide/streaming-data-from-server-functions.md
(1 hunks)docs/start/framework/react/server-functions.md
(1 hunks)examples/react/start-streaming-data-from-server-functions/package.json
(1 hunks)examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
(1 hunks)examples/react/start-streaming-data-from-server-functions/src/router.tsx
(1 hunks)examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
(1 hunks)examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
(1 hunks)examples/react/start-streaming-data-from-server-functions/src/styles/app.css
(1 hunks)examples/react/start-streaming-data-from-server-functions/tsconfig.json
(1 hunks)examples/react/start-streaming-data-from-server-functions/vite.config.ts
(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/react/start-streaming-data-from-server-functions/src/styles/app.css
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/react/start-streaming-data-from-server-functions/src/router.tsx
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
examples/react/start-streaming-data-from-server-functions/vite.config.ts
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/start-streaming-data-from-server-functions/src/router.tsx
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
examples/react/start-streaming-data-from-server-functions/tsconfig.json
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
examples/react/start-streaming-data-from-server-functions/vite.config.ts
examples/react/start-streaming-data-from-server-functions/package.json
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/router/framework/react/guide/streaming-data-from-server-functions.md
docs/start/framework/react/server-functions.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/framework/react/guide/streaming-data-from-server-functions.md
docs/start/framework/react/server-functions.md
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/react/start-streaming-data-from-server-functions/package.json
🧠 Learnings (2)
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/react/start-streaming-data-from-server-functions/tsconfig.json
🧬 Code graph analysis (3)
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1)
examples/react/start-streaming-data-from-server-functions/src/router.tsx (1)
getRouter
(4-14)
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (2)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
Route
(95-97)examples/react/basic-ssr-streaming-file-based/src/routes/__root.tsx (1)
RootComponent
(58-99)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)
Route
(13-18)
🪛 Biome (2.1.2)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
[error] 86-90: Promise executor functions should not be async
.
(lint/suspicious/noAsyncPromiseExecutor)
🪛 markdownlint-cli2 (0.18.1)
docs/start/framework/react/server-functions.md
209-209: Spaces inside link text
(MD039, no-space-in-links)
🔇 Additional comments (8)
examples/react/start-streaming-data-from-server-functions/vite.config.ts (1)
1-17
: LGTM!The Vite configuration is clean and properly structured with the correct plugin order and server settings for the TanStack Start example.
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (6)
11-23
: LGTM!The Zod schema accurately models the OpenAI streaming response format with proper typing for content, index, and finish_reason fields.
29-44
: LGTM!The message generation logic correctly creates random numeric messages and validates them against the schema, ensuring type safety throughout the streaming pipeline.
58-74
: LGTM!The typed ReadableStream implementation correctly demonstrates streaming
TextPart
chunks with simulated latency. The type safety ensures consumers receive properly typed chunks.
105-127
: LGTM!The ReadableStream reader implementation correctly handles the typed stream with proper guards and accumulates content safely.
129-137
: LGTM!The async generator iteration correctly handles the typed stream and accumulates messages with proper type safety.
139-154
: LGTM!The UI component properly demonstrates both streaming approaches with clear button labels and separate display areas for each method.
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1)
1-68
: Skipping review of autogenerated file.This file is autogenerated by TanStack Router and should not be manually modified or reviewed. The header comments (lines 7-9) confirm this is generated content that will be overwritten.
Based on learnings
"scripts": { | ||
"dev": "vite dev", | ||
"build": "vite build && tsc --noEmit", | ||
"start": "vite start" | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix the Vite start script
vite start
is not a valid CLI entry point in Vite 7, so npm run start
will fail. Switch to vite preview
instead.
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
- "start": "vite start"
+ "start": "vite preview"
},
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
"scripts": { | |
"dev": "vite dev", | |
"build": "vite build && tsc --noEmit", | |
"start": "vite start" | |
}, | |
"scripts": { | |
"dev": "vite dev", | |
"build": "vite build && tsc --noEmit", | |
"start": "vite preview" | |
}, |
🤖 Prompt for AI Agents
examples/react/start-streaming-data-from-server-functions/package.json lines
6-10: the "start" script uses the invalid CLI command "vite start" (Vite v7);
change it to use "vite preview" instead so npm run start runs the correct Vite
preview server after build.
"@tanstack/react-router": "^1.132.33", | ||
"@tanstack/react-router-devtools": "^1.132.33", | ||
"@tanstack/react-start": "^1.132.36", | ||
"react": "^19.0.0", | ||
"react-dom": "^19.0.0", | ||
"zod": "^3.24.2" | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion | 🟠 Major
Use workspace protocol for internal TanStack deps
Per the repository guidelines, internal TanStack packages in examples should reference local workspaces to avoid mismatched registry installs.
- "@tanstack/react-router": "^1.132.33",
- "@tanstack/react-router-devtools": "^1.132.33",
- "@tanstack/react-start": "^1.132.36",
+ "@tanstack/react-router": "workspace:*",
+ "@tanstack/react-router-devtools": "workspace:*",
+ "@tanstack/react-start": "workspace:*",
As per coding guidelines.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
"@tanstack/react-router": "^1.132.33", | |
"@tanstack/react-router-devtools": "^1.132.33", | |
"@tanstack/react-start": "^1.132.36", | |
"react": "^19.0.0", | |
"react-dom": "^19.0.0", | |
"zod": "^3.24.2" | |
}, | |
"dependencies": { | |
"@tanstack/react-router": "workspace:*", | |
"@tanstack/react-router-devtools": "workspace:*", | |
"@tanstack/react-start": "workspace:*", | |
"react": "^19.0.0", | |
"react-dom": "^19.0.0", | |
"zod": "^3.24.2" | |
}, |
🤖 Prompt for AI Agents
In examples/react/start-streaming-data-from-server-functions/package.json around
lines 12 to 18, the three internal TanStack deps (@tanstack/react-router,
@tanstack/react-router-devtools, @tanstack/react-start) are pinned to registry
versions; change them to use the workspace protocol (e.g. "workspace:*") so the
example resolves local monorepo packages instead of installing mismatched
registry versions, leave react, react-dom and zod unchanged, and run
install/lockfile update afterwards.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@coderabbitai all our examples use the versioned packages instead of local references since we need those examples to be runnable on its own (e.g. when using gitpick)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i mistyped, i meant you @coderabbitai
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@schiller-manuel, thank you for the clarification! I apologize for the incorrect suggestion. You're absolutely right that examples need to use versioned packages to remain runnable as standalone projects (e.g., via gitpick).
I have a learning in my knowledge base that suggests using workspace:*
protocol for internal dependencies in package.json files, but it doesn't account for examples. Would you like me to:
- Remove that learning entirely, or
- Keep it but add a new learning that examples should use versioned packages instead of workspace protocol?
I want to make sure I get this right for future reviews!
🧠 Learnings used
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/package.json : Use workspace:* protocol for internal dependencies in package.json files
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keep it but add a new learning that examples should use versioned packages instead of workspace protocol?
const router = createRouter({ | ||
routeTree, | ||
defaultPreload: 'intent', | ||
defaultErrorComponent: (err) => <p>{err.error.stack}</p>, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider security implications of displaying raw error stack.
Displaying err.error.stack
directly in the UI could expose sensitive information (file paths, internal structure, etc.) in production. For a demo/example this is acceptable, but consider adding a comment noting this should be replaced with a user-friendly error message in production.
Apply this diff to add a clarifying comment:
- defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
+ // Note: In production, avoid displaying raw stack traces to users
+ defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
defaultErrorComponent: (err) => <p>{err.error.stack}</p>, | |
// Note: In production, avoid displaying raw stack traces to users | |
defaultErrorComponent: (err) => <p>{err.error.stack}</p>, |
🤖 Prompt for AI Agents
In examples/react/start-streaming-data-from-server-functions/src/router.tsx
around line 8, the defaultErrorComponent currently renders err.error.stack
directly which can leak sensitive internals; add an inline comment above or next
to this line noting that showing raw error stacks is only acceptable in demos
and must be replaced in production with a generic/user-friendly message (and
consider logging the full stack server-side instead).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@coderabbitai this is just a demo, not a production app, so ignore this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@schiller-manuel, you're absolutely right! I understand this is a demo example, and displaying the raw error stack is perfectly appropriate for educational purposes. I'll make a note of this for future reviews of example code. Thank you for the clarification!
✏️ Learnings added
Learnt from: schiller-manuel
PR: TanStack/router#5363
File: examples/react/start-streaming-data-from-server-functions/src/router.tsx:8-8
Timestamp: 2025-10-05T20:43:54.644Z
Learning: For code in example or demo directories (e.g., paths containing `examples/`), do not flag production-level security concerns such as displaying raw error stacks, hardcoded credentials for demos, or lack of input validation. Examples are for educational purposes and different standards apply.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
Show resolved
Hide resolved
thanks a lot! |
Turns out typed Readable Streams are in high demand thanks to AI apps (I actually use them myself with TanStack Start), but we didn't have any examples for it yet, so I added one.
I'm happy to update the docs too, but not sure where.
Summary by CodeRabbit
New Features
Documentation
Chores