From 3ddbedd0520a9738d8c3c7ce0268542e02f9738a Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Tue, 19 Jul 2022 15:22:09 -0400
Subject: [PATCH] [devtools] log more events + metadata (#24951)

* [devtools] log more events + metadata

* better typing

* consistent string type
---
 packages/react-devtools-shared/src/Logger.js     |  6 +++---
 .../src/devtools/views/Components/Element.js     |  2 +-
 .../views/Components/InspectedElementView.js     |  2 +-
 .../src/devtools/views/Components/Tree.js        |  2 +-
 .../devtools/views/Profiler/ProfilerContext.js   | 16 ++++++++--------
 .../src/registerDevToolsEventLogger.js           |  3 ++-
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index f899a49f5d7fb..a23b5ee391a4c 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -42,14 +42,14 @@ export type LogEvent =
       +event_name: 'profiling-start',
     |};
 
-export type LogFunction = LogEvent => void | Promise<void>;
+export type LogFunction = (LogEvent, ?Object) => void | Promise<void>;
 
 let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
   enableLogger === true
-    ? function logEvent(event: LogEvent): void {
+    ? function logEvent(event: LogEvent, metadata: ?Object): void {
         logFunctions.forEach(log => {
-          log(event);
+          log(event, metadata);
         });
       }
     : function logEvent() {};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 05051eb63cb14..841b61dc13cb9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -77,7 +77,7 @@ export default function Element({data, index, style}: Props) {
 
   const handleClick = ({metaKey}) => {
     if (id !== null) {
-      logEvent({event_name: 'select-element'});
+      logEvent({event_name: 'select-element'}, {source: 'click-element'});
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: metaKey ? null : id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index e823bfcfc2632..b192c87e193de 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -303,7 +303,7 @@ function OwnerView({
   } = useHighlightNativeElement();
 
   const handleClick = useCallback(() => {
-    logEvent({event_name: 'select-element'});
+    logEvent({event_name: 'select-element'}, {source: 'owner-view'});
     dispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 84bda98eaa31a..1fc9400613ef8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -104,7 +104,7 @@ export default function Tree(props: Props) {
     function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
-        logEvent({event_name: 'select-element'});
+        logEvent({event_name: 'select-element'}, {source: 'inspector'});
       }
     }
     bridge.addListener('stopInspectingNative', handleStopInspectingNative);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index fd2cad6f31ba5..721ebfc5a7ae4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -192,14 +192,6 @@ function ProfilerContextController({children}: Props) {
     });
   }
 
-  const startProfiling = useCallback(() => {
-    logEvent({event_name: 'profiling-start'});
-    store.profilerStore.startProfiling();
-  }, [store]);
-  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
-    store,
-  ]);
-
   const [
     isCommitFilterEnabled,
     setIsCommitFilterEnabled,
@@ -217,6 +209,14 @@ function ProfilerContextController({children}: Props) {
     'flame-chart',
   );
 
+  const startProfiling = useCallback(() => {
+    logEvent({event_name: 'profiling-start'}, {current_tab: selectedTabID});
+    store.profilerStore.startProfiling();
+  }, [store, selectedTabID]);
+  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
+    store,
+  ]);
+
   if (isProfiling) {
     batchedUpdates(() => {
       if (selectedCommitIndex !== null) {
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 08c317fe93132..9c5c5455d0a74 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -25,7 +25,7 @@ export function registerDevToolsEventLogger(
     | LoggerContext
     | ?(() => Promise<LoggerContext>),
 ): void {
-  async function logEvent(event: LogEvent) {
+  async function logEvent(event: LogEvent, metadata: ?Object) {
     if (enableLogger) {
       if (loggingIFrame != null) {
         loggingIFrame.contentWindow.postMessage(
@@ -35,6 +35,7 @@ export function registerDevToolsEventLogger(
             context: {
               surface,
               version: process.env.DEVTOOLS_VERSION,
+              metadata: metadata != null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
                 ? await fetchAdditionalContext()
                 : {}),