[DevTools] add simple usage events for internal logging (#24888)
* [DevTools] add simple events for internal logging * fix lint * fix lint * better event name * fix flow * better way to fix flow * combine 'select-element' * use same event name for selecting element by inspecting
Mengdi Chen committed
Jul 18, 2022 at 15:52 UTC
992911981bc35b6fc3e7cacb4294d6d782527603
6 files changed
+28
-12
packages/react-devtools-shared/src/Logger.js
+9
@@ -31,6 +31,15 @@ export type LogEvent =
31
+duration_ms: number,
32
+inspected_element_display_name: string | null,
33
+inspected_element_number_of_hooks: number | null,
34
+ |}
35
+ | {|
36
+ +event_name: 'select-element',
37
+ |}
38
+ | {|
39
+ +event_name: 'inspect-element-button-clicked',
40
+ |}
41
+ | {|
42
+ +event_name: 'profiling-start',
43
|};
44
45
export type LogFunction = LogEvent => void | Promise<void>;
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+2
@@ -17,6 +17,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
17
import {SettingsContext} from '../Settings/SettingsContext';
18
import {StoreContext} from '../context';
19
import {useSubscription} from '../hooks';
20
+import {logEvent} from 'react-devtools-shared/src/Logger';
21
22
import type {ItemData} from './Tree';
23
import type {Element as ElementType} from './types';
@@ -76,6 +77,7 @@ export default function Element({data, index, style}: Props) {
77
78
const handleClick = ({metaKey}) => {
79
if (id !== null) {
80
+ logEvent({event_name: 'select-element'});
81
dispatch({
82
type: 'SELECT_ELEMENT_BY_ID',
83
payload: metaKey ? null : id,
packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+2
@@ -12,6 +12,7 @@ import {useCallback, useContext, useEffect, useState} from 'react';
12
import {BridgeContext} from '../context';
13
import Toggle from '../Toggle';
14
import ButtonIcon from '../ButtonIcon';
15
+import {logEvent} from 'react-devtools-shared/src/Logger';
16
17
export default function InspectHostNodesToggle() {
18
const [isInspecting, setIsInspecting] = useState(false);
@@ -22,6 +23,7 @@ export default function InspectHostNodesToggle() {
23
setIsInspecting(isChecked);
24
25
if (isChecked) {
26
+ logEvent({event_name: 'inspect-element-button-clicked'});
27
bridge.send('startInspectingNative');
28
} else {
29
bridge.send('stopInspectingNative', false);
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+8
-8
@@ -33,6 +33,7 @@ import {
33
storeAsGlobal as storeAsGlobalAPI,
34
} from 'react-devtools-shared/src/backendAPI';
35
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
36
+import {logEvent} from 'react-devtools-shared/src/Logger';
37
38
import styles from './InspectedElementView.css';
39
@@ -301,14 +302,13 @@ function OwnerView({
302
clearHighlightNativeElement,
303
} = useHighlightNativeElement();
304
304
- const handleClick = useCallback(
305
- () =>
306
- dispatch({
307
- type: 'SELECT_ELEMENT_BY_ID',
308
- payload: id,
309
- }),
310
- [dispatch, id],
311
- );
305
+ const handleClick = useCallback(() => {
306
+ logEvent({event_name: 'select-element'});
307
+ dispatch({
308
+ type: 'SELECT_ELEMENT_BY_ID',
309
+ payload: id,
310
+ });
311
+ }, [dispatch, id]);
312
313
const onMouseEnter = () => highlightNativeElement(id);
314
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+2
@@ -36,6 +36,7 @@ import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtool
36
import styles from './Tree.css';
37
import ButtonIcon from '../ButtonIcon';
38
import Button from '../Button';
39
+import {logEvent} from 'react-devtools-shared/src/Logger';
40
41
// Never indent more than this number of pixels (even if we have the room).
42
const DEFAULT_INDENTATION_SIZE = 12;
@@ -103,6 +104,7 @@ export default function Tree(props: Props) {
104
function handleStopInspectingNative(didSelectNode) {
105
if (didSelectNode && focusTargetRef.current !== null) {
106
focusTargetRef.current.focus();
107
+ logEvent({event_name: 'select-element'});
108
}
109
}
110
bridge.addListener('stopInspectingNative', handleStopInspectingNative);
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+5
-4
@@ -16,6 +16,7 @@ import {
16
TreeStateContext,
17
} from '../Components/TreeContext';
18
import {StoreContext} from '../context';
19
+import {logEvent} from 'react-devtools-shared/src/Logger';
20
21
import type {ProfilingDataFrontend} from './types';
22
@@ -191,10 +192,10 @@ function ProfilerContextController({children}: Props) {
192
});
193
}
194
194
- const startProfiling = useCallback(
195
- () => store.profilerStore.startProfiling(),
196
- [store],
197
- );
195
+ const startProfiling = useCallback(() => {
196
+ logEvent({event_name: 'profiling-start'});
197
+ store.profilerStore.startProfiling();
198
+ }, [store]);
199
const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
200
store,
201
]);