feat(apm): editor latency gutter markers + popover - #2839
Conversation
|
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.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
|
React Doctor found 2 issues in 1 file · 2 warnings. 2 warnings
Reviewed by React Doctor for commit |
|
Reviews (1): Last reviewed commit: "feat(apm): editor latency gutter markers..." | Re-trigger Greptile |
214b340 to
df9dcd6
Compare
0cfe05e to
8ffd7e0
Compare
…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
|
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. |
|
Closing stale PRs ahead of Friday's monorepo migration. If this is a mistake, rebase and reopen for review. |

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)isApmEnrichmentEligibleto gate enrichment by file extension, delegating to the sharedapmLangForFileso the editor and agent paths share one supported-language list.buildApmLineMarkersto convertSerializedApmEnrichmentstats into per-line gutter marker objects, each carrying the underlyingSpanLineStatand a single-line tooltip summary (p95, p50, span count, error count).formatPercentDeltafrom@posthog/sharedthroughenrichmentPresentersso 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)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
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.apmPopoverStore(Zustand) to manage open/close state and the anchor rect independently of the existing enrichment popover store.Data fetching
useFileApmEnrichmenthook that callstrpc.apmEnrichment.enrichFile, gated behind theAPM_ENRICHMENT_FLAGfeature flag (auto-enabled in dev) and file-type eligibility. Returnsundefinedwhen the gutter extension should be skipped entirely, andnullwhile data is loading.apmEnrichmentintoCodeEditorPanelandCodeMirrorEditor. The APM popover is dismissed automatically when switching files.How did you test this?
isApmEnrichmentEligiblecovering Rust, Go, Python, TypeScript, Java source files, and non-source files (Markdown, JSON, CSS, PNG).buildApmLineMarkerscovering null enrichment, marker-per-line production, stat pass-through, and tooltip summary formatting.formatPercentDeltacovering null/undefined input, signed rounding, and sub-1% noise suppression.Automatic notifications