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

Author: rubennorte

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

@@ -113,7 +113,8 @@ void PerformanceTracer::collectEvents(
 
 void PerformanceTracer::reportMark(
     const std::string_view& name,
-    HighResTimeStamp start) {
+    HighResTimeStamp start,
+    folly::dynamic&& detail) {
   if (!tracingAtomic_) {
     return;
   }
@@ -123,32 +124,37 @@ void PerformanceTracer::reportMark(
     return;
   }
 
+  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 = processId_,
       .tid = oscompat::getCurrentThreadId(),
+      .args = eventArgs,
   });
 }
 
 void PerformanceTracer::reportMeasure(
     const std::string_view& name,
     HighResTimeStamp start,
     HighResDuration duration,
-    const std::optional<DevToolsTrackEntryPayload>& trackMetadata) {
+    folly::dynamic&& detail) {
   if (!tracingAtomic_) {
     return;
   }
 
   folly::dynamic beginEventArgs = folly::dynamic::object();
-  if (trackMetadata.has_value()) {
-    folly::dynamic devtoolsObject = folly::dynamic::object(
-        "devtools",
-        folly::dynamic::object("track", trackMetadata.value().track));
+  if (detail != nullptr) {
     beginEventArgs =
-        folly::dynamic::object("detail", folly::toJson(devtoolsObject));
+        folly::dynamic::object("detail", folly::toJson(std::move(detail)));
   }
 
   auto currentThreadId = oscompat::getCurrentThreadId();

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

@@ -7,7 +7,6 @@
 
 #pragma once
 
-#include "CdpTracing.h"
 #include "ConsoleTimeStamp.h"
 #include "TraceEvent.h"
 #include "TraceEventProfile.h"
@@ -60,13 +59,17 @@ class PerformanceTracer {
       const std::function<void(const folly::dynamic& eventsChunk)>&
           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
@@ -78,8 +81,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 "TimeStamp" Trace Event - a labelled entry on Performance

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

@@ -37,6 +37,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>&
@@ -142,10 +178,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
   {
@@ -160,14 +197,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
   {
@@ -269,33 +305,43 @@ 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());
+    }
   }
 }
 
 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();
 
     if (ReactPerfettoLogger::isTracing()) {
       ReactPerfettoLogger::measure(
-          entry.name, entry.startTime, entry.startTime + entry.duration);
+          entry.name,
+          entry.startTime,
+          entry.startTime + entry.duration,
+          getTrackFromDetail(detail),
+          getTrackGroupFromDetail(detail));
+    }
+
+    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/json.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);
 
   void reportMeasure(
       const std::string& name,
       HighResTimeStamp startTime,
       HighResDuration duration,
-      const std::optional<jsinspector_modern::DevToolsTrackEntryPayload>&
-          trackMetadata = std::nullopt);
+      UserTimingDetailProvider&& detailProvider);
 
   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