[local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation by nickpatt · Pull Request #14941 · cloudflare/workers-sdk

nickpatt · 2026-07-30T20:21:46Z

Four fixes to the Local Explorer Observability views (Traces / Events).

1. Readable log messages
console.log is captured as a JSON-encoded array of its arguments, so multi-arg logs rendered as a raw array, e.g. ["request failed:","D1_ERROR: …"]. formatLogMessage now renders the array the way the console would — strings verbatim, everything else as JSON, space-joined (request failed: D1_ERROR: …). Both log renderers (the Events list and the inline invocation logs) now share this one function.

2. Search by id
The Traces and Events search bars couldn't look up a span/trace id. Added trace:<id> / span:<id> query terms (with traceid/trace_id aliases), and free-text search now also matches trace/span ids — so pasting a bare id just finds it. Prefix matching means the truncated ids shown in the list work too. Documented in the query-syntax popover.

3. "View trace" from an event
Each event row with a span_id now has a button that jumps to the Traces view, auto-expands that event's trace waterfall, and scrolls it into view (via a ?trace=<id> deep link).

4. Drop the redundant page-title view switcher
The sidebar already switches between the Traces and Events views, so the extra dropdown in each page title was duplicative. Replaced it with a plain title and removed the now-unused ObservabilityViewSwitcher component.

Tests
- Tests included/updated
- Automated tests not possible - manual testing has been completed as follows:
- Additional testing not necessary because:
Public documentation
- Cloudflare docs PR(s):
- Documentation not necessary because: internal local-dev tooling UI (the Local Explorer Observability tab); no public API or documented surface change.

…to-trace navigation

changeset-bot · 2026-07-30T20:21:50Z

🦋 Changeset detected

Latest commit: 73b824f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@cloudflare/vite-plugin	Minor
wrangler	Minor
@cloudflare/vitest-pool-workers	Patch

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

workers-devprod · 2026-07-30T20:22:19Z

Codeowners approval required for this PR:

@cloudflare/wrangler

Show detailed file reviewers

.changeset/local-explorer-observability-ui-fixes.md: [@cloudflare/wrangler]
packages/local-explorer-ui/src/tests/observability/id-search.test.ts: [@cloudflare/wrangler]
packages/local-explorer-ui/src/tests/observability/observability.test.ts: [@cloudflare/wrangler]
packages/local-explorer-ui/src/tests/observability/query-clauses.test.ts: [@cloudflare/wrangler]
packages/local-explorer-ui/src/components/observability/InvocationLogs.tsx: [@cloudflare/wrangler]
packages/local-explorer-ui/src/components/observability/ObservabilityViewSwitcher.tsx: [@cloudflare/wrangler]
packages/local-explorer-ui/src/components/observability/QuerySyntaxHint.tsx: [@cloudflare/wrangler]
packages/local-explorer-ui/src/routes/observability/events.tsx: [@cloudflare/wrangler]
packages/local-explorer-ui/src/routes/observability/index.tsx: [@cloudflare/wrangler]
packages/local-explorer-ui/src/utils/observability-query.ts: [@cloudflare/wrangler]
packages/local-explorer-ui/src/utils/observability.ts: [@cloudflare/wrangler]

pkg-pr-new · 2026-07-30T20:25:14Z

@cloudflare/autoconfig

npm i https://pkg.pr.new/@cloudflare/autoconfig@14941

@cloudflare/build-output-utils

npm i https://pkg.pr.new/@cloudflare/build-output-utils@14941

@cloudflare/config

npm i https://pkg.pr.new/@cloudflare/config@14941

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@14941

@cloudflare/deploy-helpers

npm i https://pkg.pr.new/@cloudflare/deploy-helpers@14941

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@14941

miniflare

npm i https://pkg.pr.new/miniflare@14941

@cloudflare/pages-functions

npm i https://pkg.pr.new/@cloudflare/pages-functions@14941

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@14941

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@14941

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@14941

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@14941

@cloudflare/workers-auth

npm i https://pkg.pr.new/@cloudflare/workers-auth@14941

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@14941

@cloudflare/workers-utils

npm i https://pkg.pr.new/@cloudflare/workers-utils@14941

wrangler

npm i https://pkg.pr.new/wrangler@14941

commit: 73b824f

… label the View trace button

…d add a changeset The Events "View trace" button now carries the event's span_id, and the Traces view resolves it to the invocation row whose spans actually contain that span (findInvocationRoot), instead of always landing on the first row sharing the trace_id. Row element ids are keyed by (trace_id, root_span_id) so they stay unique across a multi-invocation trace.

NuroDev · 2026-07-31T09:42:38Z

 							</span>
 							<span className="font-mono text-xs break-all text-kumo-default">
-								{previewMessage(log.message)}
+								{formatLogMessage(log.message ?? undefined)}


Nit pick: Would it not be better to have a placeholder "No logs" message? That way there is less layout shift from no text being rendered.

Added a (no message) placeholder!

NuroDev · 2026-07-31T09:46:13Z

+						<Button
+							size="sm"
+							variant="secondary"
+							icon={TreeStructureIcon}
+							title="Open this event's trace in the Traces view"
+							onClick={(e) => {
+								e.stopPropagation();
+								goToTrace();
+							}}
+						>
+							View trace
+						</Button>


Is there a reason we couldn't just use a LinkButton for this? Instead of needing client-side JS for navigation.

Good call I just switched it to a LinkButton wired through TanStack's createlink, done!

NuroDev · 2026-07-31T10:05:00Z

+	test("trace: and span: are parsed as id lookups, not clauses", ({
+		expect,
+	}) => {
+		const parsed = parseTraceQuery("trace:abc123 span:def456");
+		expect(parsed.traceId).toBe("abc123");
+		expect(parsed.spanId).toBe("def456");
+		expect(parsed.clauses).toEqual([]);
+	});


Can we add one or two more small edge cases handling for these. EG: What happens if we get trace: span:?

NuroDev · 2026-07-31T10:07:17Z

 		}
 	}, [traces, expanded, loadSpans]);

