Revert D102166537: Hoist PerformanceLogger primitives out of react-native

Differential Revision:
D102166537

Original commit changeset: 241ca7e7fb48

Original Phabricator Diff: D102166537

fbshipit-source-id: fb0f106ec04200cb2bc13922c17926c35a3c3d9c

Author: Dmitrii Litsman

packages/react-native/Libraries/Core/InitializeCore.js

@@ -26,4 +26,17 @@
 
 'use strict';
 
+const start = Date.now();
+
 require('../../src/private/setup/setUpDefaultReactNativeEnvironment').default();
+
+const GlobalPerformanceLogger =
+  require('../Utilities/GlobalPerformanceLogger').default;
+// We could just call GlobalPerformanceLogger.markPoint at the top of the file,
+// but then we'd be excluding the time it took to require the logger.
+// Instead, we just use Date.now and backdate the timestamp.
+GlobalPerformanceLogger.markPoint(
+  'initializeCore_start',
+  GlobalPerformanceLogger.currentTimestamp() - (Date.now() - start),
+);
+GlobalPerformanceLogger.markPoint('initializeCore_end');

packages/react-native/Libraries/Core/setUpBatchedBridge.js

@@ -27,7 +27,7 @@ registerModule(
 );
 registerModule(
   'GlobalPerformanceLogger',
-  () => require('../ReactNative/DeprecatedPerformanceLoggerStub').default,
+  () => require('../Utilities/GlobalPerformanceLogger').default,
 );
 
 if (__DEV__) {

packages/react-native/Libraries/Network/XMLHttpRequest.js

@@ -14,6 +14,7 @@ import type {
   EventCallback,
   EventListener,
 } from '../../src/private/webapis/dom/events/EventTarget';
+import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import Event from '../../src/private/webapis/dom/events/Event';
 import {
@@ -26,6 +27,8 @@ import ProgressEvent from '../../src/private/webapis/xhr/events/ProgressEvent';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 
 const BlobManager = require('../Blob/BlobManager').default;
+const GlobalPerformanceLogger =
+  require('../Utilities/GlobalPerformanceLogger').default;
 const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
 const invariant = require('invariant');
@@ -55,17 +58,6 @@ type XHRInterceptor = interface {
   loadingFailed(id: number, error: string): void,
 };
 
-/**
- * Minimal contract for the optional performance logger that callers may attach
- * via `setPerformanceLogger(...)`. Defined locally so this module stays
- * self-contained and does not depend on any specific logger implementation.
- * Any object satisfying these two methods structurally is accepted.
- */
-type XHRPerformanceLogger = interface {
-  startTimespan(key: string): void,
-  stopTimespan(key: string): void,
-};
-
 // The native blob module is optional so inject it here if available.
 if (BlobManager.isAvailable) {
   BlobManager.addNetworkingHandler();
@@ -175,7 +167,8 @@ class XMLHttpRequest extends EventTarget {
   _timedOut: boolean = false;
   _trackingName: ?string;
   _incrementalEvents: boolean = false;
-  _performanceLogger: ?XHRPerformanceLogger = null;
+  _startTime: ?number = null;
+  _performanceLogger: IPerformanceLogger = GlobalPerformanceLogger;
 
   static __setInterceptor_DO_NOT_USE(interceptor: ?XHRInterceptor) {
     XMLHttpRequest._interceptor = interceptor;
@@ -341,10 +334,8 @@ class XMLHttpRequest extends EventTarget {
     responseURL: ?string,
   ): void {
     if (requestId === this._requestId) {
-      const performanceLogger = this._performanceLogger;
-      if (this._perfKey != null && performanceLogger != null) {
-        performanceLogger.stopTimespan(this._perfKey);
-      }
+      this._perfKey != null &&
+        this._performanceLogger.stopTimespan(this._perfKey);
       this.status = status;
       this.setResponseHeaders(responseHeaders);
       this.setReadyState(this.HEADERS_RECEIVED);
@@ -530,15 +521,9 @@ class XMLHttpRequest extends EventTarget {
   }
 
   /**
-   * Custom extension that lets callers attach a performance logger receiving
-   * a `network_XMLHttpRequest_<friendlyName>` start/stop timespan around each
-   * dispatched request. The logger only needs to implement
-   * `startTimespan(key)` / `stopTimespan(key)` (see the `XHRPerformanceLogger`
-   * interface above). When no logger is set the timespan is not emitted.
+   * Custom extension for setting a custom performance logger
    */
-  setPerformanceLogger(
-    performanceLogger: XHRPerformanceLogger,
-  ): XMLHttpRequest {
+  setPerformanceLogger(performanceLogger: IPerformanceLogger): XMLHttpRequest {
     this._performanceLogger = performanceLogger;
     return this;
   }
@@ -613,11 +598,9 @@ class XMLHttpRequest extends EventTarget {
 
     const doSend = () => {
       const friendlyName = this._trackingName ?? this._url;
-      const performanceLogger = this._performanceLogger;
-      if (performanceLogger != null) {
-        this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
-        performanceLogger.startTimespan(this._perfKey);
-      }
+      this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
+      this._performanceLogger.startTimespan(this._perfKey);
+      this._startTime = performance.now();
       invariant(
         this._method,
         'XMLHttpRequest method needs to be defined (%s).',

packages/react-native/Libraries/Network/__tests__/XMLHttpRequest-test.js

@@ -10,10 +10,15 @@
 
 'use strict';
 
+const createPerformanceLogger =
+  require('../../Utilities/createPerformanceLogger').default;
+const GlobalPerformanceLogger =
+  require('../../Utilities/GlobalPerformanceLogger').default;
 const Platform = require('../../Utilities/Platform').default;
 const XMLHttpRequest = require('../XMLHttpRequest').default;
 
 jest.unmock('../../Utilities/Platform');
+jest.mock('../../Utilities/GlobalPerformanceLogger');
 let requestId = 1;
 function setRequestId(id: number) {
   if (Platform.OS === 'ios') {
@@ -241,11 +246,30 @@ describe('XMLHttpRequest', function () {
     );
   });
 
+  it('should log to GlobalPerformanceLogger if a custom performance logger is not set', () => {
+    xhr.open('GET', 'blabla');
+    xhr.send();
+
+    expect(GlobalPerformanceLogger.startTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+    expect(GlobalPerformanceLogger.stopTimespan).not.toHaveBeenCalled();
+
+    setRequestId(8);
+    xhr.__didReceiveResponse(requestId, 200, {
+      'Content-Type': 'text/plain; charset=utf-8',
+      'Content-Length': '32',
+    });
+
+    expect(GlobalPerformanceLogger.stopTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+  });
+
   it('should log to a custom performance logger if set', () => {
-    const performanceLogger = {
-      startTimespan: jest.fn(),
-      stopTimespan: jest.fn(),
-    };
+    const performanceLogger = createPerformanceLogger();
+    jest.spyOn(performanceLogger, 'startTimespan');
+    jest.spyOn(performanceLogger, 'stopTimespan');
 
     xhr.setPerformanceLogger(performanceLogger);
 
@@ -255,6 +279,7 @@ describe('XMLHttpRequest', function () {
     expect(performanceLogger.startTimespan).toHaveBeenCalledWith(
       'network_XMLHttpRequest_blabla',
     );
+    expect(GlobalPerformanceLogger.startTimespan).not.toHaveBeenCalled();
     expect(performanceLogger.stopTimespan).not.toHaveBeenCalled();
 
     setRequestId(9);
@@ -266,6 +291,7 @@ describe('XMLHttpRequest', function () {
     expect(performanceLogger.stopTimespan).toHaveBeenCalledWith(
       'network_XMLHttpRequest_blabla',
     );
+    expect(GlobalPerformanceLogger.stopTimespan).not.toHaveBeenCalled();
   });
 
   it('should sort and lowercase response headers', function () {

packages/react-native/Libraries/ReactNative/AppRegistry.d.ts

@@ -8,8 +8,8 @@
  */
 
 import type * as React from 'react';
+import type {IPerformanceLogger} from '../Utilities/IPerformanceLogger';
 import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';
-import type {IPerformanceLogger} from './IPerformanceLogger';
 
 type Task = (taskData: any) => Promise<void>;
 type TaskProvider = () => Task;

packages/react-native/Libraries/ReactNative/AppRegistry.flow.js

@@ -10,8 +10,8 @@
 
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
+import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import type {DisplayModeType} from './DisplayMode';
-import type {IPerformanceLogger} from './IPerformanceLogger.flow';
 
 type HeadlessTask = (taskData: any) => Promise<void>;
 export type TaskProvider = () => HeadlessTask;

packages/react-native/Libraries/ReactNative/AppRegistryImpl.js

@@ -22,8 +22,8 @@ import type {
   WrapperComponentProvider,
 } from './AppRegistry.flow';
 
+import createPerformanceLogger from '../Utilities/createPerformanceLogger';
 import SceneTracker from '../Utilities/SceneTracker';
-import DeprecatedPerformanceLoggerStub from './DeprecatedPerformanceLoggerStub';
 import {coerceDisplayMode} from './DisplayMode';
 import HeadlessJsTaskError from './HeadlessJsTaskError';
 import invariant from 'invariant';
@@ -81,19 +81,20 @@ export function registerComponent(
   componentProvider: ComponentProvider,
   section?: boolean,
 ): string {
+  const scopedPerformanceLogger = createPerformanceLogger();
   runnables[appKey] = (appParameters, displayMode) => {
     const renderApplication = require('./renderApplication').default;
     renderApplication(
       componentProviderInstrumentationHook(
         componentProvider,
-        DeprecatedPerformanceLoggerStub,
+        scopedPerformanceLogger,
       ),
       appParameters.initialProps,
       appParameters.rootTag,
       wrapperComponentProvider && wrapperComponentProvider(appParameters),
       rootViewStyleProvider && rootViewStyleProvider(appParameters),
       true, // fabric - deprecated, always true
-      undefined, // formerly scopedPerformanceLogger; reserved positional slot
+      scopedPerformanceLogger,
       appKey === 'LogBox', // is logbox
       appKey,
       displayMode,

packages/react-native/Libraries/ReactNative/DeprecatedPerformanceLoggerStub.js

@@ -9,7 +9,10 @@
  */
 
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
+import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger';
+import PerformanceLoggerContext from '../Utilities/PerformanceLoggerContext';
 import AppContainer from './AppContainer';
 import DisplayMode, {type DisplayModeType} from './DisplayMode';
 import getCachedComponentWithDebugName from './getCachedComponentWithDebugName';
@@ -36,26 +39,27 @@ export default function renderApplication<Props extends Object>(
   // Keep this parameter for backwards compatibility only. It is always treated as
   // true internally.
   fabric?: true | void,
-  // Reserved positional slot (formerly `scopedPerformanceLogger`). Preserved so
-  // existing callers that supply this argument continue to type-check; the
-  // value is ignored.
-  _unused?: void,
+  scopedPerformanceLogger?: IPerformanceLogger,
   isLogBox?: boolean,
   debugName?: string,
   displayMode?: ?DisplayModeType,
   useOffscreen?: boolean,
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
+  const performanceLogger = scopedPerformanceLogger ?? GlobalPerformanceLogger;
+
   let renderable: React.MixedElement = (
-    <AppContainer
-      rootTag={rootTag}
-      WrapperComponent={WrapperComponent}
-      rootViewStyle={rootViewStyle}
-      initialProps={initialProps ?? Object.freeze({})}
-      internal_excludeLogBox={isLogBox}>
-      <RootComponent {...initialProps} rootTag={rootTag} />
-    </AppContainer>
+    <PerformanceLoggerContext.Provider value={performanceLogger}>
+      <AppContainer
+        rootTag={rootTag}
+        WrapperComponent={WrapperComponent}
+        rootViewStyle={rootViewStyle}
+        initialProps={initialProps ?? Object.freeze({})}
+        internal_excludeLogBox={isLogBox}>
+        <RootComponent {...initialProps} rootTag={rootTag} />
+      </AppContainer>
+    </PerformanceLoggerContext.Provider>
   );
 
   if (__DEV__ && debugName) {
@@ -71,8 +75,8 @@ export default function renderApplication<Props extends Object>(
 
   if (useOffscreen && displayMode != null) {
     // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[prop-missing]
     // $FlowFixMe[missing-export]
-    // $FlowFixMe[prop-missing] `unstable_Activity` is not yet in the React types.
     const Activity: ActivityType = React.unstable_Activity;
 
     renderable = (
@@ -83,8 +87,16 @@ export default function renderApplication<Props extends Object>(
     );
   }
 
+  performanceLogger.startTimespan('renderApplication_React_render');
+  performanceLogger.setExtra('usedReactConcurrentRoot', '1');
+  performanceLogger.setExtra('usedReactFabric', '1');
+  performanceLogger.setExtra(
+    'usedReactProfiler',
+    Renderer.isProfilingRenderer(),
+  );
   Renderer.renderElement({
     element: renderable,
     rootTag,
   });
+  performanceLogger.stopTimespan('renderApplication_React_render');
 }