feat: show structured log fields in log viewer#3972
Conversation
|
@MicroYui is attempting to deploy a commit to the Hatchet Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds support for displaying structured log metadata (“fields”) alongside log lines in the UI.
Changes:
- Map
metadatafromV1LogLineinto the localLogLinemodel in two places. - Add a “Fields” popover to the log viewer that pretty-prints metadata as JSON.
- Introduce
log-metadatautilities with unit tests.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/workflow-run-logs.tsx | Maps row.metadata into LogLine for workflow-run logs. |
| frontend/app/src/pages/main/v1/logs/hooks/use-tenant-logs.tsx | Maps row.metadata into LogLine for tenant logs. |
| frontend/app/src/components/v1/cloud/logging/log-viewer.tsx | Renders a “Fields” popover when log metadata is present. |
| frontend/app/src/components/v1/cloud/logging/log-metadata.ts | Adds helpers to detect/format metadata. |
| frontend/app/src/components/v1/cloud/logging/log-metadata.test.ts | Adds tests for metadata helpers. |
| timestamp: row.createdAt, | ||
| line: row.message, | ||
| level: row.level, | ||
| metadata: row.metadata as Record<string, unknown> | undefined, |
| timestamp: row.createdAt, | ||
| line: row.message, | ||
| level: row.level, | ||
| metadata: row.metadata as Record<string, unknown> | undefined, |
| export function hasLogMetadata( | ||
| metadata: Record<string, unknown> | undefined, | ||
| ): metadata is Record<string, unknown> { | ||
| return !!metadata && Object.keys(metadata).length > 0; |
| const formattedMetadata = formatLogMetadata(metadata); | ||
|
|
||
| return ( | ||
| <Popover> |
MicroYui
force-pushed
the
feat/issue-3859-log-fields
branch
from
d43d23b to
3e6763a
Compare
|
Promptless prepared a documentation update related to this change. Triggered by PR #3972 Added a new "Viewing logs in the dashboard" section to the logging documentation explaining that log lines with structured metadata display a Fields button to view the data as formatted JSON. |
|
Hey @MicroYui. Can you use the Hatchet PR template format? Also, could you provide some screenshots for how this will change the UI? |
MicroYui
force-pushed
the
feat/issue-3859-log-fields
branch
from
3e6763a to
7f06d3c
Compare
|
@gregfurman Updated the PR description to use the Hatchet PR template format and added screenshots showing the new log fields UI. I also rebased the branch on the latest
|
gregfurman
left a comment
gregfurman
left a comment
There was a problem hiding this comment.
LGTM! Have left some comments mostly about future works. Nothing blocking this though, and am happy to iterate on the UI at a later point.
Thanks for the neat contribution 😄
| Fields | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| className="w-[320px] max-w-[90vw] border-border bg-popover p-0 text-left shadow-lg sm:w-[460px] md:w-[560px] lg:w-[680px]" |
There was a problem hiding this comment.
nit(non-blocking): I'm slightly concerned about how hardcoding these values will affect the rendering on different layout dimensions.
i.e
| const formattedMetadata = formatLogMetadata(metadata); | ||
|
|
||
| return ( | ||
| <Popover> |
There was a problem hiding this comment.
nit: Could be worth considering a more structured rendering of the fields KV pairs. Like, instead of a JSON object we could have a more table-looking representation e.g.
| Field | Value |
|---|---|
| retryCount | 2 |
Otherwise, perhaps even consider placing the fields in a column instead 🤔 e.g.
| Timestamp | Level | Task | Message | Fields |
|---|---|---|---|---|
| 11 minutes ago | INFO | bulk-replay-test-1-1779… | retrying bulk replay test task | { "retryCount": 2 } |
| 11 minutes ago | INFO | bulk-replay-test-2-1779… | retrying bulk replay test task | {} |
| 11 minutes ago | INFO | bulk-replay-test-1-1779… | retrying bulk replay test task | {} |
| 11 minutes ago | INFO | bulk-replay-test-1-1779… | retrying bulk replay test task | {} |
This isn't blocking though and definitely a future-works!
| timestamp: row.createdAt, | ||
| line: row.message, | ||
| level: row.level, | ||
| metadata: row.metadata as Record<string, unknown> | undefined, |
There was a problem hiding this comment.
nit: No fields renders correctly without this Popover. I'm curious if this UI could be improved upon though (see https://github.com/hatchet-dev/hatchet/pull/3972/changes#r3298950244)
Description
Shows structured log metadata in the v1 log viewer. Log rows with non-empty metadata now render a
Fieldsbutton next to the message; clicking it opens a popover with pretty-printed JSON fields.Fixes #3859
Type of change
What's Changed
Fieldspopover inLogViewerwhen log rows include metadatarow.metadatathrough tenant logs and workflow run logsChecklist
Changes have been:
Testing
cd frontend/app && corepack pnpm test:unitcd frontend/app && corepack pnpm exec eslint src/components/v1/cloud/logging/log-metadata.ts src/components/v1/cloud/logging/log-metadata.test.ts src/components/v1/cloud/logging/log-viewer.tsx src/pages/main/v1/logs/hooks/use-tenant-logs.tsx 'src/pages/main/v1/workflow-runs-v1/$run/v2components/workflow-run-logs.tsx'cd frontend/app && corepack pnpm exec prettier --check src/components/v1/cloud/logging/log-metadata.ts src/components/v1/cloud/logging/log-metadata.test.ts src/components/v1/cloud/logging/log-viewer.tsx src/pages/main/v1/logs/hooks/use-tenant-logs.tsx 'src/pages/main/v1/workflow-runs-v1/$run/v2components/workflow-run-logs.tsx'git diff upstream/main...HEAD --checkRelated
Screenshots:
AI Disclosure
I acknowledge that an LLM was used in the creation of this Pull Request, in accordance with Hatchet's AI_POLICY.md.
Details: LLM assistance was used to inspect the branch, draft the PR description, and prepare representative UI screenshot assets.