[devtools] log more events + metadata (#24951)

* [devtools] log more events + metadata

* better typing

* consistent string type

Author: mondaychen

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() {};

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,

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,

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);

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) {

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()
                 : {}),