Add support for details field and custom tracks in performance.mark and performance.measure for DevTools (facebook#52613)

Summary:
Pull Request resolved: facebook#52613

Changelog: [internal]

This adds first-class support for the `detail` field in `performance.mark` and `performance.measure`.

Now that we have access the JS entry in native, we can access the `detail` field to propagate it to DevTools (and use it to extract track names for Perfetto).

In order to avoid the performance overhead of always having to extract the `detail` field from the entry, this is done lazily only if we're actively profiling with DevTools or Perfetto.

Reviewed By: sbuggay

Differential Revision: D78340911

fbshipit-source-id: 383dd1cb6fcc8a04be9e65038503986f196e23c9

Author: rubennorte

packages/react-native/ReactCommon/jsinspector-modern/tracing/CdpTracing.h

@@ -114,8 +114,9 @@ bool PerformanceTracer::stopTracingAndCollectEvents(
 
 void PerformanceTracer::reportMark(
     const std::string_view& name,
-    HighResTimeStamp start) {
-  if (!tracing_) {
+    HighResTimeStamp start,
+    folly::dynamic&& detail) {
+  if (!tracingAtomic_) {
     return;
   }
 
@@ -124,26 +125,41 @@ void PerformanceTracer::reportMark(
     return;
   }
 
-  buffer_.push_back(TraceEvent{
+  folly::dynamic eventArgs = folly::dynamic::object();
+  if (detail != nullptr) {
+    eventArgs = folly::dynamic::object(
+        "data",
+        folly::dynamic::object("detail", folly::toJson(std::move(detail))));
+  }
+
+  buffer_.emplace_back(TraceEvent{
       .name = std::string(name),
       .cat = "blink.user_timing",
       .ph = 'I',
       .ts = start,
-      .pid = PID, // FIXME: This should be the real process ID.
-      .tid = USER_TIMINGS_DEFAULT_TRACK, // FIXME: This should be the real
-                                         // thread ID.
+      .pid = processId_,
+      .tid = oscompat::getCurrentThreadId(),
+      .args = eventArgs,
   });
 }
 
 void PerformanceTracer::reportMeasure(
     const std::string_view& name,
     HighResTimeStamp start,
     HighResDuration duration,
-    const std::optional<DevToolsTrackEntryPayload>& trackMetadata) {
-  if (!tracing_) {
+    folly::dynamic&& detail) {
+  if (!tracingAtomic_) {
     return;
   }
 
+  folly::dynamic beginEventArgs = folly::dynamic::object();
+  if (detail != nullptr) {
+    beginEventArgs =
+        folly::dynamic::object("detail", folly::toJson(std::move(detail)));
+  }
+
+  auto currentThreadId = oscompat::getCurrentThreadId();
+
   std::lock_guard<std::mutex> lock(mutex_);
   if (!tracing_) {
     return;

packages/react-native/ReactCommon/jsinspector-modern/tracing/PerformanceTracer.cpp

@@ -7,9 +7,9 @@
 
 #pragma once
 
-#include "CdpTracing.h"
-
-#include <react/timing/primitives.h>
+#include "ConsoleTimeStamp.h"
+#include "TraceEvent.h"
+#include "TraceEventProfile.h"
 
 #include <react/timing/primitives.h>
 
@@ -106,15 +106,19 @@ class PerformanceTracer {
    */
   void collectEvents(
       const std::function<void(const folly::dynamic& eventsChunk)>&
-          resultCallback);
+          resultCallback,
+      uint16_t chunkSize);
 
   /**
    * Record a `Performance.mark()` event - a labelled timestamp. If not
    * currently tracing, this is a no-op.
    *
    * See https://w3c.github.io/user-timing/#mark-method.
    */
-  void reportMark(const std::string_view& name, HighResTimeStamp start);
+  void reportMark(
+      const std::string_view& name,
+      HighResTimeStamp start,
+      folly::dynamic&& detail = nullptr);
 
   /**
    * Record a `Performance.measure()` event - a labelled duration. If not
@@ -126,8 +130,7 @@ class PerformanceTracer {
       const std::string_view& name,
       HighResTimeStamp start,
       HighResDuration duration,
-      const std::optional<DevToolsTrackEntryPayload>& trackMetadata =
-          std::nullopt);
+      folly::dynamic&& detail = nullptr);
 
   /**
    * Record a corresponding Trace Event for OS-level process.

packages/react-native/ReactCommon/jsinspector-modern/tracing/PerformanceTracer.h

@@ -13,6 +13,7 @@
 
 #include <cxxreact/JSExecutor.h>
 #include <cxxreact/ReactMarker.h>
+#include <jsi/JSIDynamic.h>
 #include <jsi/instrumentation.h>
 #include <react/performance/timeline/PerformanceEntryReporter.h>
 #include <react/performance/timeline/PerformanceObserver.h>
@@ -111,6 +112,19 @@ std::shared_ptr<PerformanceObserver> tryGetObserver(
   return observerWrapper ? observerWrapper->observer : nullptr;
 }
 
+PerformanceEntryReporter::UserTimingDetailProvider getDetailProviderFromEntry(
+    jsi::Runtime& rt,
+    jsi::Value& entry) {
+  return [&rt, &entry]() -> folly::dynamic {
+    try {
+      auto detail = entry.asObject(rt).getProperty(rt, "detail");
+      return jsi::dynamicFromValue(rt, detail);
+    } catch (jsi::JSIException& ex) {
+      return nullptr;
+    }
+  };
+}
+
 } // namespace
 
 NativePerformance::NativePerformance(std::shared_ptr<CallInvoker> jsInvoker)
@@ -124,18 +138,19 @@ void NativePerformance::reportMark(
     jsi::Runtime& rt,
     std::string name,
     HighResTimeStamp startTime,
-    jsi::Value /*entry*/) {
-  PerformanceEntryReporter::getInstance()->reportMark(name, startTime);
+    jsi::Value entry) {
+  PerformanceEntryReporter::getInstance()->reportMark(
+      name, startTime, getDetailProviderFromEntry(rt, entry));
 }
 
 void NativePerformance::reportMeasure(
     jsi::Runtime& rt,
     std::string name,
     HighResTimeStamp startTime,
     HighResDuration duration,
-    jsi::Value /*entry*/) {
+    jsi::Value entry) {
   PerformanceEntryReporter::getInstance()->reportMeasure(
-      name, startTime, duration);
+      name, startTime, duration, getDetailProviderFromEntry(rt, entry));
 }
 
 std::optional<double> NativePerformance::getMarkTime(

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

@@ -19,4 +19,5 @@ target_link_libraries(react_performance_timeline
         jsinspector_tracing
         reactperflogger
         react_featureflags
-        react_timing)
+        react_timing
+        folly_runtime)

packages/react-native/ReactCommon/react/performance/timeline/CMakeLists.txt

@@ -36,6 +36,42 @@ std::vector<PerformanceEntryType> getSupportedEntryTypesInternal() {
   return supportedEntryTypes;
 }
 
+std::optional<std::string> getTrackFromDetail(folly::dynamic& detail) {
+  if (!detail.isObject()) {
+    return std::nullopt;
+  }
+
+  auto maybeDevtools = detail["devtools"];
+  if (!maybeDevtools.isObject()) {
+    return std::nullopt;
+  }
+
+  auto maybeTrack = maybeDevtools["track"];
+  if (!maybeTrack.isString()) {
+    return std::nullopt;
+  }
+
+  return maybeTrack.asString();
+}
+
+std::optional<std::string> getTrackGroupFromDetail(folly::dynamic& detail) {
+  if (!detail.isObject()) {
+    return std::nullopt;
+  }
+
+  auto maybeDevtools = detail["devtools"];
+  if (!maybeDevtools.isObject()) {
+    return std::nullopt;
+  }
+
+  auto maybeTrackGroup = maybeDevtools["trackGroup"];
+  if (!maybeTrackGroup.isString()) {
+    return std::nullopt;
+  }
+
+  return maybeTrackGroup.asString();
+}
+
 } // namespace
 
 std::shared_ptr<PerformanceEntryReporter>&
@@ -141,10 +177,11 @@ void PerformanceEntryReporter::clearEntries(
 
 void PerformanceEntryReporter::reportMark(
     const std::string& name,
-    const HighResTimeStamp startTime) {
+    const HighResTimeStamp startTime,
+    UserTimingDetailProvider&& detailProvider) {
   const auto entry = PerformanceMark{{.name = name, .startTime = startTime}};
 
-  traceMark(entry);
+  traceMark(entry, std::move(detailProvider));
 
   // Add to buffers & notify observers
   {
@@ -159,14 +196,13 @@ void PerformanceEntryReporter::reportMeasure(
     const std::string& name,
     HighResTimeStamp startTime,
     HighResDuration duration,
-    const std::optional<jsinspector_modern::DevToolsTrackEntryPayload>&
-        trackMetadata) {
+    UserTimingDetailProvider&& detailProvider) {
   const auto entry = PerformanceMeasure{
       {.name = std::string(name),
        .startTime = startTime,
        .duration = duration}};
 
-  traceMeasure(entry);
+  traceMeasure(entry, std::move(detailProvider));
 
   // Add to buffers & notify observers
   {
@@ -268,33 +304,45 @@ void PerformanceEntryReporter::reportResourceTiming(
   observerRegistry_->queuePerformanceEntry(entry);
 }
 
-void PerformanceEntryReporter::traceMark(const PerformanceMark& entry) const {
+void PerformanceEntryReporter::traceMark(
+    const PerformanceMark& entry,
+    UserTimingDetailProvider&& detailProvider) const {
   auto& performanceTracer =
       jsinspector_modern::tracing::PerformanceTracer::getInstance();
   if (ReactPerfettoLogger::isTracing() || performanceTracer.isTracing()) {
-    if (performanceTracer.isTracing()) {
-      performanceTracer.reportMark(entry.name, entry.startTime);
-    }
-
     if (ReactPerfettoLogger::isTracing()) {
       ReactPerfettoLogger::mark(entry.name, entry.startTime);
     }
+
+    if (performanceTracer.isTracing()) {
+      performanceTracer.reportMark(
+          entry.name,
+          entry.startTime,
+          detailProvider != nullptr ? detailProvider() : nullptr);
+    }
   }
 }
 
 void PerformanceEntryReporter::traceMeasure(
-    const PerformanceMeasure& entry) const {
+    const PerformanceMeasure& entry,
+    UserTimingDetailProvider&& detailProvider) const {
   auto& performanceTracer =
       jsinspector_modern::tracing::PerformanceTracer::getInstance();
   if (performanceTracer.isTracing() || ReactPerfettoLogger::isTracing()) {
-    if (performanceTracer.isTracing()) {
-      performanceTracer.reportMeasure(
-          entry.name, entry.startTime, entry.duration);
-    }
+    auto detail = detailProvider != nullptr ? detailProvider() : nullptr;
 
     if (ReactPerfettoLogger::isTracing()) {
       ReactPerfettoLogger::measure(
-          entry.name, entry.startTime, entry.startTime + entry.duration);
+          entry.name,
+          entry.startTime,
+          entry.startTime + entry.duration,
+          detail != nullptr ? getTrackFromDetail(detail) : std::nullopt,
+          detail != nullptr ? getTrackGroupFromDetail(detail) : std::nullopt);
+    }
+
+    if (performanceTracer.isTracing()) {
+      performanceTracer.reportMeasure(
+          entry.name, entry.startTime, entry.duration, std::move(detail));
     }
   }
 }

packages/react-native/ReactCommon/react/performance/timeline/PerformanceEntryReporter.cpp

@@ -11,7 +11,7 @@
 #include "PerformanceEntryKeyedBuffer.h"
 #include "PerformanceObserverRegistry.h"
 
-#include <jsinspector-modern/tracing/CdpTracing.h>
+#include <folly/dynamic.h>
 #include <react/timing/primitives.h>
 
 #include <memory>
@@ -86,14 +86,18 @@ class PerformanceEntryReporter {
   std::optional<HighResTimeStamp> getMarkTime(
       const std::string& markName) const;
 
-  void reportMark(const std::string& name, HighResTimeStamp startTime);
+  using UserTimingDetailProvider = std::function<folly::dynamic()>;
+
+  void reportMark(
+      const std::string& name,
+      HighResTimeStamp startTime,
+      UserTimingDetailProvider&& detailProvider = nullptr);
 
   void reportMeasure(
       const std::string& name,
       HighResTimeStamp startTime,
       HighResDuration duration,
-      const std::optional<jsinspector_modern::DevToolsTrackEntryPayload>&
-          trackMetadata = std::nullopt);
+      UserTimingDetailProvider&& detailProvider = nullptr);
 
   void reportEvent(
       std::string name,
@@ -167,8 +171,12 @@ class PerformanceEntryReporter {
     throw std::logic_error("Unhandled PerformanceEntryType");
   }
 
-  void traceMark(const PerformanceMark& entry) const;
-  void traceMeasure(const PerformanceMeasure& entry) const;
+  void traceMark(
+      const PerformanceMark& entry,
+      UserTimingDetailProvider&& detailProvider) const;
+  void traceMeasure(
+      const PerformanceMeasure& entry,
+      UserTimingDetailProvider&& detailProvider) const;
 };
 
 } // namespace facebook::react