[DevTools] Log basic usage events (#22478)
Juan committed
Sep 30, 2021 at 17:19 UTC
2825a08dc0981b7e745b2742a84195f75e4d6f72
4 files changed
+47
-15
packages/react-devtools-extensions/src/main.js
+3
@@ -21,6 +21,7 @@ import {
21
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
22
import {__DEBUG__} from 'react-devtools-shared/src/constants';
23
import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
24
+import {logEvent} from 'react-devtools-shared/src/Logger';
25
26
const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
27
'React::DevTools::supportsProfiling';
@@ -449,6 +450,7 @@ function createPanelIfReactLoaded() {
450
ensureInitialHTMLIsCleared(componentsPortalContainer);
451
render('components');
452
panel.injectStyles(cloneStyleTags);
453
+ logEvent({event_name: 'selected-components-tab'});
454
}
455
});
456
extensionPanel.onHidden.addListener(panel => {
@@ -474,6 +476,7 @@ function createPanelIfReactLoaded() {
476
ensureInitialHTMLIsCleared(profilerPortalContainer);
477
render('profiler');
478
panel.injectStyles(cloneStyleTags);
479
+ logEvent({event_name: 'selected-profiler-tab'});
480
}
481
});
482
},
packages/react-devtools-shared/src/Logger.js
+16
-10
@@ -9,17 +9,23 @@
9
10
import {enableLogger} from 'react-devtools-feature-flags';
11
12
-type LoadHookNamesEvent = {|
13
- +event_name: 'loadHookNames',
14
- +event_status: 'success' | 'error' | 'timeout' | 'unknown',
15
- +duration_ms: number,
16
- +inspected_element_display_name: string | null,
17
- +inspected_element_number_of_hooks: number | null,
18
-|};
19
-
20
-// prettier-ignore
12
export type LogEvent =
22
- | LoadHookNamesEvent;
13
+ | {|
14
+ +event_name: 'loaded-dev-tools',
15
+ |}
16
+ | {|
17
+ +event_name: 'selected-components-tab',
18
+ |}
19
+ | {|
20
+ +event_name: 'selected-profiler-tab',
21
+ |}
22
+ | {|
23
+ +event_name: 'load-hook-names',
24
+ +event_status: 'success' | 'error' | 'timeout' | 'unknown',
25
+ +duration_ms: number,
26
+ +inspected_element_display_name: string | null,
27
+ +inspected_element_number_of_hooks: number | null,
28
+ |};
29
30
export type LogFunction = LogEvent => void;
31
packages/react-devtools-shared/src/devtools/views/DevTools.js
+27
-4
@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
13
import '@reach/tooltip/styles.css';
14
15
import * as React from 'react';
16
-import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
16
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
17
import Store from '../store';
18
import {
19
BridgeContext,
@@ -47,6 +47,7 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
47
import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
48
import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
49
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
50
+import {logEvent} from '../../Logger';
51
52
export type BrowserTheme = 'dark' | 'light';
53
export type TabID = 'components' | 'profiler';
@@ -152,6 +153,24 @@ export default function DevTools({
153
tab = overrideTab;
154
}
155
156
+ const selectTab = useCallback(
157
+ (tabId: TabID) => {
158
+ // We show the TabBar when DevTools is NOT rendered as a browser extension.
159
+ // In this case, we want to capture when people select tabs with the TabBar.
160
+ // When DevTools is rendered as an extension, we capture this event when
161
+ // the browser devtools panel changes.
162
+ if (showTabBar === true) {
163
+ if (tabId === 'components') {
164
+ logEvent({event_name: 'selected-components-tab'});
165
+ } else {
166
+ logEvent({event_name: 'selected-profiler-tab'});
167
+ }
168
+ }
169
+ setTab(tabId);
170
+ },
171
+ [setTab, showTabBar],
172
+ );
173
+
174
const options = useMemo(
175
() => ({
176
readOnly: readOnly || false,
@@ -204,12 +223,12 @@ export default function DevTools({
223
if (event.ctrlKey || event.metaKey) {
224
switch (event.key) {
225
case '1':
207
- setTab(tabs[0].id);
226
+ selectTab(tabs[0].id);
227
event.preventDefault();
228
event.stopPropagation();
229
break;
230
case '2':
212
- setTab(tabs[1].id);
231
+ selectTab(tabs[1].id);
232
event.preventDefault();
233
event.stopPropagation();
234
break;
@@ -232,6 +251,10 @@ export default function DevTools({
251
}
252
};
253
}, [bridge]);
254
+
255
+ useEffect(() => {
256
+ logEvent({event_name: 'loaded-dev-tools'});
257
+ }, []);
258
return (
259
<BridgeContext.Provider value={bridge}>
260
<StoreContext.Provider value={store}>
@@ -265,7 +288,7 @@ export default function DevTools({
288
<TabBar
289
currentTab={tab}
290
id="DevTools"
268
- selectTab={setTab}
291
+ selectTab={selectTab}
292
tabs={tabs}
293
type="navigation"
294
/>
packages/react-devtools-shared/src/hookNamesCache.js
+1
-1
@@ -116,7 +116,7 @@ export function loadHookNames(
116
const handleLoadComplete = (durationMs: number): void => {
117
// Log duration for parsing hook names
118
logEvent({
119
- event_name: 'loadHookNames',
119
+ event_name: 'load-hook-names',
120
event_status: status,
121
duration_ms: durationMs,
122
inspected_element_display_name: element.displayName,