{"commit":{"subject":"[DevTools] Add initial APIs for logging instrumentation events under feature flag (#22276)","revision":"50263d3273b6fc983acc5b0fd52e670399b248b1","shortRevision":"50263d3273","authoredAt":"2021-09-14T11:10:24-04:00","authorName":"Juan","authorEmail":"jstejada@fb.com"},"parents":["263cfa6ecb9879ecb629d4e04a8c26422b4c4ff9"],"files":[{"status":"M","path":"packages\/react-devtools-extensions\/src\/main.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/Logger.js"},{"status":"R051","previousPath":"packages\/react-devtools-shared\/src\/PerformanceMarks.js","path":"packages\/react-devtools-shared\/src\/PerformanceLoggingUtils.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-fb.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-oss.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hookNamesCache.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hooks\/astUtils.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/index.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/loadSourceAndMetadata.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/parseSourceAndMetadata.js"}],"body":"","patch":"diff --git a\/packages\/react-devtools-extensions\/src\/main.js b\/packages\/react-devtools-extensions\/src\/main.js\nindex d77ff853d0..6acb35aa28 100644\n--- a\/packages\/react-devtools-extensions\/src\/main.js\n+++ b\/packages\/react-devtools-extensions\/src\/main.js\n@@ -18,6 +18,7 @@ import {\n localStorageRemoveItem,\n localStorageSetItem,\n } from 'react-devtools-shared\/src\/storage';\n+import {registerEventLogger} from 'react-devtools-shared\/src\/Logger';\n import DevTools from 'react-devtools-shared\/src\/devtools\/views\/DevTools';\n import {__DEBUG__} from 'react-devtools-shared\/src\/constants';\n \n@@ -87,6 +88,10 @@ function createPanelIfReactLoaded() {\n \n const tabId = chrome.devtools.inspectedWindow.tabId;\n \n+ registerEventLogger((event: LogEvent) => {\n+ \/\/ TODO: hook up event logging\n+ });\n+\n function initBridgeAndStore() {\n const port = chrome.runtime.connect({\n name: '' + tabId,\ndiff --git a\/packages\/react-devtools-shared\/src\/Logger.js b\/packages\/react-devtools-shared\/src\/Logger.js\nnew file mode 100644\nindex 0000000000..0ce2afb3b3\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/Logger.js\n@@ -0,0 +1,47 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow strict-local\n+ *\/\n+\n+import {enableLogger} from 'react-devtools-feature-flags';\n+\n+type LoadHookNamesEvent = {|\n+ +name: 'loadHookNames',\n+ +displayName: string | null,\n+ +numberOfHooks: number | null,\n+ +durationMs: number,\n+ +resolution: 'success' | 'error' | 'timeout' | 'unknown',\n+|};\n+\n+\/\/ prettier-ignore\n+export type LogEvent =\n+ | LoadHookNamesEvent;\n+\n+export type LogFunction = LogEvent => void;\n+\n+let loggers: Array = [];\n+export const logEvent: LogFunction =\n+ enableLogger === true\n+ ? function logEvent(event: LogEvent): void {\n+ loggers.forEach(log => {\n+ log(event);\n+ });\n+ }\n+ : function logEvent() {};\n+\n+export const registerEventLogger =\n+ enableLogger === true\n+ ? function registerEventLogger(eventLogger: LogFunction): () => void {\n+ if (enableLogger) {\n+ loggers.push(eventLogger);\n+ return function unregisterEventLogger() {\n+ loggers = loggers.filter(logger => logger !== eventLogger);\n+ };\n+ }\n+ return () => {};\n+ }\n+ : function registerEventLogger() {};\ndiff --git a\/packages\/react-devtools-shared\/src\/PerformanceMarks.js b\/packages\/react-devtools-shared\/src\/PerformanceLoggingUtils.js\nsimilarity index 51%\nrename from packages\/react-devtools-shared\/src\/PerformanceMarks.js\nrename to packages\/react-devtools-shared\/src\/PerformanceLoggingUtils.js\nindex e702d3923f..29d81bba91 100644\n--- a\/packages\/react-devtools-shared\/src\/PerformanceMarks.js\n+++ b\/packages\/react-devtools-shared\/src\/PerformanceLoggingUtils.js\n@@ -14,6 +14,9 @@ const supportsUserTiming =\n typeof performance.mark === 'function' &&\n typeof performance.clearMarks === 'function';\n \n+const supportsPerformanceNow =\n+ typeof performance !== 'undefined' && typeof performance.now === 'function';\n+\n function mark(markName: string): void {\n if (supportsUserTiming) {\n performance.mark(markName + '-start');\n@@ -27,42 +30,78 @@ function measure(markName: string): void {\n }\n }\n \n-export async function withAsyncPerformanceMark(\n+function now(): number {\n+ if (supportsPerformanceNow) {\n+ return performance.now();\n+ }\n+ return Date.now();\n+}\n+\n+export async function withAsyncPerfMeasurements(\n markName: string,\n callback: () => Promise,\n+ onComplete?: number => void,\n ): Promise {\n+ const start = now();\n if (__PERFORMANCE_PROFILE__) {\n mark(markName);\n- const result = await callback();\n+ }\n+ const result = await callback();\n+\n+ if (__PERFORMANCE_PROFILE__) {\n measure(markName);\n- return result;\n }\n- return callback();\n+\n+ if (onComplete != null) {\n+ const duration = now() - start;\n+ onComplete(duration);\n+ }\n+\n+ return result;\n }\n \n-export function withSyncPerformanceMark(\n+export function withSyncPerfMeasurements(\n markName: string,\n callback: () => TReturn,\n+ onComplete?: number => void,\n ): TReturn {\n+ const start = now();\n if (__PERFORMANCE_PROFILE__) {\n mark(markName);\n- const result = callback();\n+ }\n+ const result = callback();\n+\n+ if (__PERFORMANCE_PROFILE__) {\n measure(markName);\n- return result;\n }\n- return callback();\n+\n+ if (onComplete != null) {\n+ const duration = now() - start;\n+ onComplete(duration);\n+ }\n+\n+ return result;\n }\n \n-export function withCallbackPerformanceMark(\n+export function withCallbackPerfMeasurements(\n markName: string,\n callback: (done: () => void) => TReturn,\n+ onComplete?: number => void,\n ): TReturn {\n+ const start = now();\n if (__PERFORMANCE_PROFILE__) {\n mark(markName);\n- const done = () => {\n- measure(markName);\n- };\n- return callback(done);\n }\n- return callback(() => {});\n+\n+ const done = () => {\n+ if (__PERFORMANCE_PROFILE__) {\n+ measure(markName);\n+ }\n+\n+ if (onComplete != null) {\n+ const duration = now() - start;\n+ onComplete(duration);\n+ }\n+ };\n+ return callback(done);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-fb.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-fb.js\nindex 6c0568867b..b6b7a1d0cd 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-fb.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-fb.js\n@@ -16,6 +16,7 @@\n export const enableProfilerChangedHookIndices = true;\n export const isInternalFacebookBuild = true;\n export const enableNamedHooksFeature = false;\n+export const enableLogger = false;\n export const consoleManagedByDevToolsDuringStrictMode = false;\n \n \/************************************************************************\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-oss.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-oss.js\nindex 341af11e17..6eb0f71ef9 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-oss.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.core-oss.js\n@@ -16,6 +16,7 @@\n export const enableProfilerChangedHookIndices = false;\n export const isInternalFacebookBuild = false;\n export const enableNamedHooksFeature = false;\n+export const enableLogger = false;\n export const consoleManagedByDevToolsDuringStrictMode = false;\n \n \/************************************************************************\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\nindex e6404254a3..bc495619cf 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\n@@ -16,4 +16,5 @@\n export const enableProfilerChangedHookIndices = false;\n export const isInternalFacebookBuild = false;\n export const enableNamedHooksFeature = true;\n+export const enableLogger = false;\n export const consoleManagedByDevToolsDuringStrictMode = true;\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\nindex d4e6160b5e..51fe2ed6ab 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\n@@ -16,6 +16,7 @@\n export const enableProfilerChangedHookIndices = true;\n export const isInternalFacebookBuild = true;\n export const enableNamedHooksFeature = true;\n+export const enableLogger = false;\n export const consoleManagedByDevToolsDuringStrictMode = true;\n \n \/************************************************************************\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js\nindex 382c3fab4c..53466bf84b 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js\n@@ -16,6 +16,7 @@\n export const enableProfilerChangedHookIndices = true;\n export const isInternalFacebookBuild = false;\n export const enableNamedHooksFeature = true;\n+export const enableLogger = false;\n export const consoleManagedByDevToolsDuringStrictMode = true;\n \n \/************************************************************************\ndiff --git a\/packages\/react-devtools-shared\/src\/hookNamesCache.js b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\nindex 306b13c525..32179f9de1 100644\n--- a\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n+++ b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n@@ -18,6 +18,8 @@ import type {\n } from 'react-devtools-shared\/src\/types';\n import type {HookSource} from 'react-debug-tools\/src\/ReactDebugHooks';\n import type {FetchFileWithCaching} from 'react-devtools-shared\/src\/devtools\/views\/Components\/FetchFileWithCachingContext';\n+import {withCallbackPerfMeasurements} from '.\/PerformanceLoggingUtils';\n+import {logEvent} from '.\/Logger';\n \n const TIMEOUT = 30000;\n \n@@ -92,6 +94,11 @@ export function loadHookNames(\n },\n };\n \n+ let timeoutID;\n+ let didTimeout = false;\n+ let resolution = 'unknown';\n+ let resolvedHookNames: HookNames | null = null;\n+\n const wake = () => {\n if (timeoutID) {\n clearTimeout(timeoutID);\n@@ -103,71 +110,92 @@ export function loadHookNames(\n callbacks.clear();\n };\n \n+ const handleLoadComplete = (durationMs: number): void => {\n+ \/\/ Log duration for parsing hook names\n+ logEvent({\n+ name: 'loadHookNames',\n+ displayName: element.displayName,\n+ numberOfHooks: resolvedHookNames?.size ?? null,\n+ durationMs,\n+ resolution,\n+ });\n+ };\n+\n const newRecord: Record = (record = {\n status: Pending,\n value: wakeable,\n });\n \n- let didTimeout = false;\n-\n- loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(\n- function onSuccess(hookNames) {\n- if (didTimeout) {\n- return;\n- }\n-\n- if (__DEBUG__) {\n- console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);\n- }\n-\n- if (hookNames) {\n- const resolvedRecord = ((newRecord: any): ResolvedRecord);\n- resolvedRecord.status = Resolved;\n- resolvedRecord.value = hookNames;\n- } else {\n- const notFoundRecord = ((newRecord: any): RejectedRecord);\n- notFoundRecord.status = Rejected;\n- notFoundRecord.value = null;\n- }\n-\n- wake();\n- },\n- function onError(error) {\n- if (didTimeout) {\n- return;\n- }\n-\n- if (__DEBUG__) {\n- console.log('[hookNamesCache] onError()');\n- }\n-\n- console.error(error);\n-\n- const thrownRecord = ((newRecord: any): RejectedRecord);\n- thrownRecord.status = Rejected;\n- thrownRecord.value = null;\n-\n- wake();\n+ withCallbackPerfMeasurements(\n+ 'loadHookNames',\n+ done => {\n+ loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(\n+ function onSuccess(hookNames) {\n+ if (didTimeout) {\n+ return;\n+ }\n+\n+ if (__DEBUG__) {\n+ console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);\n+ }\n+\n+ if (hookNames) {\n+ const resolvedRecord = ((newRecord: any): ResolvedRecord);\n+ resolvedRecord.status = Resolved;\n+ resolvedRecord.value = hookNames;\n+ } else {\n+ const notFoundRecord = ((newRecord: any): RejectedRecord);\n+ notFoundRecord.status = Rejected;\n+ notFoundRecord.value = null;\n+ }\n+\n+ resolution = 'success';\n+ resolvedHookNames = hookNames;\n+ done();\n+ wake();\n+ },\n+ function onError(error) {\n+ if (didTimeout) {\n+ return;\n+ }\n+\n+ if (__DEBUG__) {\n+ console.log('[hookNamesCache] onError()');\n+ }\n+\n+ console.error(error);\n+\n+ const thrownRecord = ((newRecord: any): RejectedRecord);\n+ thrownRecord.status = Rejected;\n+ thrownRecord.value = null;\n+\n+ resolution = 'error';\n+ done();\n+ wake();\n+ },\n+ );\n+\n+ \/\/ Eventually timeout and stop trying to load names.\n+ timeoutID = setTimeout(function onTimeout() {\n+ if (__DEBUG__) {\n+ console.log('[hookNamesCache] onTimeout()');\n+ }\n+\n+ timeoutID = null;\n+\n+ didTimeout = true;\n+\n+ const timedoutRecord = ((newRecord: any): RejectedRecord);\n+ timedoutRecord.status = Rejected;\n+ timedoutRecord.value = null;\n+\n+ resolution = 'timeout';\n+ done();\n+ wake();\n+ }, TIMEOUT);\n },\n+ handleLoadComplete,\n );\n-\n- \/\/ Eventually timeout and stop trying to load names.\n- let timeoutID = setTimeout(function onTimeout() {\n- if (__DEBUG__) {\n- console.log('[hookNamesCache] onTimeout()');\n- }\n-\n- timeoutID = null;\n-\n- didTimeout = true;\n-\n- const timedoutRecord = ((newRecord: any): RejectedRecord);\n- timedoutRecord.status = Rejected;\n- timedoutRecord.value = null;\n-\n- wake();\n- }, TIMEOUT);\n-\n map.set(element, record);\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/hooks\/astUtils.js b\/packages\/react-devtools-shared\/src\/hooks\/astUtils.js\nindex 05c6391941..9a24059205 100644\n--- a\/packages\/react-devtools-shared\/src\/hooks\/astUtils.js\n+++ b\/packages\/react-devtools-shared\/src\/hooks\/astUtils.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-import {withSyncPerformanceMark} from 'react-devtools-shared\/src\/PerformanceMarks';\n+import {withSyncPerfMeasurements} from 'react-devtools-shared\/src\/PerformanceLoggingUtils';\n import traverse, {NodePath, Node} from '@babel\/traverse';\n import {File} from '@babel\/types';\n \n@@ -132,7 +132,7 @@ export function getHookName(\n originalSourceLineNumber: number,\n originalSourceColumnNumber: number,\n ): string | null {\n- const hooksFromAST = withSyncPerformanceMark(\n+ const hooksFromAST = withSyncPerfMeasurements(\n 'getPotentialHookDeclarationsFromAST(originalSourceAST)',\n () => getPotentialHookDeclarationsFromAST(originalSourceAST),\n );\n@@ -176,7 +176,7 @@ export function getHookName(\n \/\/ nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name\n \/\/ depending on the type of potentialReactHookASTNode\n try {\n- const nodesAssociatedWithReactHookASTNode = withSyncPerformanceMark(\n+ const nodesAssociatedWithReactHookASTNode = withSyncPerfMeasurements(\n 'getFilteredHookASTNodes()',\n () =>\n getFilteredHookASTNodes(\n@@ -186,7 +186,7 @@ export function getHookName(\n ),\n );\n \n- const name = withSyncPerformanceMark('getHookNameFromNode()', () =>\n+ const name = withSyncPerfMeasurements('getHookNameFromNode()', () =>\n getHookNameFromNode(\n hook,\n nodesAssociatedWithReactHookASTNode,\n@@ -297,7 +297,7 @@ function getHookVariableName(\n \n function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {\n const potentialHooksFound: NodePath[] = [];\n- withSyncPerformanceMark('traverse(sourceAST)', () =>\n+ withSyncPerfMeasurements('traverse(sourceAST)', () =>\n traverse(sourceAST, {\n enter(path) {\n if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {\ndiff --git a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/index.js b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/index.js\nindex a400a021a9..0b5595268b 100644\n--- a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/index.js\n+++ b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/index.js\n@@ -12,7 +12,7 @@ import type {HooksNode, HooksTree} from 'react-debug-tools\/src\/ReactDebugHooks';\n import type {HookNames} from 'react-devtools-shared\/src\/types';\n import type {FetchFileWithCaching} from 'react-devtools-shared\/src\/devtools\/views\/Components\/FetchFileWithCachingContext';\n \n-import {withAsyncPerformanceMark} from 'react-devtools-shared\/src\/PerformanceMarks';\n+import {withAsyncPerfMeasurements} from 'react-devtools-shared\/src\/PerformanceLoggingUtils';\n import WorkerizedParseSourceAndMetadata from '.\/parseSourceAndMetadata.worker';\n import typeof * as ParseSourceAndMetadataModule from '.\/parseSourceAndMetadata';\n import {flattenHooksList, loadSourceAndMetadata} from '.\/loadSourceAndMetadata';\n@@ -37,7 +37,7 @@ export async function parseHookNames(\n hooksTree: HooksTree,\n fetchFileWithCaching: FetchFileWithCaching | null,\n ): Promise {\n- return withAsyncPerformanceMark('parseHookNames', async () => {\n+ return withAsyncPerfMeasurements('parseHookNames', async () => {\n const hooksList = flattenHooksList(hooksTree);\n if (hooksList.length === 0) {\n \/\/ This component tree contains no named hooks.\ndiff --git a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/loadSourceAndMetadata.js b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/loadSourceAndMetadata.js\nindex e8f043be24..640e916a09 100644\n--- a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/loadSourceAndMetadata.js\n+++ b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/loadSourceAndMetadata.js\n@@ -49,10 +49,10 @@ import {__DEBUG__} from 'react-devtools-shared\/src\/constants';\n import {getHookSourceLocationKey} from 'react-devtools-shared\/src\/hookNamesCache';\n import {sourceMapIncludesSource} from '..\/SourceMapUtils';\n import {\n- withAsyncPerformanceMark,\n- withCallbackPerformanceMark,\n- withSyncPerformanceMark,\n-} from 'react-devtools-shared\/src\/PerformanceMarks';\n+ withAsyncPerfMeasurements,\n+ withCallbackPerfMeasurements,\n+ withSyncPerfMeasurements,\n+} from 'react-devtools-shared\/src\/PerformanceLoggingUtils';\n \n import type {\n HooksNode,\n@@ -98,17 +98,17 @@ export async function loadSourceAndMetadata(\n hooksList: HooksList,\n fetchFileWithCaching: FetchFileWithCaching | null,\n ): Promise {\n- return withAsyncPerformanceMark('loadSourceAndMetadata()', async () => {\n- const locationKeyToHookSourceAndMetadata = withSyncPerformanceMark(\n+ return withAsyncPerfMeasurements('loadSourceAndMetadata()', async () => {\n+ const locationKeyToHookSourceAndMetadata = withSyncPerfMeasurements(\n 'initializeHookSourceAndMetadata',\n () => initializeHookSourceAndMetadata(hooksList),\n );\n \n- await withAsyncPerformanceMark('loadSourceFiles()', () =>\n+ await withAsyncPerfMeasurements('loadSourceFiles()', () =>\n loadSourceFiles(locationKeyToHookSourceAndMetadata, fetchFileWithCaching),\n );\n \n- await withAsyncPerformanceMark('extractAndLoadSourceMapJSON()', () =>\n+ await withAsyncPerfMeasurements('extractAndLoadSourceMapJSON()', () =>\n extractAndLoadSourceMapJSON(locationKeyToHookSourceAndMetadata),\n );\n \n@@ -157,7 +157,7 @@ function extractAndLoadSourceMapJSON(\n \/\/ TODO (named hooks) If this RegExp search is slow, we could try breaking it up\n \/\/ first using an indexOf(' sourceMappingURL=') to find the start of the comment\n \/\/ (probably at the end of the file) and then running the RegExp on the remaining substring.\n- let sourceMappingURLMatch = withSyncPerformanceMark(\n+ let sourceMappingURLMatch = withSyncPerfMeasurements(\n 'sourceMapRegex.exec(runtimeSourceCode)',\n () => sourceMapRegex.exec(runtimeSourceCode),\n );\n@@ -185,12 +185,12 @@ function extractAndLoadSourceMapJSON(\n const trimmed = ((sourceMappingURL.match(\n \/base64,([a-zA-Z0-9+\\\/=]+)\/,\n ): any): Array)[1];\n- const decoded = withSyncPerformanceMark(\n+ const decoded = withSyncPerfMeasurements(\n 'decodeBase64String()',\n () => decodeBase64String(trimmed),\n );\n \n- const sourceMapJSON = withSyncPerformanceMark(\n+ const sourceMapJSON = withSyncPerfMeasurements(\n 'JSON.parse(decoded)',\n () => JSON.parse(decoded),\n );\n@@ -227,7 +227,7 @@ function extractAndLoadSourceMapJSON(\n }\n \n \/\/ If the first source map we found wasn't a match, check for more.\n- sourceMappingURLMatch = withSyncPerformanceMark(\n+ sourceMappingURLMatch = withSyncPerfMeasurements(\n 'sourceMapRegex.exec(runtimeSourceCode)',\n () => sourceMapRegex.exec(runtimeSourceCode),\n );\n@@ -266,7 +266,7 @@ function extractAndLoadSourceMapJSON(\n dedupedFetchPromises.get(url) ||\n fetchFile(url).then(\n sourceMapContents => {\n- const sourceMapJSON = withSyncPerformanceMark(\n+ const sourceMapJSON = withSyncPerfMeasurements(\n 'JSON.parse(sourceMapContents)',\n () => JSON.parse(sourceMapContents),\n );\n@@ -316,7 +316,7 @@ function fetchFile(\n url: string,\n markName?: string = 'fetchFile',\n ): Promise {\n- return withCallbackPerformanceMark(`${markName}(\"${url}\")`, done => {\n+ return withCallbackPerfMeasurements(`${markName}(\"${url}\")`, done => {\n return new Promise((resolve, reject) => {\n fetch(url, FETCH_OPTIONS).then(\n response => {\n@@ -376,7 +376,7 @@ export function hasNamedHooks(hooksTree: HooksTree): boolean {\n \n export function flattenHooksList(hooksTree: HooksTree): HooksList {\n const hooksList: HooksList = [];\n- withSyncPerformanceMark('flattenHooksList()', () => {\n+ withSyncPerfMeasurements('flattenHooksList()', () => {\n flattenHooksListImpl(hooksTree, hooksList);\n });\n \n@@ -472,7 +472,7 @@ function loadSourceFiles(\n \/\/ If a helper function has been injected to fetch with caching,\n \/\/ use it to fetch the (already loaded) source file.\n fetchFileFunction = url => {\n- return withAsyncPerformanceMark(\n+ return withAsyncPerfMeasurements(\n `fetchFileWithCaching(\"${url}\")`,\n () => {\n return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);\ndiff --git a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/parseSourceAndMetadata.js b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/parseSourceAndMetadata.js\nindex 967576d659..b6c069d0dc 100644\n--- a\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/parseSourceAndMetadata.js\n+++ b\/packages\/react-devtools-shared\/src\/hooks\/parseHookNames\/parseSourceAndMetadata.js\n@@ -19,9 +19,9 @@ import {__DEBUG__} from 'react-devtools-shared\/src\/constants';\n import {getHookSourceLocationKey} from 'react-devtools-shared\/src\/hookNamesCache';\n import {SourceMapMetadataConsumer} from '..\/SourceMapMetadataConsumer';\n import {\n- withAsyncPerformanceMark,\n- withSyncPerformanceMark,\n-} from 'react-devtools-shared\/src\/PerformanceMarks';\n+ withAsyncPerfMeasurements,\n+ withSyncPerfMeasurements,\n+} from 'react-devtools-shared\/src\/PerformanceLoggingUtils';\n \n import type {\n HooksList,\n@@ -106,27 +106,27 @@ export async function parseSourceAndMetadata(\n hooksList: HooksList,\n locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,\n ): Promise {\n- return withAsyncPerformanceMark('parseSourceAndMetadata()', async () => {\n- const locationKeyToHookParsedMetadata = withSyncPerformanceMark(\n+ return withAsyncPerfMeasurements('parseSourceAndMetadata()', async () => {\n+ const locationKeyToHookParsedMetadata = withSyncPerfMeasurements(\n 'initializeHookParsedMetadata',\n () => initializeHookParsedMetadata(locationKeyToHookSourceAndMetadata),\n );\n \n- withSyncPerformanceMark('parseSourceMaps', () =>\n+ withSyncPerfMeasurements('parseSourceMaps', () =>\n parseSourceMaps(\n locationKeyToHookSourceAndMetadata,\n locationKeyToHookParsedMetadata,\n ),\n );\n \n- withSyncPerformanceMark('parseSourceAST()', () =>\n+ withSyncPerfMeasurements('parseSourceAST()', () =>\n parseSourceAST(\n locationKeyToHookSourceAndMetadata,\n locationKeyToHookParsedMetadata,\n ),\n );\n \n- return withSyncPerformanceMark('findHookNames()', () =>\n+ return withSyncPerfMeasurements('findHookNames()', () =>\n findHookNames(hooksList, locationKeyToHookParsedMetadata),\n );\n });\n@@ -174,7 +174,7 @@ function findHookNames(\n let name;\n const {metadataConsumer} = hookParsedMetadata;\n if (metadataConsumer != null) {\n- name = withSyncPerformanceMark('metadataConsumer.hookNameFor()', () =>\n+ name = withSyncPerfMeasurements('metadataConsumer.hookNameFor()', () =>\n metadataConsumer.hookNameFor({\n line: originalSourceLineNumber,\n column: originalSourceColumnNumber,\n@@ -184,7 +184,7 @@ function findHookNames(\n }\n \n if (name == null) {\n- name = withSyncPerformanceMark('getHookName()', () =>\n+ name = withSyncPerfMeasurements('getHookName()', () =>\n getHookName(\n hook,\n hookParsedMetadata.originalSourceAST,\n@@ -303,7 +303,7 @@ function parseSourceAST(\n \/\/ Now that the source map has been loaded,\n \/\/ extract the original source for later.\n \/\/ TODO (named hooks) Refactor this read, github.com\/facebook\/react\/pull\/22181\n- const {column, line, source} = withSyncPerformanceMark(\n+ const {column, line, source} = withSyncPerfMeasurements(\n 'sourceConsumer.originalPositionFor()',\n () =>\n sourceConsumer.originalPositionFor({\n@@ -329,7 +329,7 @@ function parseSourceAST(\n \/\/ It can be relative if the source map specifies it that way,\n \/\/ but we use it as a cache key across different source maps and there can be collisions.\n originalSourceURL = (source: string);\n- originalSourceCode = withSyncPerformanceMark(\n+ originalSourceCode = withSyncPerfMeasurements(\n 'sourceConsumer.sourceContentFor()',\n () => (sourceConsumer.sourceContentFor(source, true): string),\n );\n@@ -401,7 +401,7 @@ function parseSourceAST(\n \n \/\/ TODO (named hooks) This is probably where we should check max source length,\n \/\/ rather than in loadSourceAndMetatada -> loadSourceFiles().\n- const originalSourceAST = withSyncPerformanceMark(\n+ const originalSourceAST = withSyncPerfMeasurements(\n '[@babel\/parser] parse(originalSourceCode)',\n () =>\n parse(originalSourceCode, {\n@@ -441,11 +441,11 @@ function parseSourceMaps(\n \n const sourceMapJSON = hookSourceAndMetadata.sourceMapJSON;\n if (sourceMapJSON != null) {\n- hookParsedMetadata.metadataConsumer = withSyncPerformanceMark(\n+ hookParsedMetadata.metadataConsumer = withSyncPerfMeasurements(\n 'new SourceMapMetadataConsumer(sourceMapJSON)',\n () => new SourceMapMetadataConsumer(sourceMapJSON),\n );\n- hookParsedMetadata.sourceConsumer = withSyncPerformanceMark(\n+ hookParsedMetadata.sourceConsumer = withSyncPerfMeasurements(\n 'new SourceMapConsumer(sourceMapJSON)',\n () => new SourceMapConsumer(sourceMapJSON),\n );\n"}

dillon1000/react

Files changed