Track play-pause usage

Summary: ^

Reviewed By: aigoncharov

Differential Revision: D44169950

fbshipit-source-id: 7a10c6849382680723687a63fd987b9766076af9

desktop/plugins/public/ui-debugger/index.tsx

@@ -27,6 +27,7 @@ import {
 } from './types';
 import {Draft} from 'immer';
 import {QueryClient, setLogger} from 'react-query';
+import {tracker} from './tracker';
 
 type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
@@ -156,6 +157,7 @@ export function plugin(client: PluginClient<Events>) {
   });
 
   const setPlayPause = (isPaused: boolean) => {
+    tracker.track('play-pause', {paused: isPaused});
     uiState.isPaused.set(isPaused);
     if (!isPaused) {
       //When going back to play mode then set the atoms to the live state to rerender the latest

desktop/plugins/public/ui-debugger/tracker.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {getFlipperLib} from 'flipper-plugin';
+
+const UI_DEBUGGER_IDENTIFIER = 'ui-debugger';
+
+type TrackerEvents = {
+  'play-pause': {
+    paused: boolean;
+  };
+};
+
+export interface Tracker {
+  track<Event extends keyof TrackerEvents>(
+    event: Event,
+    payload: TrackerEvents[Event],
+  ): void;
+}
+
+class UIDebuggerTracker implements Tracker {
+  track<Event extends 'play-pause'>(
+    event: Event,
+    payload: TrackerEvents[Event],
+  ): void {
+    getFlipperLib().logger.track(
+      'usage',
+      event,
+      payload,
+      UI_DEBUGGER_IDENTIFIER,
+    );
+  }
+}
+
+export const tracker: Tracker = new UIDebuggerTracker();