diff --git a/desktop/app/src/PluginContainer.tsx b/desktop/app/src/PluginContainer.tsx index 18a3e2d94..8d5baf8de 100644 --- a/desktop/app/src/PluginContainer.tsx +++ b/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 { isArchivedDevice, settingsState, }; - pluginElement = React.createElement(activePlugin, props); + pluginElement = ( + + {React.createElement(activePlugin, props)} + + ); } return isSandy ? ( diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx index b3caf5660..e64f112e6 100644 --- a/desktop/app/src/init.tsx +++ b/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(, document.getElementById('root')); initLauncherHooks(config(), store); registerRecordingHooks(store); diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx index 397d6775f..e316e0de9 100644 --- a/desktop/app/src/sandy-chrome/SandyApp.tsx +++ b/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} /> - {leftMenuContent && leftMenuContent} + {leftMenuContent && ( + + {leftMenuContent} + + )} {outOfContentsContainer} {staticView ? ( - - {React.createElement(staticView, { - logger: logger, - })} - + + + {React.createElement(staticView, { + logger: logger, + })} + + ) : ( )}