fix(webapp): stop hydration errors on the Tasks page#4058
Conversation
The per-row Running and Activity cells stream in via defer(); a streamed Suspense boundary still pending when the page hydrates gets bailed to client rendering and throws React #421. Render those cells client-side so there is no SSR boundary to bail.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📜 Recent review details⏰ Context from checks skipped due to timeout. (12)
🧰 Additional context used📓 Path-based instructions (6)**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
{packages/core,apps/webapp}/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
apps/webapp/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Files:
apps/webapp/**/*.{tsx,jsx}📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)
Files:
**/*.{js,ts,tsx,jsx,css,json,md}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (17)📚 Learning: 2026-05-14T14:54:39.095ZApplied to files:
📚 Learning: 2026-02-03T18:27:40.429ZApplied to files:
📚 Learning: 2026-02-11T16:37:32.429ZApplied to files:
📚 Learning: 2026-03-22T13:26:12.060ZApplied to files:
📚 Learning: 2026-03-22T19:24:14.403ZApplied to files:
📚 Learning: 2026-05-18T08:21:27.694ZApplied to files:
📚 Learning: 2026-05-18T08:21:27.694ZApplied to files:
📚 Learning: 2026-06-13T19:53:13.759ZApplied to files:
📚 Learning: 2026-06-17T17:13:49.929ZApplied to files:
📚 Learning: 2026-06-23T13:04:21.413ZApplied to files:
📚 Learning: 2026-04-02T19:18:26.255ZApplied to files:
📚 Learning: 2026-05-12T21:04:00.184ZApplied to files:
📚 Learning: 2026-05-08T21:00:20.973ZApplied to files:
📚 Learning: 2026-06-25T18:21:55.847ZApplied to files:
📚 Learning: 2026-05-12T21:04:05.815ZApplied to files:
📚 Learning: 2026-06-25T18:21:51.905ZApplied to files:
📚 Learning: 2026-06-25T18:21:54.729ZApplied to files:
🔇 Additional comments (4)
WalkthroughThe PR adds client-only gating around deferred task stats rendering in the Tasks page route. It wraps the running and hourly activity Suspense/TypedAwait sections in 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed due to a network error. 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 |
The Tasks page logged a burst of React hydration errors (#421, "this Suspense boundary received an update before it finished hydrating") on every load, one per task row for the Running and Activity cells. The page still worked, but it spammed the console.
The Running and Activity (24h) cells stream in via Remix
defer()+<Suspense>/<Await>, two boundaries per row. A streamed boundary stays in React's "hydrating" state until its data arrives; if the backing queries are slow enough that the data is still in flight after the page loads, a normal background re-render (a server-sent-events update, a panel layout effect, a revalidation) hits the boundary and React bails it to client rendering and throws #421. With N rows that is 2N errors. It never reproduced locally because those queries return instantly there.Fix: wrap the two cells in
ClientOnlyso they mount after hydration. The stats still load asynchronously (the task list renders immediately), but there is no longer an SSR boundary to bail. In the slow-query case those cells already client-rendered (that was the bail); this just makes it explicit and silent.Verified by simulating slow stat queries against a local build: the errors go from 2-per-row to zero, and the cells render correctly once the data resolves.