Skip to content
This repository was archived by the owner on Aug 6, 2026. It is now read-only.

feat(apm): editor latency gutter markers + popover - #2839

Closed
jonmcwest wants to merge 2 commits into
06-22-feat_apm_editor_apm_enrichment_service_trpc_routefrom
06-22-feat_apm_editor_latency_gutter_markers_popover
Closed

feat(apm): editor latency gutter markers + popover#2839
jonmcwest wants to merge 2 commits into
06-22-feat_apm_editor_apm_enrichment_service_trpc_routefrom
06-22-feat_apm_editor_latency_gutter_markers_popover

Conversation

@jonmcwest

@jonmcwest jonmcwest commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

Problem

When reviewing code in the editor, engineers have no visibility into how that code performs in production. Switching to PostHog tracing to correlate spans with source lines requires manual cross-referencing. This adds inline APM (Application Performance Monitoring) enrichment to the code editor, surfacing real production latency and span data directly in the gutter alongside the relevant source lines.

Changes

APM eligibility and marker building (@posthog/core)

  • Added isApmEnrichmentEligible to gate enrichment by file extension, delegating to the shared apmLangForFile so the editor and agent paths share one supported-language list.
  • Added buildApmLineMarkers to convert SerializedApmEnrichment stats into per-line gutter marker objects, each carrying the underlying SpanLineStat and a single-line tooltip summary (p95, p50, span count, error count).
  • Re-exported formatPercentDelta from @posthog/shared through enrichmentPresenters so the editor popover's existing import path stays stable while the agent path can also use it without importing @posthog/core.

CodeMirror extension (@posthog/ui)

  • Added postHogApmEnrichmentExtension, a CodeMirror state field + gutter that renders a fixed-colour purple presence marker on every instrumented line. Clicking a marker opens the APM popover. Markers re-anchor on doc changes to stay correct if the view becomes editable.

APM popover

  • Added ApmEnrichmentPopover, a fixed-position portal card showing p50/p95/p99 latency, span count, error rate, and percentage deltas vs. the prior window. Deltas are colour-coded (red when latency increases, green when it decreases). A "View in PostHog →" link deep-links to the tracing explorer. The popover closes on outside click or Escape.
  • Added apmPopoverStore (Zustand) to manage open/close state and the anchor rect independently of the existing enrichment popover store.

Data fetching

  • Added useFileApmEnrichment hook that calls trpc.apmEnrichment.enrichFile, gated behind the APM_ENRICHMENT_FLAG feature flag (auto-enabled in dev) and file-type eligibility. Returns undefined when the gutter extension should be skipped entirely, and null while data is loading.
  • Wired apmEnrichment into CodeEditorPanel and CodeMirrorEditor. The APM popover is dismissed automatically when switching files.

How did you test this?

  • Added unit tests for isApmEnrichmentEligible covering Rust, Go, Python, TypeScript, Java source files, and non-source files (Markdown, JSON, CSS, PNG).
  • Added unit tests for buildApmLineMarkers covering null enrichment, marker-per-line production, stat pass-through, and tooltip summary formatting.
  • Added unit tests for formatPercentDelta covering null/undefined input, signed rounding, and sub-1% noise suppression.

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Copy link
Copy Markdown
Contributor Author

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

@github-actions

github-actions Bot commented Jun 22, 2026

Copy link
Copy Markdown

React Doctor found 2 issues in 1 file · 2 warnings.

2 warnings

src/features/code-editor/components/CodeEditorPanel.tsx

Reviewed by React Doctor for commit d3667af.

@jonmcwest
jonmcwest marked this pull request as ready for review June 22, 2026 14:41
@greptile-apps

greptile-apps Bot commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

Reviews (1): Last reviewed commit: "feat(apm): editor latency gutter markers..." | Re-trigger Greptile

Comment thread packages/core/src/code-editor/enrichmentPresenters.test.ts Outdated
Comment thread packages/ui/src/features/code-editor/hooks/useFileApmEnrichment.ts Outdated
@jonmcwest
jonmcwest force-pushed the 06-22-feat_apm_editor_apm_enrichment_service_trpc_route branch from 214b340 to df9dcd6 Compare June 22, 2026 15:29
@jonmcwest
jonmcwest force-pushed the 06-22-feat_apm_editor_latency_gutter_markers_popover branch from 0cfe05e to 8ffd7e0 Compare June 22, 2026 15:29
…time

- Convert formatPercentDelta tests to it.each parameterised rows per team preference
- Bound APM enrichment query staleTime to 5 minutes so latency numbers refresh after deploys instead of caching for the whole session

Generated-By: PostHog Code
Task-Id: de3222cb-d87d-4d5e-a110-72b304dbd505
@jonmcwest
jonmcwest requested a review from charlesvien July 7, 2026 07:55
@github-actions

Copy link
Copy Markdown

This PR has had no activity for 7 days and has been marked stale. We are moving to the monorepo and tightening PR staleness in preparation, so it will be closed in 7 days if no further activity occurs.

@github-actions github-actions Bot added the stale No recent changes to PR label Jul 28, 2026
@charlesvien

Copy link
Copy Markdown
Member

Closing stale PRs ahead of Friday's monorepo migration. If this is a mistake, rebase and reopen for review.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

stale No recent changes to PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants