fix: hydration error from date formatting timezone mismatch#1863
fix: hydration error from date formatting timezone mismatch#1863amikofalvy merged 1 commit intomainfrom
Conversation
Fixes PILOT-INKEEP-COM-J Added timeZone: 'UTC' to all Intl.DateTimeFormat calls in format-date.ts to ensure server and client render identical date strings. The issue occurred because formatDate, formatDateTime, formatDateTimeTable, and formatDateAgo used Intl.DateTimeFormat without specifying a timezone. Server (Vercel) defaulted to UTC while clients used their local timezone, causing hydration mismatches for dates near midnight. This affected 59 occurrences across 60+ URLs impacting 15 users. Co-authored-by: Cursor <cursoragent@cursor.com>
🦋 Changeset detectedLatest commit: ad042be The changes in this PR will be included in the next version bump. This PR includes changesets to release 10 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Review Summary
0 Key Findings | Risk: Low
🔴❗ Critical (0) ❗🔴
None.
🟠⚠️ Major (0) 🟠⚠️
None.
🟡 Minor (0) 🟡
None.
💭 Consider (1) 💭
💭 1) invocations-table.tsx:34-46 Pre-existing similar pattern without UTC timezone
Issue: There's a local formatDate function in invocations-table.tsx that uses toLocaleString() without timeZone: 'UTC', which could have the same hydration issue this PR fixes.
Why: While out of scope for this PR (pre-existing, not worsened by these changes), it may warrant a follow-up fix for consistency.
Fix: Consider a follow-up PR to either use the shared formatDateTime from format-date.ts or add timeZone: 'UTC' to that local function.
Refs: invocations-table.tsx:34-46
🕐 Pending Recommendations (0)
None — this is the first review.
✅ APPROVE
Summary: This is a clean, well-targeted bug fix! 🎉 The fix correctly addresses the React hydration error (Sentry: PILOT-INKEEP-COM-J) by adding timeZone: 'UTC' to all four date formatting functions. The implementation is minimal, consistent, and follows the recommended pattern for resolving date-based hydration mismatches in Next.js applications. All existing tests pass, and the changeset is properly formatted.
Note: I cannot submit a formal GitHub approval due to permission restrictions, but this PR is recommended for approval.
Discarded (0)
No findings were discarded.
Reviewers (3)
| Reviewer | Returned | Main Findings | Consider | Inline Comments | Pending Recs | Discarded |
|---|---|---|---|---|---|---|
pr-review-standards |
0 | 0 | 0 | 0 | 0 | 0 |
pr-review-frontend |
0 | 0 | 0 | 0 | 0 | 0 |
pr-review-sre |
0 | 0 | 0 | 0 | 0 | 0 |
| Total | 0 | 0 | 0 | 0 | 0 | 0 |
Note: The Consider item was identified through orchestrator analysis of reviewer observations, not as a formal finding.
|
No docs changes detected. This is an internal bug fix for timezone handling in date formatting utilities. |
|
No docs changes detected. This is an internal bug fix for date formatting utilities in the management UI that doesn't introduce new user-facing features or API changes. |
1 participant
Summary
Fixes PILOT-INKEEP-COM-J - Hydration error affecting 59 occurrences across 60+ URLs, impacting 15 users since Jan 15.
Problem
All date formatting functions in
format-date.tsusedIntl.DateTimeFormatwithout specifyingtimeZone, causing server/client mismatches:For dates near midnight UTC, this produces different formatted strings (e.g., "Jan 20, 2025" vs "Jan 19, 2025"), triggering React hydration errors.
Changes
Added
timeZone: 'UTC'to all date formatting functions:formatDateformatDateTimeformatDateTimeTableformatDateAgoTest plan
Made with Cursor