Create ReactPerfLogger to log to Perfetto and Fusebox (#46793)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46793

Currently performance logging has several problems:
- We have widly different APIs. It's hard to know which to use for what.
- Most of these APIs don't allow retroactive timestamp which is important for hero logging and react flame graphs
- These APIs aren't accessible from JS/C++/Java/Koltin (this part will be fixed in another diff)
- Logging doesn't go to the right place. It either only goes to Systrace, or Perfetto but with broken async timeline etc...

This diff start addressing the problem by refactoring. Currently performance.measure/performance.mark are the best APIs. Let's start with refactoring them so that we can call them directly without the otherwise PerformanceEntry side effects.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D63560473

fbshipit-source-id: 86755b3e8491a7cf6919173a07ba9421cd30e663

packages/react-native/ReactCommon/cxxreact/JSExecutor.cpp

@@ -11,9 +11,7 @@
 
 #include <folly/Conv.h>
 #include <jsinspector-modern/ReactCdp.h>
-
-#include <react/timing/primitives.h>
-#include <chrono>
+#include <reactperflogger/ReactPerfLogger.h>
 
 namespace facebook::react {
 
@@ -27,7 +25,7 @@ std::string JSExecutor::getSyntheticBundlePath(
 }
 
 double JSExecutor::performanceNow() {
-  return chronoToDOMHighResTimeStamp(std::chrono::steady_clock::now());
+  return ReactPerfLogger::performanceNow();
 }
 
 jsinspector_modern::RuntimeTargetDelegate&

packages/react-native/ReactCommon/react/nativemodule/webperformance/NativePerformance.cpp

@@ -16,11 +16,8 @@
 #include <jsi/instrumentation.h>
 #include <react/performance/timeline/PerformanceEntryReporter.h>
 #include <react/performance/timeline/PerformanceObserver.h>
+#include <reactperflogger/ReactPerfLogger.h>
 
-#if __has_include(<reactperflogger/fusebox/FuseboxTracer.h>)
-#include <reactperflogger/fusebox/FuseboxTracer.h>
-#define HAS_FUSEBOX
-#endif
 #include "NativePerformance.h"
 
 #ifdef RN_DISABLE_OSS_PLUGIN_HEADER
@@ -124,18 +121,10 @@ void NativePerformance::mark(
     jsi::Runtime& rt,
     std::string name,
     double startTime) {
-  PerformanceEntryReporter::getInstance()->reportMark(name, startTime);
+  auto [trackName, eventName] = parseTrackName(name);
+  ReactPerfLogger::mark(eventName, startTime, trackName);
 
-#ifdef WITH_PERFETTO
-  if (TRACE_EVENT_CATEGORY_ENABLED("react-native")) {
-    auto [trackName, eventName] = parseTrackName(name);
-    TRACE_EVENT_INSTANT(
-        "react-native",
-        perfetto::DynamicString(eventName.data(), eventName.size()),
-        getPerfettoWebPerfTrackSync(trackName),
-        performanceNowToPerfettoTraceTime(startTime));
-  }
-#endif
+  PerformanceEntryReporter::getInstance()->reportMark(name, startTime);
 }
 
 void NativePerformance::measure(
@@ -148,29 +137,13 @@ void NativePerformance::measure(
     std::optional<std::string> endMark) {
   auto [trackName, eventName] = parseTrackName(name);
 
-#ifdef HAS_FUSEBOX
-  FuseboxTracer::getFuseboxTracer().addEvent(
-      eventName, (uint64_t)startTime, (uint64_t)endTime, trackName);
-#endif
+  // TODO T190600850 support startMark/endMark
+  if (!startMark && !endMark) {
+    ReactPerfLogger::measure(eventName, startTime, endTime, trackName);
+  }
 
   PerformanceEntryReporter::getInstance()->reportMeasure(
       eventName, startTime, endTime, duration, startMark, endMark);
-
-#ifdef WITH_PERFETTO
-  if (TRACE_EVENT_CATEGORY_ENABLED("react-native")) {
-    // TODO T190600850 support startMark/endMark
-    if (!startMark && !endMark) {
-      auto track = getPerfettoWebPerfTrackAsync(trackName);
-      TRACE_EVENT_BEGIN(
-          "react-native",
-          perfetto::DynamicString(eventName.data(), eventName.size()),
-          track,
-          performanceNowToPerfettoTraceTime(startTime));
-      TRACE_EVENT_END(
-          "react-native", track, performanceNowToPerfettoTraceTime(endTime));
-    }
-  }
-#endif
 }
 
 void NativePerformance::clearMarks(

packages/react-native/ReactCommon/reactperflogger/reactperflogger/ReactPerfLogger.cpp

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ReactPerfLogger.h"
+
+#include <react/timing/primitives.h>
+#if __has_include(<reactperflogger/fusebox/FuseboxTracer.h>)
+#include <reactperflogger/fusebox/FuseboxTracer.h>
+#define HAS_FUSEBOX
+#endif
+#include <chrono>
+
+#include "ReactPerfetto.h"
+
+namespace facebook::react {
+
+/* static */ void ReactPerfLogger::measure(
+    const std::string_view& eventName,
+    double startTime,
+    double endTime,
+    const std::string_view& trackName) {
+#ifdef HAS_FUSEBOX
+  FuseboxTracer::getFuseboxTracer().addEvent(
+      eventName, (uint64_t)startTime, (uint64_t)endTime, trackName);
+#endif
+
+#ifdef WITH_PERFETTO
+  if (TRACE_EVENT_CATEGORY_ENABLED("react-native")) {
+    auto track = getPerfettoWebPerfTrackAsync(std::string(trackName));
+    TRACE_EVENT_BEGIN(
+        "react-native",
+        perfetto::DynamicString(eventName.data(), eventName.size()),
+        track,
+        performanceNowToPerfettoTraceTime(startTime));
+    TRACE_EVENT_END(
+        "react-native", track, performanceNowToPerfettoTraceTime(endTime));
+  }
+#endif
+}
+
+/* static */ void ReactPerfLogger::mark(
+    const std::string_view& eventName,
+    double startTime,
+    const std::string_view& trackName) {
+  // TODO(T203046480) Support mark in FuseboxTracer
+
+#ifdef WITH_PERFETTO
+  if (TRACE_EVENT_CATEGORY_ENABLED("react-native")) {
+    TRACE_EVENT_INSTANT(
+        "react-native",
+        perfetto::DynamicString(eventName.data(), eventName.size()),
+        getPerfettoWebPerfTrackSync(std::string(trackName)),
+        performanceNowToPerfettoTraceTime(startTime));
+  }
+#endif
+}
+
+/* static */ double ReactPerfLogger::performanceNow() {
+  return chronoToDOMHighResTimeStamp(std::chrono::steady_clock::now());
+}
+} // namespace facebook::react

packages/react-native/ReactCommon/reactperflogger/reactperflogger/ReactPerfLogger.h

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <reactperflogger/ReactPerfettoCategories.h>
+#include <string>
+
+namespace facebook::react {
+
+class ReactPerfLogger {
+ public:
+  static void mark(
+      const std::string_view& eventName,
+      double startTime,
+      const std::string_view& trackName);
+
+  /**
+   * This accepts performance events that should go to internal tracing
+   * frameworks like Perfetto, and should go to DevTools like Fusebox.
+   */
+  static void measure(
+      const std::string_view& eventName,
+      double startTime,
+      double endTime,
+      const std::string_view& trackName);
+
+  static double performanceNow();
+};
+
+} // namespace facebook::react