[devtools] log more events + metadata (#24951)
* [devtools] log more events + metadata * better typing * consistent string type
Mengdi Chen committed
Jul 19, 2022 at 15:22 UTC
3ddbedd0520a9738d8c3c7ce0268542e02f9738a
6 files changed
+16
-15
packages/react-devtools-shared/src/Logger.js
+3
-3
@@ -42,14 +42,14 @@ export type LogEvent =
42
+event_name: 'profiling-start',
43
|};
44
45
-export type LogFunction = LogEvent => void | Promise<void>;
45
+export type LogFunction = (LogEvent, ?Object) => void | Promise<void>;
46
47
let logFunctions: Array<LogFunction> = [];
48
export const logEvent: LogFunction =
49
enableLogger === true
50
- ? function logEvent(event: LogEvent): void {
50
+ ? function logEvent(event: LogEvent, metadata: ?Object): void {
51
logFunctions.forEach(log => {
52
- log(event);
52
+ log(event, metadata);
53
});
54
}
55
: function logEvent() {};
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+1
-1
@@ -77,7 +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'});
80
+ logEvent({event_name: 'select-element'}, {source: 'click-element'});
81
dispatch({
82
type: 'SELECT_ELEMENT_BY_ID',
83
payload: metaKey ? null : id,
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+1
-1
@@ -303,7 +303,7 @@ function OwnerView({
303
} = useHighlightNativeElement();
304
305
const handleClick = useCallback(() => {
306
- logEvent({event_name: 'select-element'});
306
+ logEvent({event_name: 'select-element'}, {source: 'owner-view'});
307
dispatch({
308
type: 'SELECT_ELEMENT_BY_ID',
309
payload: id,
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+1
-1
@@ -104,7 +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'});
107
+ logEvent({event_name: 'select-element'}, {source: 'inspector'});
108
}
109
}
110
bridge.addListener('stopInspectingNative', handleStopInspectingNative);
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+8
-8
@@ -192,14 +192,6 @@ function ProfilerContextController({children}: Props) {
192
});
193
}
194
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
- ]);
202
-
195
const [
196
isCommitFilterEnabled,
197
setIsCommitFilterEnabled,
@@ -217,6 +209,14 @@ function ProfilerContextController({children}: Props) {
209
'flame-chart',
210
);
211
212
+ const startProfiling = useCallback(() => {
213
+ logEvent({event_name: 'profiling-start'}, {current_tab: selectedTabID});
214
+ store.profilerStore.startProfiling();
215
+ }, [store, selectedTabID]);
216
+ const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
217
+ store,
218
+ ]);
219
+
220
if (isProfiling) {
221
batchedUpdates(() => {
222
if (selectedCommitIndex !== null) {
packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+2
-1
@@ -25,7 +25,7 @@ export function registerDevToolsEventLogger(
25
| LoggerContext
26
| ?(() => Promise<LoggerContext>),
27
): void {
28
- async function logEvent(event: LogEvent) {
28
+ async function logEvent(event: LogEvent, metadata: ?Object) {
29
if (enableLogger) {
30
if (loggingIFrame != null) {
31
loggingIFrame.contentWindow.postMessage(
@@ -35,6 +35,7 @@ export function registerDevToolsEventLogger(
35
context: {
36
surface,
37
version: process.env.DEVTOOLS_VERSION,
38
+ metadata: metadata != null ? JSON.stringify(metadata) : '',
39
...(fetchAdditionalContext != null
40
? await fetchAdditionalContext()
41
: {}),