+	useEffect(() => {


Can we add a small comment here outlining what this effect does at a glance, rather than having to analyse the whole block to work it out.

…, parser edge-case tests - Changeset is a minor (adds id search + View trace), not a patch; backtick console.log. - Render a muted "(no message)" placeholder for empty logs to avoid layout shift (Events + InvocationLogs). - Add trace:/span: parser edge cases: valueless tokens fall back to free text, id aliases, and id-lookup alongside a clause. - Summarise the deep-link effect with a one-line comment.

…search params Switch the Events "View trace" button to a router-aware link (createLink around Kumo's LinkButton) so it supports open-in-new-tab / copy-link, while the router keeps typed search params. Added a validateSearch to the /observability route (worker/trace/span) so the link and deep-link reads are typed (drops the casts). The link passes an explicit search object (worker + trace + span) instead of spreading the Events view's params, and the onClick now only stopPropagation on the clickable row.

The reveal effect only worked if the trace was already in the default trace-list window (100 rows, no id filter), but events go 200 deep, so a deep-linked trace could sit permanently outside that window and the View trace button would silently do nothing. Seed the search with `trace:<id>` when the deep link is present so the specific row is fetched via the traceId filter; if it still doesn't come back the trace is gone and the existing empty state (with the visible trace: filter) explains that.

…search Free-text search matched trace/span ids with %q% (substring anywhere), so on hex ids any short term like "de" matched almost every record and effectively disabled filtering. Match ids by prefix (q%), consistent with the trace:/span: filters, while keeping substring matching for names, messages, service, and attributes.

… from the URL The ?trace=&span= params were consumed but left in the URL. Because the view switcher preserves search params and the Traces route remounts on each visit (resetting the applied/seeded refs), the stale trace param re-seeded the trace:<id> query and re-expanded the row on every return, hiding other traces even after the user cleared the search. Capture the deep link once at mount and strip trace/span from the URL (replace navigation, keeping worker), so it only applies once.

…ability page titles The sidebar already switches between the Traces and Events views, so the duplicate dropdown in each page title added no value. Replace it with a plain title and remove the now-unused ObservabilityViewSwitcher component.

devin-ai-integration

Devin Review found 1 new potential issue.

View 4 additional findings in Devin Review.

[local-explorer-ui] improve observability logs, id search, and event-…

5ef51de

…to-trace navigation

nickpatt requested a review from workers-devprod as a code owner July 30, 2026 20:21

workers-devprod added this to workers-sdk Jul 30, 2026

github-project-automation Bot moved this to Untriaged in workers-sdk Jul 30, 2026

workers-devprod requested review from a team and penalosa and removed request for a team July 30, 2026 20:22

This comment was marked as resolved.

Sign in to view

[local-explorer-ui] wire trace:/span: search into the Traces view and…

dafaf4d

… label the View trace button

This comment was marked as resolved.

Sign in to view

NuroDev requested changes Jul 31, 2026

View reviewed changes

github-project-automation Bot moved this from Untriaged to In Review in workers-sdk Jul 31, 2026

petebacondarwin removed the request for review from penalosa July 31, 2026 10:15

This comment was marked as resolved.

Sign in to view

nickpatt added 2 commits July 31, 2026 12:19

This comment was marked as resolved.

Sign in to view

nickpatt added 2 commits July 31, 2026 12:36

nickpatt changed the title ~~[local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation~~ [local-explorer-ui] Improve observability views and hide internal dev-log noise Jul 31, 2026

nickpatt force-pushed the local-explorer-observability-ui-fixes branch from eb93628 to 73b824f Compare July 31, 2026 20:10

nickpatt changed the title ~~[local-explorer-ui] Improve observability views and hide internal dev-log noise~~ [local-explorer-ui] Improve observability logs, id search, and event-to-trace navigation Jul 31, 2026

devin-ai-integration Bot reviewed Jul 31, 2026

View reviewed changes

Uh oh!

Conversation

nickpatt commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

workers-devprod commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

pkg-pr-new Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

NuroDev Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

nickpatt Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

NuroDev Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

nickpatt Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

NuroDev Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

NuroDev Jul 31, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nickpatt commented Jul 30, 2026 •

edited

Loading

changeset-bot Bot commented Jul 30, 2026 •

edited

Loading

workers-devprod commented Jul 30, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 30, 2026 •

edited

Loading