implemented @todo: remove axios and use node-fetch

add the usage to commands.md
delete the profile-hermes.md

docs/commands.md

@@ -17,6 +17,7 @@ React Native CLI comes with following commands:
 - [`uninstall`](#uninstall)
 - [`unlink`](#unlink)
 - [`upgrade`](#upgrade)
+- [`profile-hermes`](#profile-hermes)
 
 ### `bundle`
 
@@ -546,3 +547,46 @@ Upgrade your app's template files to the specified or latest npm version using [
 Using this command is a recommended way of upgrading relatively simple React Native apps with not too many native libraries linked. The more iOS and Android build files are modified, the higher chance for a conflicts. The command will guide you on how to continue upgrade process manually in case of failure.
 
 _Note: If you'd like to upgrade using this method from React Native version lower than 0.59.0, you may use a standalone version of this CLI: `npx @react-native-community/cli upgrade`._
+
+### `profile-hermes`
+
+Usage:
+
+```sh
+react-native profile-hermes [destinationDir] <flag>
+```
+
+Pull and convert a Hermes tracing profile to Chrome tracing profile, then store it in the directory <destinationDir> of the local machine.
+
+- `destinationDir` is optional, if provided, pull the file to that directory
+  > default: pull to the current React Native app root directory
+
+#### Options
+
+#### `--fileName [string]`
+
+File name of the profile to be downloaded, eg. sampling-profiler-trace8593107139682635366.cpuprofile.
+
+> default: pull the latest file
+
+#### `--verbose`
+
+Lists commands and steps that are run internally to pull the file from Android device
+
+#### `--raw`
+
+Pulls the original Hermes tracing profile without any transformation
+
+#### `--sourcemap-path [string]`
+
+The local path to your source map file if you generated it manually, ex. `/tmp/sourcemap.json`
+
+#### `--generate-sourcemap`
+
+Generate the JS bundle and source map in `os.tmpdir()`
+
+### Notes on source map
+
+This step is recommended in order for the source map to be generated:
+
+If you are planning on building a debug APK, that will run without the packager, by invoking `./gradlew assembleDebug` you can simply set `bundleInDebug: true` in your app/build.gradle file, inside the `project.ext.react` map.

packages/cli/src/commands/profile-hermes/index.ts

@@ -53,12 +53,12 @@ export default {
     {
       name: '--verbose',
       description:
-        'Lists adb commands that are run internally when pulling the file from Android device',
+        'Lists commands and steps that are run internally when pulling the file from Android device',
     },
     {
       name: '--raw',
       description:
-        'Pull the original Hermes tracing profile without any transformation',
+        'Pulls the original Hermes tracing profile without any transformation',
     },
     {
       name: '--sourcemap-path [string]',
@@ -67,7 +67,7 @@ export default {
     },
     {
       name: '--generate-sourcemap',
-      description: 'Generate the JS bundle and source map',
+      description: 'Generates the JS bundle and source map',
     },
   ],
   examples: [

packages/cli/src/commands/profile-hermes/sourcemapUtils.ts

@@ -1,12 +1,11 @@
 import {Config} from '@react-native-community/cli-types';
-import {execSync} from 'child_process';
-import {logger} from '@react-native-community/cli-tools';
+import {logger, CLIError} from '@react-native-community/cli-tools';
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
-import axios, {AxiosResponse} from 'axios';
 import {SourceMap} from 'hermes-profile-transformer';
 import ip from 'ip';
+import nodeFetch from 'node-fetch';
 
 function getTempFilePath(filename: string) {
   return path.join(os.tmpdir(), filename);
@@ -30,26 +29,24 @@ function writeJsonSync(targetPath: string, data: any) {
   }
 }
 
-// @TODO
-// Remove AxiosResponse, return Promise<SourceMap> where SourceMap
-// is imported from the hermes-profiler-transformer
-async function getSourcemapFromServer(): Promise<AxiosResponse<SourceMap>> {
+async function getSourcemapFromServer(): Promise<SourceMap> {
+  logger.debug('Getting source maps from Metro packager server');
   const DEBUG_SERVER_PORT = '8081';
   const IP_ADDRESS = ip.address();
   const PLATFORM = 'android';
-  const requestURL = `http://${IP_ADDRESS}:${DEBUG_SERVER_PORT}/index.map?platform=${PLATFORM}&dev=true`;
-
-  // @TODO
-  // Use node-fetch instead of axios
-  // Check for return http status code, if > 400 it's an error and
-  // we should return null instead of the source map string
 
-  return (await axios.get(requestURL)) as AxiosResponse<SourceMap>;
+  const requestURL = `http://${IP_ADDRESS}:${DEBUG_SERVER_PORT}/index.map?platform=${PLATFORM}&dev=true`;
+  const result = await nodeFetch(requestURL);
+  if (result.status >= 400) {
+    logger.error('Cannot get source map from running metro server');
+    throw new CLIError(`Fetch request failed with status ${result.status}.`);
+  }
+  const data = await result.json();
+  return data as SourceMap;
 }
 
 /**
- * Generate a sourcemap either by fetching it from a running metro server
- * or by running react-native bundle with sourcemaps enables
+ * Generate a sourcemap by fetching it from a running metro server
  */
 export async function generateSourcemap(): Promise<string> {
   // fetch the source map to a temp directory
@@ -60,22 +57,14 @@ export async function generateSourcemap(): Promise<string> {
     if (logger.isVerbose()) {
       logger.debug('Using source maps from Metro packager server');
     }
-    writeJsonSync(sourceMapPath, sourceMapResult.data);
-  } else {
-    if (logger.isVerbose()) {
-      logger.debug('Generating source maps using `react-native bundle`');
-    }
-    execSync(
-      `react-native bundle --entry-file index.js --bundle-output ${getTempFilePath(
-        'index.bundle',
-      )} --sourcemap-output ${sourceMapPath}`,
+    writeJsonSync(sourceMapPath, sourceMapResult);
+    logger.info(
+      `Successfully generated the source map and stored it in ${sourceMapPath}`,
     );
+  } else {
+    logger.error('Cannot generate source maps from Metro packager server`');
   }
 
-  logger.info(
-    `Successfully generated the source map and stored it in ${sourceMapPath}`,
-  );
-
   return sourceMapPath;
 }
 
@@ -124,7 +113,7 @@ export async function findSourcemap(ctx: Config): Promise<string> {
       logger.debug('Using source maps from Metro packager server');
     }
     const tempPath = getTempFilePath('index.map');
-    writeJsonSync(tempPath, sourcemapResult.data);
+    writeJsonSync(tempPath, sourcemapResult);
 
     return tempPath;
   }