feat(studio): track timeline performance (#2898)

packages/studio/src/telemetry/events.test.ts

@@ -15,6 +15,7 @@ const {
   trackStudioKeyframeLaneExpand,
   trackStudioSegmentEaseEdit,
   trackStudioFeedback,
+  trackStudioTimelinePerformance,
 } = await import("./events");
 
 describe("studio telemetry events", () => {
@@ -63,6 +64,26 @@ describe("studio telemetry events", () => {
     });
   });
 
+  it("trackStudioTimelinePerformance emits raw timeline measurements", () => {
+    const sample = {
+      total_clip_count: 3_000,
+      mounted_clip_count: 160,
+      total_row_count: 24,
+      timeline_dom_node_count: 957,
+      viewport_width: 1_200,
+      viewport_height: 360,
+      zoom_mode: "fit",
+      scroll_sample_count: 20,
+      scroll_frame_latency_p95_ms: 24.5,
+      scroll_frame_latency_max_ms: 31.2,
+      frame_interval_p95_ms: 42.3,
+    };
+
+    trackStudioTimelinePerformance(sample);
+
+    expect(trackEvent).toHaveBeenCalledWith("studio_timeline_performance", sample);
+  });
+
   it("trackStudioRazorSplit emits 'studio_razor_split' with mode and count", () => {
     trackStudioRazorSplit({ mode: "all", count: 3 });
     expect(trackEvent).toHaveBeenCalledWith("studio_razor_split", { mode: "all", count: 3 });

packages/studio/src/telemetry/events.ts

@@ -26,6 +26,24 @@ export function trackStudioRenderStart(props: {
   });
 }
 
+export type StudioTimelinePerformanceSample = {
+  total_clip_count: number;
+  mounted_clip_count: number;
+  total_row_count: number;
+  timeline_dom_node_count: number;
+  viewport_width: number;
+  viewport_height: number;
+  zoom_mode: string;
+  scroll_sample_count: number;
+  scroll_frame_latency_p95_ms: number;
+  scroll_frame_latency_max_ms: number;
+  frame_interval_p95_ms?: number;
+};
+
+export function trackStudioTimelinePerformance(props: StudioTimelinePerformanceSample): void {
+  trackEvent("studio_timeline_performance", props);
+}
+
 function getBrowserDoctorSummary(): string {
   try {
     const nav = navigator as Navigator & {