Add payload size to performance stats event

Summary: Payload size is useful to understand how much data is going down the wire for frame updates.

Reviewed By: LukeDefeo

Differential Revision: D45114582

fbshipit-source-id: d0c2a01deb84a67017db88bd396b4859e08d0037

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

@@ -26,6 +26,10 @@ function formatDiff(ms: number): string {
   return `${ms.toFixed(0)}ms`;
 }
 
+function formatSize(bytes: number): string {
+  return `${(bytes / 1000).toFixed()}`;
+}
+
 const columns: DataTableColumn<PerformanceStatsEvent>[] = [
   {
     key: 'txId',
@@ -91,4 +95,14 @@ const columns: DataTableColumn<PerformanceStatsEvent>[] = [
       return formatDiff(row.socketMS);
     },
   },
+  {
+    key: 'payloadSize',
+    title: 'Payload Size (KB)',
+    onRender: (row: PerformanceStatsEvent) => {
+      if (!row.payloadSize) {
+        return 'NaN';
+      }
+      return formatSize(row.payloadSize);
+    },
+  },
 ];

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

@@ -85,6 +85,7 @@ export type PerformanceStatsEvent = {
   deferredComputationMS: number;
   serializationMS: number;
   socketMS: number;
+  payloadSize?: number;
 };
 
 export type UpdateMetadataEvent = {