Skip to content

fix(react): use NDJSON format for streaming to handle TCP chunk boundaries#3000

Merged
antoniosarosi merged 2 commits intocanaryfrom
fix/react-streaming-ndjson
Jan 19, 2026
Merged

fix(react): use NDJSON format for streaming to handle TCP chunk boundaries#3000
antoniosarosi merged 2 commits intocanaryfrom
fix/react-streaming-ndjson

Conversation

@antoniosarosi
Copy link
Contributor

@antoniosarosi antoniosarosi commented Jan 19, 2026

Summary

  • Fix React hooks streaming getting stuck on localhost
  • Root cause: TCP doesn't preserve message boundaries - multiple JSON objects could arrive in one chunk or be split across chunks
  • Solution: Use NDJSON (Newline-Delimited JSON) format, which is the standard used by OpenAI, Anthropic, and other streaming APIs

Changes

  • Server-side (stream.ts): Add newline delimiter after each JSON message
  • Client-side (hooks.tsx.j2): Buffer chunks and split by newlines for proper NDJSON parsing
  • Tests: Add chunk boundary tests to verify fix

Test plan

  • Unit tests pass (9 streaming tests)
  • Manual browser testing confirms streaming works on localhost
  • Status transitions properly: Idle → Pending → Streaming → Success
Screenshot_20260119_151320

@vercel
Copy link

vercel bot commented Jan 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
beps Ready Ready Preview, Comment Jan 19, 2026 3:16pm
promptfiddle Ready Ready Preview, Comment Jan 19, 2026 3:16pm

Request Review

…aries

React hooks streaming would get stuck on localhost because TCP doesn't
preserve message boundaries - multiple JSON objects could arrive in one
chunk or be split across chunks. The original code assumed each
reader.read() returns exactly one complete JSON object.

Changes:
- Server-side (stream.ts): Add newline delimiter after each JSON message
- Client-side (hooks.tsx.j2): Buffer chunks and split by newlines (NDJSON)
- Add tests for chunk boundary handling

NDJSON (Newline-Delimited JSON) is the standard format used by OpenAI,
Anthropic, and other streaming APIs.
@antoniosarosi antoniosarosi added this pull request to the merge queue Jan 19, 2026
Merged via the queue into canary with commit d4edca7 Jan 19, 2026
41 checks passed
@antoniosarosi antoniosarosi deleted the fix/react-streaming-ndjson branch January 19, 2026 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant