Wire up usage tracking to Flipper core

Summary: Connect usage tracking to the Flipper core, individual elements will be wrapped in a next diff

Reviewed By: passy

Differential Revision: D25196284

fbshipit-source-id: 103e1d21d2f23fbbc21975fa85082811f6f53348

desktop/app/src/PluginContainer.tsx

@@ -46,7 +46,7 @@ import {Message} from './reducers/pluginMessageQueue';
 import {Idler} from './utils/Idler';
 import {processMessageQueue} from './utils/messageQueue';
 import {ToggleButton, SmallText, Layout} from './ui';
-import {_SandyPluginRenderer} from 'flipper-plugin';
+import {TrackingScope, _SandyPluginRenderer} from 'flipper-plugin';
 import {isDevicePluginDefinition} from './utils/pluginUtils';
 import ArchivedDevice from './devices/ArchivedDevice';
 import {ContentContainer} from './sandy-chrome/ContentContainer';
@@ -431,7 +431,11 @@ class PluginContainer extends PureComponent<Props, State> {
         isArchivedDevice,
         settingsState,
       };
-      pluginElement = React.createElement(activePlugin, props);
+      pluginElement = (
+        <TrackingScope scope={'plugin:' + activePlugin.id}>
+          {React.createElement(activePlugin, props)}
+        </TrackingScope>
+      );
     }
     return isSandy ? (
       <Layout.Right>

desktop/app/src/init.tsx

@@ -34,7 +34,12 @@ import {PopoverProvider} from './ui/components/PopoverProvider';
 import {initializeFlipperLibImplementation} from './utils/flipperLibImplementation';
 import {enableConsoleHook} from './chrome/ConsoleLogs';
 import {sideEffect} from './utils/sideEffect';
-import {_NuxManagerContext, _createNuxManager} from 'flipper-plugin';
+import {
+  _NuxManagerContext,
+  _createNuxManager,
+  _setGlobalInteractionReporter,
+} from 'flipper-plugin';
+import isProduction from './utils/isProduction';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
@@ -92,6 +97,14 @@ function setProcessState(store: Store) {
 
 function init() {
   initializeFlipperLibImplementation(store, logger);
+  _setGlobalInteractionReporter((r) => {
+    logger.track('usage', 'interaction', r);
+    if (!isProduction()) {
+      const msg = `[interaction] ${r.scope}:${r.action} in ${r.duration}ms`;
+      if (r.success) console.log(msg);
+      else console.error(msg, r.error);
+    }
+  });
   ReactDOM.render(<AppFrame />, document.getElementById('root'));
   initLauncherHooks(config(), store);
   registerRecordingHooks(store);

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -8,6 +8,7 @@
  */
 
 import React, {useEffect, useState, useCallback} from 'react';
+import {TrackingScope} from 'flipper-plugin';
 import {styled} from '../ui';
 import {Layout, Sidebar} from '../ui';
 import {theme} from 'flipper-plugin';
@@ -114,17 +115,29 @@ export function SandyApp({logger}: {logger: Logger}) {
               setToplevelSelection={setToplevelSelection}
             />
             <Sidebar width={250} minWidth={220} maxWidth={800} gutter>
-              {leftMenuContent && leftMenuContent}
+              {leftMenuContent && (
+                <TrackingScope scope={toplevelSelection!}>
+                  {leftMenuContent}
+                </TrackingScope>
+              )}
             </Sidebar>
           </Layout.Horizontal>
           <MainContainer>
             {outOfContentsContainer}
             {staticView ? (
+              <TrackingScope
+                scope={
+                  staticView.constructor?.name ??
+                  staticView.displayName ??
+                  staticView.name ??
+                  'unknown static view'
+                }>
                 <ContentContainer>
                   {React.createElement(staticView, {
                     logger: logger,
                   })}
                 </ContentContainer>
+              </TrackingScope>
             ) : (
               <PluginContainer logger={logger} isSandy />
             )}