ADd tracking for framework event debugging

Summary: ^

Reviewed By: lblasa

Differential Revision: D48645332

fbshipit-source-id: faf558c592b00a69586970edea407d8997a54699

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

@@ -56,14 +56,14 @@ type FrameworkEventAttribution = Stacktrace | Reason | UpstreamEvent;
 
 export type FrameworkEvent = {
   id: number;
-  treeId?: Id;
+  treeId?: Id; //todo should be mandatory once ios implements this
   nodeId: Id;
   type: FrameworkEventType;
   timestamp: number;
   payload?: JsonObject;
   duration?: number;
   attribution?: FrameworkEventAttribution;
-  thread?: 'main' | string;
+  thread?: 'main' | string; //todo should be mandatory once ios implements this
 };
 
 export type InitEvent = {

desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx

@@ -27,6 +27,7 @@ import {eventTypeToName} from './sidebar/inspector/FrameworkEventsInspector';
 import {startCase} from 'lodash';
 import {Visualization2D} from './visualizer/Visualization2D';
 import {getNode} from '../utils/map';
+import {tracker} from '../utils/tracker';
 
 export function FrameworkEventsTable({
   nodeId,
@@ -45,6 +46,7 @@ export function FrameworkEventsTable({
   );
 
   useEffect(() => {
+    tracker.track('framework-event-table-opened', {});
     instance.uiActions.onSelectNode(undefined, 'tree');
     if (nodeId != null) {
       managerRef.current?.resetFilters();
@@ -77,6 +79,12 @@ export function FrameworkEventsTable({
 
   const onSelectRow = useCallback(
     (event: FrameworkEvent | undefined): void => {
+      if (event != null) {
+        tracker.track('framework-event-table-row-selected', {
+          eventType: event.type,
+        });
+      }
+
       instance.uiActions.onFocusNode(event?.nodeId);
     },
     [instance.uiActions],

desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx

@@ -37,6 +37,7 @@ import {FilterOutlined, TableOutlined} from '@ant-design/icons';
 import {ViewMode} from '../../../DesktopTypes';
 import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem';
 import {formatDuration, formatTimestampMillis} from '../../../utils/timeUtils';
+import {tracker} from '../../../utils/tracker';
 
 type Props = {
   node: ClientNode;
@@ -97,6 +98,14 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
           {(showEventTypesSection || showThreadsSection) && (
             <Dropdown
               overlayStyle={{minWidth: 200}}
+              onVisibleChange={(visible) => {
+                if (visible) {
+                  tracker.track(
+                    'framework-event-timeline-filters-adjusted',
+                    {},
+                  );
+                }
+              }}
               overlay={
                 <Layout.Container
                   gap="small"
@@ -179,6 +188,9 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
         onClick={(current) => {
           const idx = parseInt(current, 10);
           const event = filteredEvents[idx];
+          tracker.track('framework-event-timeline-event-selected', {
+            eventType: event.type,
+          });
           showExtra?.(
             'Event details',
             <EventDetails

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

@@ -30,6 +30,14 @@ type TrackerEvents = {
     eventType: FrameworkEventType;
     monitored: boolean;
   };
+  'framework-event-table-row-selected': {
+    eventType: FrameworkEventType;
+  };
+  'framework-event-table-opened': {};
+  'framework-event-timeline-filters-adjusted': {};
+  'framework-event-timeline-event-selected': {
+    eventType: FrameworkEventType;
+  };
   'search-term-updated': {
     searchTerm: string;
   };