Skip to content

feat: show structured log fields in log viewer #3972

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

Merged
gregfurman merged 1 commit into from
May 25, 2026
Merged

feat: show structured log fields in log viewer #3972

Show file tree
Hide file tree
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
25 changes: 25 additions & 0 deletions frontend/app/src/components/v1/cloud/logging/log-metadata.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { formatLogMetadata, hasLogMetadata } from './log-metadata';
import * as assert from 'node:assert';
import { test } from 'node:test';

test('hasLogMetadata returns true for non-empty metadata objects', () => {
assert.strictEqual(hasLogMetadata({ chunkIndex: 16 }), true);
});

test('hasLogMetadata returns false for missing or empty metadata', () => {
assert.strictEqual(hasLogMetadata(undefined), false);
assert.strictEqual(hasLogMetadata({}), false);
});

test('formatLogMetadata pretty-prints metadata fields', () => {
const formatted = formatLogMetadata({
chunkIndex: 16,
elapsedMs: 595,
evt: 'staff_comp_snapshot_upsert_complete',
});

assert.strictEqual(
formatted,
'{\n "chunkIndex": 16,\n "elapsedMs": 595,\n "evt": "staff_comp_snapshot_upsert_complete"\n}',
);
});
9 changes: 9 additions & 0 deletions frontend/app/src/components/v1/cloud/logging/log-metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export function hasLogMetadata(
metadata: Record<string, unknown> | undefined,
): metadata is Record<string, unknown> {
return !!metadata && Object.keys(metadata).length > 0;
}

export function formatLogMetadata(metadata: Record<string, unknown>): string {
return JSON.stringify(metadata, null, 2);
}
45 changes: 44 additions & 1 deletion frontend/app/src/components/v1/cloud/logging/log-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { AnsiLine } from './ansi-line';
import { formatLogMetadata, hasLogMetadata } from './log-metadata';
import {
LogLine,
V1LogLineLevelIncludingEvictionNotice,
Expand All @@ -19,7 +20,7 @@ import { V1LogLineLevel, V1TaskStatus } from '@/lib/api';
import { cn } from '@/lib/utils';
import { Link } from '@tanstack/react-router';
import { ExternalLink, XCircle } from 'lucide-react';
import { useMemo, useCallback, useRef, useState } from 'react';
import { createElement, useCallback, useMemo, useRef, useState } from 'react';

const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
year: 'numeric',
Expand Down Expand Up @@ -184,6 +185,45 @@ function ErrorPopover({ error }: { error: string }) {
);
}

function FieldsPopover({ metadata }: { metadata: Record<string, unknown> }) {
const formattedMetadata = formatLogMetadata(metadata);

return (
<Popover>
Comment on lines +189 to +192
Copy link
Copy Markdown
Collaborator

@gregfurman gregfurman May 25, 2026

Choose a reason for hiding this comment

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

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!

<PopoverTrigger
onClick={(e) => e.stopPropagation()}
className="ml-2 shrink-0 inline-flex items-center gap-1 rounded border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:border-foreground/40 hover:bg-muted hover:text-foreground"
>
<span aria-hidden="true">{'{}'}</span>
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]"
Copy link
Copy Markdown
Collaborator

@gregfurman gregfurman May 25, 2026

Choose a reason for hiding this comment

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

nit(non-blocking): I'm slightly concerned about how hardcoding these values will affect the rendering on different layout dimensions.

i.e
Image

align="start"
>
<div className="space-y-3 p-4">
<div className="flex items-center gap-2 border-b border-border pb-2">
<span className="font-mono text-xs text-muted-foreground">
{'{}'}
</span>
<h3 className="font-medium text-foreground">Log Fields</h3>
</div>
<div className="max-h-[420px] overflow-auto rounded-md border border-border bg-muted/50">
{createElement(
'pre',
{
className:
'm-0 whitespace-pre-wrap break-words p-4 text-left font-mono text-xs leading-relaxed text-foreground',
},
formattedMetadata,
)}
</div>
</div>
</PopoverContent>
</Popover>
);
}

export function LogViewer({
logs,
onScrollToBottom,
Expand Down Expand Up @@ -459,6 +499,9 @@ export function LogViewer({
{/* fixme: figure out how to use the type guard properly here */}
<AnsiLine text={log.line as string} />
</span>
{hasLogMetadata(log.metadata) && (
<FieldsPopover metadata={log.metadata} />
)}
{log.error && <ErrorPopover error={log.error} />}
{log.linkTo && (
<TooltipProvider>
Expand Down
1 change: 1 addition & 0 deletions frontend/app/src/pages/main/v1/logs/hooks/use-tenant-logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ function mapToLogLines(rows: V1LogLine[]): LogLine[] {
timestamp: row.createdAt,
line: row.message,
level: row.level,
metadata: row.metadata as Record<string, unknown> | undefined,
Copy link
Copy Markdown
Collaborator

@gregfurman gregfurman May 25, 2026

Choose a reason for hiding this comment

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

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)

Image

attempt: row.attempt,
taskExternalId: row.taskExternalId,
taskDisplayName: row.taskDisplayName,
Expand Down
1 change: 1 addition & 0 deletions frontend/app/src/pages/main/v1/workflow-runs-v1/$run/v2components/workflow-run-logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ function mapToLogLines(rows: V1LogLine[]): LogLine[] {
timestamp: row.createdAt,
line: row.message,
level: row.level,
metadata: row.metadata as Record<string, unknown> | undefined,
attempt: row.attempt,
taskExternalId: row.taskExternalId,
taskDisplayName: row.taskDisplayName,
Expand Down
Loading