Add support for JS sampling profiler (#52827)

Summary:
Pull Request resolved: #52827

Changelog: [internal]

This adds **support for creating Hermes/JS sampling profiler traces in Fantom**, which is especially useful when running benchmarks.

Usage:
```
FANTOM_PROFILE_JS=1 yarn fantom Animated-benchmark
```

Output:

 {F1980642216}

After this, the trace is fully symbolicated.

Can be opened directly in Google Chrome:
{F1980642229}

Or in the built-in viewer in VSCode:

 {F1980642242} {F1980642240} {F1980642241}

When collapsing frames in the Flame Chart viewer in VSCode, we can quickly identify opportunities for optimizations.

This also supports multi-config environments. In that case, trace file names are created using a short representation of the configuration.

User guide for benchmarks in Fantom, including how to use this, will be done in a future diff.

NOTE: This still doesn't work in OSS because we don't support optimized mode there. In dev mode, there's a segmentation fault coming from this line: `hermesRuntime->sampledTraceToStreamInDevToolsFormat(fileStream)`

Reviewed By: sammy-SC

Differential Revision: D78905646

fbshipit-source-id: 382ddd5034db601309bd118cedde2fe0d57fde98

Author: rubennorte

packages/react-native/src/private/testing/fantom/specs/NativeFantom.js

@@ -117,6 +117,8 @@ interface Spec extends TurboModule {
   ): () => ?number;
   saveJSMemoryHeapSnapshot: (filePath: string) => void;
   forceHighResTimeStamp: (timeStamp: ?number) => void;
+  startJSSamplingProfiler: () => void;
+  stopJSSamplingProfilerAndSaveToFile: (filePath: string) => void;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>(

private/react-native-fantom/runner/EnvironmentOptions.js

@@ -16,6 +16,7 @@ const VALID_ENVIRONMENT_VARIABLES = [
   'FANTOM_FORCE_TEST_MODE',
   'FANTOM_LOG_COMMANDS',
   'FANTOM_PRINT_OUTPUT',
+  'FANTOM_PROFILE_JS',
 ];
 
 /**
@@ -60,6 +61,8 @@ export const forceTestModeForBenchmarks: boolean = Boolean(
   process.env.FANTOM_FORCE_TEST_MODE,
 );
 
+export const profileJS: boolean = Boolean(process.env.FANTOM_PROFILE_JS);
+
 /**
  * Throws an error if there is an environment variable defined with the FANTOM_
  * prefix that is not recognized.

private/react-native-fantom/runner/entrypoint-template.js

@@ -21,18 +21,21 @@ module.exports = function entrypointTemplate({
   featureFlagsModulePath,
   testConfig,
   snapshotConfig,
+  jsTraceOutputPath,
 }: {
   testPath: string,
   setupModulePath: string,
   featureFlagsModulePath: string,
   testConfig: FantomTestConfig,
   snapshotConfig: SnapshotConfig,
+  jsTraceOutputPath: ?string,
 }): string {
   const constants: FantomRuntimeConstants = {
     isOSS: EnvironmentOptions.isOSS,
     isRunningFromCI: EnvironmentOptions.isCI,
     forceTestModeForBenchmarks: EnvironmentOptions.forceTestModeForBenchmarks,
     fantomConfigSummary: formatFantomConfig(testConfig),
+    jsTraceOutputPath,
   };
 
   return `/**

private/react-native-fantom/runner/formatFantomConfig.js

@@ -48,6 +48,38 @@ function formatModes(overrides: PartialFantomTestConfig) {
   return parts;
 }
 
+function formatModesShort(overrides: PartialFantomTestConfig) {
+  const parts = [];
+
+  if (
+    overrides.isNativeOptimized === false &&
+    overrides.isJsOptimized === false &&
+    overrides.isJsBytecode === false
+  ) {
+    return ['dev'];
+  } else if (
+    overrides.isNativeOptimized === true &&
+    overrides.isJsOptimized === true &&
+    overrides.isJsBytecode === true
+  ) {
+    return ['opt'];
+  }
+
+  if (overrides.isNativeOptimized != null) {
+    parts.push(overrides.isNativeOptimized ? 'native-opt' : 'native-dev');
+  }
+
+  if (overrides.isJsOptimized != null) {
+    parts.push(overrides.isJsOptimized ? 'js-opt' : 'js-dev');
+  }
+
+  if (overrides.isJsBytecode != null && overrides.isJsBytecode) {
+    parts.push('bytecode');
+  }
+
+  return parts;
+}
+
 function formatFantomHermesVariant(hermesVariant: HermesVariant): string {
   switch (hermesVariant) {
     case FantomTestConfigHermesVariant.Hermes:
@@ -70,21 +102,20 @@ function formatFantomFeatureFlag(
   return `🔐 ${flagName} = ${flagValue}`;
 }
 
-export default function formatFantomConfig(config: FantomTestConfig): string {
-  const overrides = getOverrides(config);
+function formatFantomConfigPretty(config: PartialFantomTestConfig): string {
   const parts = [];
 
-  parts.push(...formatModes(overrides));
+  parts.push(...formatModes(config));
 
-  if (overrides.hermesVariant) {
-    parts.push(formatFantomHermesVariant(overrides.hermesVariant));
+  if (config.hermesVariant) {
+    parts.push(formatFantomHermesVariant(config.hermesVariant));
   }
 
-  if (overrides.flags) {
+  if (config.flags) {
     for (const flagType of ['common', 'jsOnly', 'reactInternal'] as const) {
-      if (overrides.flags[flagType]) {
+      if (config.flags[flagType]) {
         for (const [flagName, flagValue] of Object.entries(
-          overrides.flags[flagType],
+          config.flags[flagType],
         )) {
           parts.push(formatFantomFeatureFlag(flagName, flagValue));
         }
@@ -94,3 +125,40 @@ export default function formatFantomConfig(config: FantomTestConfig): string {
 
   return parts.join(', ');
 }
+
+function formatFantomConfigShort(config: PartialFantomTestConfig): string {
+  const parts = [];
+
+  parts.push(...formatModesShort(config));
+
+  if (config.hermesVariant) {
+    parts.push((config.hermesVariant as string).toLocaleLowerCase());
+  }
+
+  if (config.flags) {
+    for (const flagType of ['common', 'jsOnly', 'reactInternal'] as const) {
+      if (config.flags[flagType]) {
+        for (const [flagName, flagValue] of Object.entries(
+          config.flags[flagType],
+        )) {
+          parts.push(`${flagName}[${String(flagValue)}]`);
+        }
+      }
+    }
+  }
+
+  return parts.join('-');
+}
+
+export default function formatFantomConfig(
+  config: FantomTestConfig,
+  options?: ?{style?: 'pretty' | 'short'},
+): string {
+  const overrides = getOverrides(config);
+
+  if (options?.style === 'short') {
+    return formatFantomConfigShort(overrides);
+  }
+
+  return formatFantomConfigPretty(overrides);
+}

private/react-native-fantom/runner/paths.js

@@ -16,6 +16,10 @@ export const NATIVE_BUILD_OUTPUT_PATH: string = path.join(
   OUTPUT_PATH,
   'native-builds',
 );
+export const JS_TRACES_OUTPUT_PATH: string = path.join(
+  OUTPUT_PATH,
+  'js-traces',
+);
 
 export function getTestBuildOutputPath(): string {
   const fantomRunID = process.env.__FANTOM_RUN_ID__;

private/react-native-fantom/runner/runner.js

@@ -14,6 +14,7 @@ import type {
   TestSuiteResult,
 } from '../runtime/setup';
 import type {TestSnapshotResults} from '../runtime/snapshotContext';
+import type {FantomTestConfig} from './getFantomTestConfigs';
 import type {
   AsyncCommandResult,
   ConsoleLogMessage,
@@ -27,7 +28,7 @@ import {run as runHermesCompiler} from './executables/hermesc';
 import {run as runFantomTester} from './executables/tester';
 import formatFantomConfig from './formatFantomConfig';
 import getFantomTestConfigs from './getFantomTestConfigs';
-import {getTestBuildOutputPath} from './paths';
+import {JS_TRACES_OUTPUT_PATH, getTestBuildOutputPath} from './paths';
 import {
   getInitialSnapshotData,
   updateSnapshotsAndGetJestSnapshotResult,
@@ -37,6 +38,7 @@ import {
   getDebugInfoFromCommandResult,
   printConsoleLog,
   runCommand,
+  symbolicateJSTrace,
   symbolicateStackTrace,
 } from './utils';
 import fs from 'fs';
@@ -50,6 +52,10 @@ import readline from 'readline';
 const TEST_BUILD_OUTPUT_PATH = getTestBuildOutputPath();
 fs.mkdirSync(TEST_BUILD_OUTPUT_PATH, {recursive: true});
 
+if (EnvironmentOptions.profileJS) {
+  fs.mkdirSync(JS_TRACES_OUTPUT_PATH, {recursive: true});
+}
+
 function buildError(
   failureDetail: FailureDetail,
   sourceMapPath: string,
@@ -267,6 +273,10 @@ module.exports = async function runTest(
       continue;
     }
 
+    const jsTraceOutputPath = EnvironmentOptions.profileJS
+      ? buildJSTracesOutputPath(testPath, testConfig, testConfigs.length > 1)
+      : null;
+
     const entrypointContents = entrypointTemplate({
       testPath: `${path.relative(TEST_BUILD_OUTPUT_PATH, testPath)}`,
       setupModulePath: `${path.relative(TEST_BUILD_OUTPUT_PATH, setupModulePath)}`,
@@ -276,6 +286,7 @@ module.exports = async function runTest(
         updateSnapshot: snapshotState._updateSnapshot,
         data: getInitialSnapshotData(snapshotState),
       },
+      jsTraceOutputPath,
     });
 
     const entrypointPath = path.join(
@@ -340,7 +351,7 @@ module.exports = async function runTest(
       rnTesterCommandResult,
     );
 
-    if (containsError(processedResult)) {
+    if (containsError(processedResult) || EnvironmentOptions.profileJS) {
       await createSourceMap({
         ...bundleOptions,
         out: sourceMapPath,
@@ -349,6 +360,15 @@ module.exports = async function runTest(
       });
     }
 
+    if (EnvironmentOptions.profileJS && jsTraceOutputPath != null) {
+      symbolicateJSTrace(jsTraceOutputPath, sourceMapPath);
+      console.info(
+        '🔥 JS sampling profiler trace saved to',
+        jsTraceOutputPath,
+        '\n',
+      );
+    }
+
     const testResultError = processedResult.error;
     if (testResultError) {
       const error = buildError(testResultError, sourceMapPath);
@@ -451,3 +471,20 @@ function containsError(testResult: TestSuiteResult): boolean {
     )
   );
 }
+
+function buildJSTracesOutputPath(
+  testPath: string,
+  testConfig: FantomTestConfig,
+  isMultiConfig: boolean,
+): string {
+  let fileName;
+
+  if (isMultiConfig) {
+    const configSummary = formatFantomConfig(testConfig, {style: 'short'});
+    fileName = `${path.basename(testPath)}-${configSummary}-${Date.now()}.cpuprofile`;
+  } else {
+    fileName = `${path.basename(testPath)}-${Date.now()}.cpuprofile`;
+  }
+
+  return path.join(JS_TRACES_OUTPUT_PATH, fileName);
+}

private/react-native-fantom/runner/utils.js

@@ -279,6 +279,68 @@ export function symbolicateStackTrace(
     .join('\n');
 }
 
+type ChromeDevToolsTraceNode = {
+  id: number,
+  callFrame: {
+    functionName: string,
+    scriptId: string,
+    url: string,
+    lineNumber: number,
+    columnNumber: number,
+    ...
+  },
+  children: Array<number>,
+  ...
+};
+
+type ChromeDevToolsTrace = {
+  samples: Array<number>,
+  timeDeltas: Array<number>,
+  nodes: Array<ChromeDevToolsTraceNode>,
+};
+
+export function symbolicateJSTrace(
+  jsTraceOutputPath: string,
+  sourceMapPath: string,
+) {
+  const traceContents: ChromeDevToolsTrace = JSON.parse(
+    fs.readFileSync(jsTraceOutputPath, 'utf8'),
+  );
+  const sourceMapData = JSON.parse(fs.readFileSync(sourceMapPath, 'utf8'));
+  const consumer = new SourceMapConsumer(sourceMapData);
+
+  for (const node of traceContents.nodes) {
+    const {lineNumber, columnNumber} = node.callFrame;
+
+    if (lineNumber === 0 || columnNumber === 0) {
+      continue;
+    }
+
+    const originalPosition = consumer.originalPositionFor({
+      line: lineNumber,
+      column: columnNumber,
+    });
+
+    if (originalPosition.name) {
+      node.callFrame.functionName = originalPosition.name;
+    }
+
+    if (originalPosition.source) {
+      node.callFrame.url = `file://${originalPosition.source}`;
+    }
+
+    if (originalPosition.line && originalPosition.line > 0) {
+      node.callFrame.lineNumber = originalPosition.line - 1;
+    }
+
+    if (originalPosition.column && originalPosition.column > 0) {
+      node.callFrame.columnNumber = originalPosition.column;
+    }
+  }
+
+  fs.writeFileSync(jsTraceOutputPath, JSON.stringify(traceContents), 'utf8');
+}
+
 export type ConsoleLogMessage = {
   type: 'console-log',
   level: 'info' | 'warn' | 'error',

private/react-native-fantom/runtime/setup.js

@@ -10,6 +10,7 @@
 
 import type {SnapshotConfig, TestSnapshotResults} from './snapshotContext';
 
+import {getConstants} from '../src/Constants';
 import expect from './expect';
 import {createMockFunction} from './mocks';
 import patchWeakRef from './patchWeakRef';
@@ -418,6 +419,33 @@ function serializeError(error: Error): FailureDetail {
   return result;
 }
 
+function runTest(): Array<TestCaseResult> {
+  const {jsTraceOutputPath} = getConstants();
+  if (jsTraceOutputPath == null) {
+    return runSuite(currentContext);
+  }
+
+  // Force the import of the native module to be lazy
+  const NativeFantom =
+    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+
+  try {
+    NativeFantom.startJSSamplingProfiler();
+  } catch (e) {
+    console.error('Could not start JS sampling profiler', e);
+  }
+
+  try {
+    return runSuite(currentContext);
+  } finally {
+    try {
+      NativeFantom.stopJSSamplingProfilerAndSaveToFile(jsTraceOutputPath);
+    } catch (e) {
+      console.error('Could not stop JS sampling profiler', e);
+    }
+  }
+}
+
 global.$$RunTests$$ = () => {
   if (testSetupError != null) {
     reportTestSuiteResult({
@@ -428,7 +456,7 @@ global.$$RunTests$$ = () => {
     });
   } else {
     reportTestSuiteResult({
-      testResults: runSuite(currentContext),
+      testResults: runTest(),
     });
   }
 };