Files
hyperframes/packages/cli/src/telemetry/renderObservability.ts
T
Vance IngallsandClaude Opus 5 d74afc7b7d feat(engine): measure live DOM size on every render, not just probed ones
The short-comp routing gate can only read a live element count when a
probe session exists, and the first v0.7.83 data shows that is far rarer
than estimated: 17% of renders (86/503), not the ">=28%" the video-presence
proxy suggested. The other 83% fall back to a static source scan, which
is exactly blind to the shape that motivated the live count — small
markup, thousands of script-created nodes.

That leaves the fleet element-count distribution unknowable for most
renders, and the observed distribution is already surprising: p99 ~900,
max 1,420 against a 2,500 ceiling calibrated on 7k/20k/40k synthetic
nodes. Either the ceiling is close to irrelevant, or the large-DOM tail
is hiding in the 83% we cannot see. Both readings change what PR B
should do, and neither is decidable from probed renders alone (they are
a biased sample — they got a probe *because* they carry media or
unresolved compositions).

So measure it where every render already goes: capture-session init.
`collectSessionInitTelemetry` gains a querySelectorAll("*") count beside
the tween count it already collects, riding the same channel to
`observability_init_element_count`. This is observational only — capture
has begun, far too late to route on — and it deliberately does not feed
the gate. It answers the distribution question the gate cannot.

Coverage for this channel is proven rather than assumed: the tween-count
fix that shipped in v0.7.83 took the clamped-parallel bucket from 0/272
renders to 217/217, and 23.1% -> 100% overall.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-29 22:55:12 -07:00

83 lines
4.2 KiB
TypeScript

import type { RenderJob, RenderPerfSummary } from "@hyperframes/producer";
import type { RenderObservabilityTelemetryPayload } from "./events.js";
type RenderObservabilitySummary = NonNullable<RenderPerfSummary["observability"]>;
export function renderObservabilityTelemetryPayload(
observability: RenderObservabilitySummary | undefined,
): RenderObservabilityTelemetryPayload {
if (!observability) return {};
const diagnostics = observability.browserDiagnostics;
const capture = observability.capture;
const extraction = observability.extraction;
const init = observability.init;
return {
observabilityRenderJobId: observability.renderJobId,
observabilityCompositionHash: observability.compositionHash,
observabilityEventCount: observability.eventCount,
observabilityLastPhase: observability.lastEvent?.phase,
observabilityLastStatus: observability.lastEvent?.status,
observabilityFailedPhase: observability.failedPhase,
browserDiagnosticCount: diagnostics.total,
browserDiagnosticErrors: diagnostics.errors,
browserDiagnosticPageErrors: diagnostics.pageErrors,
browserDiagnosticRequestFailed: diagnostics.requestFailed,
browserDiagnosticHttpErrors: diagnostics.httpErrors,
browserDiagnosticNavigationStarts: diagnostics.navigationStarts,
browserDiagnosticNavigationFailures: diagnostics.navigationFailures,
browserDiagnosticConsoleErrors: diagnostics.consoleErrors,
browserDiagnosticConsoleWarnings: diagnostics.consoleWarnings,
captureMode: capture.captureMode,
captureForceScreenshot: capture.forceScreenshot,
captureWorkerCount: capture.workerCount,
captureUseStreamingEncode: capture.useStreamingEncode,
captureUseLayeredComposite: capture.useLayeredComposite,
captureUsePageSideCompositing: capture.usePageSideCompositing,
captureHasHdrContent: capture.hasHdrContent,
captureBrowserGpuMode: capture.browserGpuMode,
captureProtocolTimeoutMs: capture.protocolTimeoutMs,
capturePageNavigationTimeoutMs: capture.pageNavigationTimeoutMs,
capturePlayerReadyTimeoutMs: capture.playerReadyTimeoutMs,
captureTransientRetries: capture.transientRetries,
captureMemoryExhaustionDetected: capture.memoryExhaustionDetected,
captureDeWorkerInversion: capture.deWorkerInversion,
captureDePreInversionWorkers: capture.dePreInversionWorkers,
captureCompositionElementCount: capture.compositionElementCount,
captureCompositionElementCountSource: capture.compositionElementCountSource,
captureDeShortBand: capture.deShortBand,
captureDeParallelRouter: capture.deParallelRouter,
captureDeGpuRenderer: capture.deGpuRenderer,
captureDePreRouterWorkers: capture.dePreRouterWorkers,
captureDeSelfVerifyFallback: capture.deSelfVerifyFallback,
captureDeFallbackReason: capture.deFallbackReason,
captureDeFallbackFailedDb: capture.deFallbackFailedDb,
captureDeFallbackFrameIndex: capture.deFallbackFrameIndex,
captureDeFallbackThresholdDb: capture.deFallbackThresholdDb,
captureParallelStream: capture.captureParallelStream,
observabilityExtractVideoCount: extraction?.videoCount,
observabilityExtractedVideoCount: extraction?.extractedVideoCount,
observabilityExtractTotalFrames: extraction?.totalFramesExtracted,
observabilityExtractMaxFramesPerVideo: extraction?.maxFramesPerVideo,
observabilityExtractAvgFramesPerVideo: extraction?.avgFramesPerExtractedVideo,
observabilityExtractVfrProbeMs: extraction?.vfrProbeMs,
observabilityExtractVfrPreflightMs: extraction?.vfrPreflightMs,
observabilityExtractVfrPreflightCount: extraction?.vfrPreflightCount,
observabilityExtractCacheHits: extraction?.cacheHits,
observabilityExtractCacheMisses: extraction?.cacheMisses,
observabilityInitDurationMs: init?.initDurationMs,
observabilityInitTweenCount: init?.tweenCount,
observabilityInitElementCount: init?.elementCount,
};
}
export function renderJobObservabilityTelemetryPayload(
job: RenderJob | undefined,
): RenderObservabilityTelemetryPayload {
return {
...renderObservabilityTelemetryPayload(
job?.errorDetails?.observability ?? job?.perfSummary?.observability,
),
subTimelineWait: job?.errorDetails?.subTimelineWait ?? job?.perfSummary?.subTimelineWait,
};
}