feat(core): add emitPerformanceMetric bridge for runtime telemetry (#393)

## Summary

Extend the runtime analytics bridge with a numeric performance metric channel. Hosts subscribe via the existing postMessage transport (one bridge, two channels) and aggregate per-session p50 / p95 for scrub latency, sustained fps, dropped frames, decoder count, composition load time, and media sync drift before forwarding to their observability pipeline.

This is the foundation other perf tooling sits on — the player itself emits the events; player-side aggregation and flush land in a follow-up.

## Why

Step `X-1` of the player perf proposal. Today there is no way for an embedding host to learn that scrub latency spiked, that a composition took 3 s to load, or that the media-sync loop is running 200 ms behind real time. The only signals are anecdotal user reports.

A single shared bridge keeps the runtime → host surface area minimal: hosts that already wire up the analytics channel get perf for free, and hosts that don't aren't paying for it.

## What changed

- New `emitPerformanceMetric(name, value, tags?)` helper in `@hyperframes/core` that forwards a `{ type: "performance-metric", name, value, tags }` envelope through the existing analytics postMessage transport.
- Six initial metric names defined in the proposal:
  - `scrub_latency_ms` — wall-clock from `seek()` call to first paint at the new frame.
  - `playback_fps` — sustained rAF cadence during play.
  - `dropped_frames` — count of >25 ms gaps within a play window.
  - `decoder_count` — number of concurrently-decoding video elements.
  - `composition_load_ms` — navigation-start to player-ready.
  - `media_sync_drift_ms` — drift between expected and actual decoder time.
- Each emit also writes a `performance.mark()` with `{ value, tags }` on `detail`, so the same numbers surface in the DevTools Performance panel's User Timing track for local debugging without instrumenting the host.
- Zero PostHog (or any other analytics SDK) dependency in `core` — the host decides where to forward the events.

## Test plan

- [x] Unit tests cover the envelope shape, the `performance.mark` mirror, and the no-op path when no host has wired up the bridge.
- [x] Manual: verified marks appear in the User Timing track when scrubbing the studio preview.

## Stack

Step `X-1` of the player perf proposal. Foundation for the perf gate (P0-1a/b/c) — the perf scenarios in this stack instrument these same channels for CI measurement.
This commit is contained in:
Vance Ingalls
2026-04-22 15:08:14 -07:00
committed by GitHub
parent ef26798e98
commit f9863ab565
3 changed files with 179 additions and 12 deletions
+92 -1
View File
@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { initRuntimeAnalytics, emitAnalyticsEvent } from "./analytics";
import { initRuntimeAnalytics, emitAnalyticsEvent, emitPerformanceMetric } from "./analytics";
describe("runtime analytics", () => {
let postMessage: ReturnType<typeof vi.fn>;
@@ -58,3 +58,94 @@ describe("runtime analytics", () => {
expect(postMessage).toHaveBeenCalledTimes(events.length);
});
});
describe("runtime performance metrics", () => {
let postMessage: ReturnType<typeof vi.fn>;
beforeEach(() => {
postMessage = vi.fn();
initRuntimeAnalytics(postMessage);
// Clean up DevTools marks between tests to avoid cross-test interference.
if (typeof performance !== "undefined" && typeof performance.clearMarks === "function") {
performance.clearMarks();
}
});
it("emits a perf metric via postMessage", () => {
emitPerformanceMetric("player_scrub_latency", 12.5);
expect(postMessage).toHaveBeenCalledWith({
source: "hf-preview",
type: "perf",
name: "player_scrub_latency",
value: 12.5,
tags: {},
});
});
it("passes tags through", () => {
emitPerformanceMetric("player_decoder_count", 3, {
composition_id: "abc123",
mode: "isolated",
});
expect(postMessage).toHaveBeenCalledWith({
source: "hf-preview",
type: "perf",
name: "player_decoder_count",
value: 3,
tags: { composition_id: "abc123", mode: "isolated" },
});
});
it("normalizes missing tags to an empty object", () => {
emitPerformanceMetric("player_playback_fps", 60);
expect(postMessage).toHaveBeenCalledWith(expect.objectContaining({ tags: {} }));
});
it("supports zero and negative values", () => {
emitPerformanceMetric("player_dropped_frames", 0);
emitPerformanceMetric("player_media_sync_drift", -8.3);
expect(postMessage).toHaveBeenNthCalledWith(1, expect.objectContaining({ value: 0 }));
expect(postMessage).toHaveBeenNthCalledWith(2, expect.objectContaining({ value: -8.3 }));
});
it("does not throw when postMessage is not set", () => {
initRuntimeAnalytics(null as unknown as (payload: unknown) => void);
expect(() => emitPerformanceMetric("player_load_time", 250)).not.toThrow();
});
it("does not throw when postMessage throws", () => {
postMessage.mockImplementation(() => {
throw new Error("channel closed");
});
expect(() => emitPerformanceMetric("player_scrub_latency", 12)).not.toThrow();
});
it("does not throw when performance.mark throws", () => {
const original = performance.mark;
// Vitest provides a real performance API; replace mark with a thrower for this test.
performance.mark = vi.fn(() => {
throw new Error("mark failed");
}) as typeof performance.mark;
try {
expect(() => emitPerformanceMetric("player_load_time", 100)).not.toThrow();
// Even though performance.mark threw, the bridge should still receive the metric.
expect(postMessage).toHaveBeenCalledWith(
expect.objectContaining({ type: "perf", name: "player_load_time", value: 100 }),
);
} finally {
performance.mark = original;
}
});
it("writes a User Timing mark with detail for DevTools visibility", () => {
if (typeof performance.getEntriesByName !== "function") {
// Older test environments — skip the DevTools assertion but don't fail.
return;
}
emitPerformanceMetric("player_composition_switch", 42, { from: "a", to: "b" });
const entries = performance.getEntriesByName("player_composition_switch", "mark");
expect(entries.length).toBeGreaterThan(0);
const mark = entries[entries.length - 1] as PerformanceMark;
expect(mark.detail).toEqual({ value: 42, tags: { from: "a", to: "b" } });
});
});