Skip to content

fix: Use user's timezone time in uptime table. #256

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.

Sign up for GitHub

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

Closed
sbansal1999 wants to merge 1 commit into from
Closed

fix: Use user's timezone time in uptime table. #256

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion apps/dashboard/app/(main)/websites/[id]/pulse/_components/recent-activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
XCircleIcon,
} from "@phosphor-icons/react";
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { Badge } from "@/components/ui/badge";
import {
Table,
Expand All @@ -17,6 +19,11 @@ import {
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

dayjs.extend(utc);
dayjs.extend(timezone);

const userTimezone = dayjs.tz.guess();
Comment on lines +22 to +25
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Module-level timezone computation breaks SSR and defeats the PR's purpose.

Computing userTimezone at module level causes it to run during server-side rendering or at build time, capturing the server's timezone instead of the user's. This directly contradicts the PR objective of using the user's timezone.

Move the timezone computation inside the component function to ensure it executes client-side:

🔎 Proposed fix 
 dayjs.extend(utc);
 dayjs.extend(timezone);
-
-const userTimezone = dayjs.tz.guess();
-
 type Check = {
 	timestamp: string;
 export function RecentActivity({ checks, isLoading }: RecentActivityProps) {
+	const userTimezone = dayjs.tz.guess();
+
 	if (isLoading) {
 		return (
🤖 Prompt for AI Agents 
In apps/dashboard/app/(main)/websites/[id]/pulse/_components/recent-activity.tsx
around lines 22–25, computing userTimezone at module scope causes the timezone
to be resolved during SSR/build (server timezone) instead of per-user; remove
the module-level const userTimezone and instead compute the timezone inside the
React component at runtime on the client (e.g., use a useState + useEffect to
call dayjs.tz.guess() and set it, or mark the file "use client" and call
dayjs.tz.guess() directly in the component body), while keeping
dayjs.extend(utc) and dayjs.extend(timezone) at module level if desired.


type Check = {
timestamp: string;
status: number; // 1 = up, 0 = down, 2 = pending
Expand Down Expand Up @@ -123,7 +130,10 @@ export function RecentActivity({ checks, isLoading }: RecentActivityProps) {
</div>
</TableCell>
<TableCell className="text-center text-muted-foreground text-xs">
{dayjs(check.timestamp).format("MMM D, HH:mm:ss")}
{dayjs
.utc(check.timestamp)
.tz(userTimezone)
.format("MMM D, HH:mm:ss")}
</TableCell>
<TableCell className="text-center text-muted-foreground text-xs">
<Badge className="font-mono text-[10px]" variant="outline">
Expand Down
Loading