Skip to content

Commit 50263d3

Browse files
author
Juan
authored
[DevTools] Add initial APIs for logging instrumentation events under feature flag (#22276)
1 parent 263cfa6 commit 50263d3

13 files changed

Lines changed: 234 additions & 110 deletions

‎packages/react-devtools-extensions/src/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
localStorageRemoveItem,
1919
localStorageSetItem,
2020
} from 'react-devtools-shared/src/storage';
21+
import {registerEventLogger} from 'react-devtools-shared/src/Logger';
2122
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
2223
import {__DEBUG__} from 'react-devtools-shared/src/constants';
2324

@@ -87,6 +88,10 @@ function createPanelIfReactLoaded() {
8788

8889
const tabId = chrome.devtools.inspectedWindow.tabId;
8990

91+
registerEventLogger((event: LogEvent) => {
92+
// TODO: hook up event logging
93+
});
94+
9095
function initBridgeAndStore() {
9196
const port = chrome.runtime.connect({
9297
name: '' + tabId,

‎packages/react-devtools-shared/src/Logger.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict-local
8+
*/
9+
10+
import {enableLogger} from 'react-devtools-feature-flags';
11+
12+
type LoadHookNamesEvent = {|
13+
+name: 'loadHookNames',
14+
+displayName: string | null,
15+
+numberOfHooks: number | null,
16+
+durationMs: number,
17+
+resolution: 'success' | 'error' | 'timeout' | 'unknown',
18+
|};
19+
20+
// prettier-ignore
21+
export type LogEvent =
22+
| LoadHookNamesEvent;
23+
24+
export type LogFunction = LogEvent => void;
25+
26+
let loggers: Array<LogFunction> = [];
27+
export const logEvent: LogFunction =
28+
enableLogger === true
29+
? function logEvent(event: LogEvent): void {
30+
loggers.forEach(log => {
31+
log(event);
32+
});
33+
}
34+
: function logEvent() {};
35+
36+
export const registerEventLogger =
37+
enableLogger === true
38+
? function registerEventLogger(eventLogger: LogFunction): () => void {
39+
if (enableLogger) {
40+
loggers.push(eventLogger);
41+
return function unregisterEventLogger() {
42+
loggers = loggers.filter(logger => logger !== eventLogger);
43+
};
44+
}
45+
return () => {};
46+
}
47+
: function registerEventLogger() {};

packages/react-devtools-shared/src/PerformanceMarks.js renamed to packages/react-devtools-shared/src/PerformanceLoggingUtils.js

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ const supportsUserTiming =
1414
typeof performance.mark === 'function' &&
1515
typeof performance.clearMarks === 'function';
1616

17+
const supportsPerformanceNow =
18+
typeof performance !== 'undefined' && typeof performance.now === 'function';
19+
1720
function mark(markName: string): void {
1821
if (supportsUserTiming) {
1922
performance.mark(markName + '-start');
@@ -27,42 +30,78 @@ function measure(markName: string): void {
2730
}
2831
}
2932

30-
export async function withAsyncPerformanceMark<TReturn>(
33+
function now(): number {
34+
if (supportsPerformanceNow) {
35+
return performance.now();
36+
}
37+
return Date.now();
38+
}
39+
40+
export async function withAsyncPerfMeasurements<TReturn>(
3141
markName: string,
3242
callback: () => Promise<TReturn>,
43+
onComplete?: number => void,
3344
): Promise<TReturn> {
45+
const start = now();
3446
if (__PERFORMANCE_PROFILE__) {
3547
mark(markName);
36-
const result = await callback();
48+
}
49+
const result = await callback();
50+
51+
if (__PERFORMANCE_PROFILE__) {
3752
measure(markName);
38-
return result;
3953
}
40-
return callback();
54+
55+
if (onComplete != null) {
56+
const duration = now() - start;
57+
onComplete(duration);
58+
}
59+
60+
return result;
4161
}
4262

43-
export function withSyncPerformanceMark<TReturn>(
63+
export function withSyncPerfMeasurements<TReturn>(
4464
markName: string,
4565
callback: () => TReturn,
66+
onComplete?: number => void,
4667
): TReturn {
68+
const start = now();
4769
if (__PERFORMANCE_PROFILE__) {
4870
mark(markName);
49-
const result = callback();
71+
}
72+
const result = callback();
73+
74+
if (__PERFORMANCE_PROFILE__) {
5075
measure(markName);
51-
return result;
5276
}
53-
return callback();
77+
78+
if (onComplete != null) {
79+
const duration = now() - start;
80+
onComplete(duration);
81+
}
82+
83+
return result;
5484
}
5585

56-
export function withCallbackPerformanceMark<TReturn>(
86+
export function withCallbackPerfMeasurements<TReturn>(
5787
markName: string,
5888
callback: (done: () => void) => TReturn,
89+
onComplete?: number => void,
5990
): TReturn {
91+
const start = now();
6092
if (__PERFORMANCE_PROFILE__) {
6193
mark(markName);
62-
const done = () => {
63-
measure(markName);
64-
};
65-
return callback(done);
6694
}
67-
return callback(() => {});
95+
96+
const done = () => {
97+
if (__PERFORMANCE_PROFILE__) {
98+
measure(markName);
99+
}
100+
101+
if (onComplete != null) {
102+
const duration = now() - start;
103+
onComplete(duration);
104+
}
105+
};
106+
return callback(done);
68107
}

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
export const enableProfilerChangedHookIndices = true;
1717
export const isInternalFacebookBuild = true;
1818
export const enableNamedHooksFeature = false;
19+
export const enableLogger = false;
1920
export const consoleManagedByDevToolsDuringStrictMode = false;
2021

2122
/************************************************************************

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
export const enableProfilerChangedHookIndices = false;
1717
export const isInternalFacebookBuild = false;
1818
export const enableNamedHooksFeature = false;
19+
export const enableLogger = false;
1920
export const consoleManagedByDevToolsDuringStrictMode = false;
2021

2122
/************************************************************************

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@
1616
export const enableProfilerChangedHookIndices = false;
1717
export const isInternalFacebookBuild = false;
1818
export const enableNamedHooksFeature = true;
19+
export const enableLogger = false;
1920
export const consoleManagedByDevToolsDuringStrictMode = true;

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
export const enableProfilerChangedHookIndices = true;
1717
export const isInternalFacebookBuild = true;
1818
export const enableNamedHooksFeature = true;
19+
export const enableLogger = false;
1920
export const consoleManagedByDevToolsDuringStrictMode = true;
2021

2122
/************************************************************************

‎packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
export const enableProfilerChangedHookIndices = true;
1717
export const isInternalFacebookBuild = false;
1818
export const enableNamedHooksFeature = true;
19+
export const enableLogger = false;
1920
export const consoleManagedByDevToolsDuringStrictMode = true;
2021

2122
/************************************************************************

‎packages/react-devtools-shared/src/hookNamesCache.js‎

Lines changed: 86 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import type {
1818
} from 'react-devtools-shared/src/types';
1919
import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
2020
import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
21+
import {withCallbackPerfMeasurements} from './PerformanceLoggingUtils';
22+
import {logEvent} from './Logger';
2123

2224
const TIMEOUT = 30000;
2325

@@ -92,6 +94,11 @@ export function loadHookNames(
9294
},
9395
};
9496

97+
let timeoutID;
98+
let didTimeout = false;
99+
let resolution = 'unknown';
100+
let resolvedHookNames: HookNames | null = null;
101+
95102
const wake = () => {
96103
if (timeoutID) {
97104
clearTimeout(timeoutID);
@@ -103,71 +110,92 @@ export function loadHookNames(
103110
callbacks.clear();
104111
};
105112

113+
const handleLoadComplete = (durationMs: number): void => {
114+
// Log duration for parsing hook names
115+
logEvent({
116+
name: 'loadHookNames',
117+
displayName: element.displayName,
118+
numberOfHooks: resolvedHookNames?.size ?? null,
119+
durationMs,
120+
resolution,
121+
});
122+
};
123+
106124
const newRecord: Record<HookNames> = (record = {
107125
status: Pending,
108126
value: wakeable,
109127
});
110128

111-
let didTimeout = false;
112-
113-
loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
114-
function onSuccess(hookNames) {
115-
if (didTimeout) {
116-
return;
117-
}
118-
119-
if (__DEBUG__) {
120-
console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
121-
}
122-
123-
if (hookNames) {
124-
const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
125-
resolvedRecord.status = Resolved;
126-
resolvedRecord.value = hookNames;
127-
} else {
128-
const notFoundRecord = ((newRecord: any): RejectedRecord);
129-
notFoundRecord.status = Rejected;
130-
notFoundRecord.value = null;
131-
}
132-
133-
wake();
134-
},
135-
function onError(error) {
136-
if (didTimeout) {
137-
return;
138-
}
139-
140-
if (__DEBUG__) {
141-
console.log('[hookNamesCache] onError()');
142-
}
143-
144-
console.error(error);
145-
146-
const thrownRecord = ((newRecord: any): RejectedRecord);
147-
thrownRecord.status = Rejected;
148-
thrownRecord.value = null;
149-
150-
wake();
129+
withCallbackPerfMeasurements(
130+
'loadHookNames',
131+
done => {
132+
loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
133+
function onSuccess(hookNames) {
134+
if (didTimeout) {
135+
return;
136+
}
137+
138+
if (__DEBUG__) {
139+
console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
140+
}
141+
142+
if (hookNames) {
143+
const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
144+
resolvedRecord.status = Resolved;
145+
resolvedRecord.value = hookNames;
146+
} else {
147+
const notFoundRecord = ((newRecord: any): RejectedRecord);
148+
notFoundRecord.status = Rejected;
149+
notFoundRecord.value = null;
150+
}
151+
152+
resolution = 'success';
153+
resolvedHookNames = hookNames;
154+
done();
155+
wake();
156+
},
157+
function onError(error) {
158+
if (didTimeout) {
159+
return;
160+
}
161+
162+
if (__DEBUG__) {
163+
console.log('[hookNamesCache] onError()');
164+
}
165+
166+
console.error(error);
167+
168+
const thrownRecord = ((newRecord: any): RejectedRecord);
169+
thrownRecord.status = Rejected;
170+
thrownRecord.value = null;
171+
172+
resolution = 'error';
173+
done();
174+
wake();
175+
},
176+
);
177+
178+
// Eventually timeout and stop trying to load names.
179+
timeoutID = setTimeout(function onTimeout() {
180+
if (__DEBUG__) {
181+
console.log('[hookNamesCache] onTimeout()');
182+
}
183+
184+
timeoutID = null;
185+
186+
didTimeout = true;
187+
188+
const timedoutRecord = ((newRecord: any): RejectedRecord);
189+
timedoutRecord.status = Rejected;
190+
timedoutRecord.value = null;
191+
192+
resolution = 'timeout';
193+
done();
194+
wake();
195+
}, TIMEOUT);
151196
},
197+
handleLoadComplete,
152198
);
153-
154-
// Eventually timeout and stop trying to load names.
155-
let timeoutID = setTimeout(function onTimeout() {
156-
if (__DEBUG__) {
157-
console.log('[hookNamesCache] onTimeout()');
158-
}
159-
160-
timeoutID = null;
161-
162-
didTimeout = true;
163-
164-
const timedoutRecord = ((newRecord: any): RejectedRecord);
165-
timedoutRecord.status = Rejected;
166-
timedoutRecord.value = null;
167-
168-
wake();
169-
}, TIMEOUT);
170-
171199
map.set(element, record);
172200
}
173201

0 commit comments

Comments
 (0)
⚡