feat: add gateway logs to project details#4014
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
📝 WalkthroughWalkthroughAdds a dual-source deployment logs model (build steps vs gateway logs) controlled by deployment status, introduces a TRPC build-steps endpoint, removes legacy buildLogs and a deployment sub-router, and updates UI/hook wiring, types, formatting, and small UI/styling tweaks. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Card as ActiveDeploymentCard
participant Hook as useDeploymentLogs
participant TRPC as trpc (buildSteps / logs.queryLogs)
participant DB as Database
User->>Card: Open Active Deployment view
Card->>Hook: useDeploymentLogs({ deploymentId, showBuildSteps })
alt showBuildSteps = true
Hook->>TRPC: deploy.deployment.buildSteps(deploymentId)
TRPC->>DB: Query build steps
DB-->>TRPC: Steps
TRPC-->>Hook: { logs: [{id,timestamp,message}] }
else showBuildSteps = false
Hook->>TRPC: logs.queryLogs({ deploymentId })
TRPC->>DB: Query gateway logs
DB-->>TRPC: Log rows
TRPC-->>Hook: Logs (status, time, path, ...)
end
Hook->>Hook: Normalize entries → storedLogs Map → sort & cap → compute counts/filteredLogs
Hook-->>Card: { logs, logCounts, isLoading, isExpanded, ... }
Card-->>User: Render Build logs or Gateway logs list
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
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 |
ogzhanolguncu
requested review from
chronark,
mcstepp and
perkinsjr
as code owners
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx(3 hunks)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx(7 hunks)apps/dashboard/lib/trpc/routers/deploy/deployment/build-steps.ts(1 hunks)apps/dashboard/lib/trpc/routers/deploy/deployment/buildLogs.ts(0 hunks)apps/dashboard/lib/trpc/routers/deploy/deployment/index.ts(0 hunks)apps/dashboard/lib/trpc/routers/index.ts(2 hunks)
💤 Files with no reviewable changes (2)
- apps/dashboard/lib/trpc/routers/deploy/deployment/index.ts
- apps/dashboard/lib/trpc/routers/deploy/deployment/buildLogs.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-07-25T19:09:43.284Z
Learnt from: mcstepp
PR: unkeyed/unkey#3662
File: apps/dashboard/lib/trpc/routers/deployment/list.ts:11-11
Timestamp: 2025-07-25T19:09:43.284Z
Learning: In apps/dashboard/lib/trpc/routers/deployment/list.ts, the listDeployments procedure intentionally queries the versions table rather than a deployments table. The user mcstepp indicated that renaming the table would require a database migration, which was deferred for the current PR focused on UI features.
Applied to files:
apps/dashboard/lib/trpc/routers/index.tsapps/dashboard/lib/trpc/routers/deploy/deployment/build-steps.ts
📚 Learning: 2025-07-25T19:11:00.208Z
Learnt from: mcstepp
PR: unkeyed/unkey#3662
File: apps/dashboard/lib/trpc/routers/deployment/getOpenApiDiff.ts:110-147
Timestamp: 2025-07-25T19:11:00.208Z
Learning: In apps/dashboard/lib/trpc/routers/deployment/getOpenApiDiff.ts, the user mcstepp prefers to keep mock data fallbacks in POC/demonstration code for simplicity, even if it wouldn't be production-ready. This aligns with the PR being work-in-progress for demonstration purposes.
Applied to files:
apps/dashboard/lib/trpc/routers/index.ts
🧬 Code graph analysis (4)
apps/dashboard/lib/trpc/routers/index.ts (1)
apps/dashboard/lib/trpc/routers/deploy/deployment/build-steps.ts (1)
getDeploymentBuildSteps(23-70)
apps/dashboard/lib/trpc/routers/deploy/deployment/build-steps.ts (2)
apps/dashboard/lib/trpc/trpc.ts (4)
t(8-8)requireUser(10-21)requireWorkspace(23-36)withRatelimit(122-138)apps/dashboard/lib/db.ts (1)
db(5-26)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx (2)
apps/dashboard/providers/query-time-provider.tsx (1)
useQueryTime(74-80)apps/dashboard/lib/trpc/server.ts (1)
trpc(7-14)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx (2)
apps/dashboard/app/(app)/projects/[projectId]/layout-provider.tsx (1)
useProjectLayout(13-19)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx (1)
useDeploymentLogs(50-223)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
🔇 Additional comments (1)
apps/dashboard/lib/trpc/routers/index.ts (1)
40-41: No TRPC callers tobuildLogsremain
Search returned only protobuf‐generatedbuildLogsfields (builder.pb.go/.ts); nodeploy.deployment.buildLogsusage detected.
.../app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx
Show resolved
Hide resolved
.../app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx
Show resolved
Hide resolved
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx
Show resolved
Hide resolved
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
.../app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/filter-button.tsx (1)
30-32: Prevent badge overflow for larger countsFixed width can clip values like 1.2k/10k. Use min-width and padding.
- <div className="rounded w-[22px] h-[18px] flex items-center justify-center text-[10px] leading-4 bg-gray-6 text-black dark:text-white"> + <div className="rounded min-w-[22px] h-[18px] px-1 flex items-center justify-center text-[10px] leading-4 bg-gray-6 text-black dark:text-white"> {count} </div>apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx (1)
249-252: Use stable keys for log rowsmessage-index keys cause unnecessary re-renders and incorrect DOM reuse. Prefer the log.id you already compute.
- {filteredLogs.map((log, index) => ( + {filteredLogs.map((log) => ( <div - key={`${log.message}-${index}`} + key={log.id}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/filter-button.tsx(2 hunks)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx(3 hunks)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx(8 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx (3)
apps/dashboard/app/(app)/projects/[projectId]/layout-provider.tsx (1)
useProjectLayout(13-19)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx (1)
useDeploymentLogs(51-224)apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/filter-button.tsx (1)
FilterButton(13-34)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx (3)
apps/dashboard/providers/query-time-provider.tsx (1)
useQueryTime(74-80)apps/dashboard/lib/trpc/server.ts (1)
trpc(7-14)apps/dashboard/app/(app)/projects/[projectId]/gateway-logs/constants.ts (1)
EXCLUDED_HOSTS(8-8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
- GitHub Check: Vercel Agent Review
🔇 Additional comments (9)
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/filter-button.tsx (1)
7-7: Prop type update LGTMAllowing number | string for count fits the formatted counts use-case.
apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/hooks/use-deployment-logs.tsx (5)
266-268: Confirm timestamp unit (ms vs s) to avoid wrong time displayIf build/gateway timestamps are seconds, format(new Date(ts)) will render ~1970 or future dates. Ensure ts is in ms or multiply by 1000 at ingestion.
Would you like me to scan the TRPC types for buildSteps.logs.timestamp and logs.queryLogs.time to confirm units and add normalization at the mapping site?
156-160: Filter correctly by mode (don’t show build logs under warnings/errors in gateway mode)Currently includes all build logs when “warnings”/“errors” are selected. Respect showBuildSteps.
- if (logFilter === "warnings") { - filtered = logs.filter((log) => log.type === "build" || log.level === "warning"); - } else if (logFilter === "errors") { - filtered = logs.filter((log) => log.type === "build" || log.level === "error"); - } + if (logFilter === "warnings") { + filtered = showBuildSteps + ? logs.filter((log) => log.type === "build") + : logs.filter((log) => log.type === "gateway" && log.level === "warning"); + } else if (logFilter === "errors") { + filtered = showBuildSteps + ? logs.filter((log) => log.type === "build") + : logs.filter((log) => log.type === "gateway" && log.level === "error"); + } @@ - }, [logs, logFilter, searchTerm]); + }, [logs, logFilter, searchTerm, showBuildSteps]);
129-134: Keep the newest logs when trimmingAscending sort + slice(0, MAX) discards newest entries. Retain the last N.
- const sortedEntries = Array.from(newMap.entries()) - .sort((a, b) => a[1].timestamp - b[1].timestamp) - .slice(0, MAX_STORED_LOGS); + const sortedEntries = Array.from(newMap.entries()) + .sort((a, b) => a[1].timestamp - b[1].timestamp) + .slice(-MAX_STORED_LOGS);
59-62: Reset cached logs on mode switch to avoid cross-contaminationWhen switching from build steps to gateway logs, stale build entries remain until gateway data arrives. Clear cache on showBuildSteps change.
const [storedLogs, setStoredLogs] = useState<Map<string, LogEntry>>(new Map()); const scrollRef = useRef<HTMLDivElement>(null); const { queryTime: timestamp } = useQueryTime(); + useEffect(() => { + setStoredLogs(new Map()); + }, [showBuildSteps]);
71-88: Verify gateway logs time window
Confirm that passing identical startTime and endTime yields an empty range in the server logic; if so, remove both parameters and either rely solely on since or compute startTime as timestamp – since.apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/index.tsx (3)
83-86: Good: clear UI split between build vs gatewayDeriving showBuildSteps from deployment.status keeps the component stateless regarding source selection.
190-206: Counts formatting integration LGTMUsing formatNumber aligns with the prop change to allow string counts and improves readability.
266-269: Verify timestamp unit before formattingEnsure log.timestamp is ms. If seconds, multiply by 1000 here or normalize in the hook.
If needed, I can update the hook’s mappers to standardize to ms for both sources and add unit tests.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/app/(app)/projects/[projectId]/gateway-logs/components/table/utils/get-row-class.ts(1 hunks)go/demo_api/main.go(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/dashboard/app/(app)/projects/[projectId]/gateway-logs/components/table/utils/get-row-class.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Go API Local / Test
- GitHub Check: Build / Build
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript-typescript)
|
The gateway logs on the main page should be in reverse order 
looks nice otherwise |
|
@chronark done |
2 participants
What does this PR do?
This PR shows build steps when someone first deploy's project, after the deployment status is set to "Ready", we switch to "Gateway Logs'. In the future we can add a switch for "Gateway Logs" | "Runtime Logs" since now we have a unified response for displaying logs.
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Screen.Recording.2025-09-23.at.15.09.40.mov