Record Microtasks step (#50586)

Summary:
Pull Request resolved: #50586

# Changelog: [Internal]

We are going to record microtasks phase of the Event Loop.

RAII reporter that was added in D69399955 will be updated to support phase as a parameter.

There is one downside of the current implementation. Every Event Loop task will have a corresponding "Run Microtasks" block displayed, even if the microtasks queue was empty. There is no API in `jsi` that would allow us to get the size of the queue. If we had that, we could emit this event only when there is something in a microtasks queue.

The good this is that these frames usually have duration of 1-2 microseconds, so they are not visible, until user fully zooms in.

Reviewed By: rubennorte

Differential Revision: D72649816

fbshipit-source-id: d597f5b75aaf0975b14f61d2aa28b9c8bc34f4d5

Author: hoxyq

packages/react-native/ReactCommon/jsinspector-modern/tracing/EventLoopTaskReporter.cpp renamed to packages/react-native/ReactCommon/jsinspector-modern/tracing/EventLoopReporter.cpp

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#include "EventLoopTaskReporter.h"
+#include "EventLoopReporter.h"
 
 #if defined(REACT_NATIVE_DEBUGGER_ENABLED)
 #include "PerformanceTracer.h"
@@ -25,24 +25,37 @@ inline uint64_t formatTimePointToUnixTimestamp(
 
 } // namespace
 
-EventLoopTaskReporter::EventLoopTaskReporter()
-    : startTimestamp_(std::chrono::steady_clock::now()) {}
+EventLoopReporter::EventLoopReporter(EventLoopPhase phase)
+    : startTimestamp_(std::chrono::steady_clock::now()), phase_(phase) {}
 
-EventLoopTaskReporter::~EventLoopTaskReporter() {
+EventLoopReporter::~EventLoopReporter() {
   PerformanceTracer& performanceTracer = PerformanceTracer::getInstance();
   if (performanceTracer.isTracing()) {
     auto end = std::chrono::steady_clock::now();
-    performanceTracer.reportEventLoopTask(
-        formatTimePointToUnixTimestamp(startTimestamp_),
-        formatTimePointToUnixTimestamp(end));
+    switch (phase_) {
+      case EventLoopPhase::Task:
+        performanceTracer.reportEventLoopTask(
+            formatTimePointToUnixTimestamp(startTimestamp_),
+            formatTimePointToUnixTimestamp(end));
+        break;
+
+      case EventLoopPhase::Microtasks:
+        performanceTracer.reportEventLoopMicrotasks(
+            formatTimePointToUnixTimestamp(startTimestamp_),
+            formatTimePointToUnixTimestamp(end));
+        break;
+
+      default:
+        break;
+    }
   }
 }
 
 #else
 
-EventLoopTaskReporter::EventLoopTaskReporter() {}
+EventLoopReporter::EventLoopReporter(EventLoopPhase phase) {}
 
-EventLoopTaskReporter::~EventLoopTaskReporter() {}
+EventLoopReporter::~EventLoopReporter() {}
 
 #endif
 

packages/react-native/ReactCommon/jsinspector-modern/tracing/EventLoopTaskReporter.h renamed to packages/react-native/ReactCommon/jsinspector-modern/tracing/EventLoopReporter.h

@@ -11,20 +11,26 @@
 
 namespace facebook::react::jsinspector_modern::tracing {
 
-struct EventLoopTaskReporter {
+enum class EventLoopPhase {
+  Task,
+  Microtasks,
+};
+
+struct EventLoopReporter {
  public:
-  EventLoopTaskReporter();
+  explicit EventLoopReporter(EventLoopPhase phase);
 
-  EventLoopTaskReporter(const EventLoopTaskReporter&) = delete;
-  EventLoopTaskReporter(EventLoopTaskReporter&&) = delete;
-  EventLoopTaskReporter& operator=(const EventLoopTaskReporter&) = delete;
-  EventLoopTaskReporter& operator=(EventLoopTaskReporter&&) = delete;
+  EventLoopReporter(const EventLoopReporter&) = delete;
+  EventLoopReporter(EventLoopReporter&&) = delete;
+  EventLoopReporter& operator=(const EventLoopReporter&) = delete;
+  EventLoopReporter& operator=(EventLoopReporter&&) = delete;
 
-  ~EventLoopTaskReporter();
+  ~EventLoopReporter();
 
  private:
 #if defined(REACT_NATIVE_DEBUGGER_ENABLED)
   std::chrono::steady_clock::time_point startTimestamp_;
+  EventLoopPhase phase_;
 #endif
 };
 

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

@@ -264,6 +264,29 @@ void PerformanceTracer::reportEventLoopTask(uint64_t start, uint64_t end) {
   });
 }
 
+void PerformanceTracer::reportEventLoopMicrotasks(
+    uint64_t start,
+    uint64_t end) {
+  if (!tracing_) {
+    return;
+  }
+
+  std::lock_guard lock(mutex_);
+  if (!tracing_) {
+    return;
+  }
+
+  buffer_.push_back(TraceEvent{
+      .name = "RunMicrotasks",
+      .cat = "v8.execute",
+      .ph = 'X',
+      .ts = start,
+      .pid = oscompat::getCurrentProcessId(),
+      .tid = oscompat::getCurrentThreadId(),
+      .dur = end - start,
+  });
+}
+
 folly::dynamic PerformanceTracer::getSerializedRuntimeProfileTraceEvent(
     uint64_t threadId,
     uint16_t profileId,

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

@@ -101,6 +101,12 @@ class PerformanceTracer {
    */
   void reportEventLoopTask(uint64_t start, uint64_t end);
 
+  /**
+   * Record Microtasks phase of the Event Loop tick. Will be represented as a
+   * "Run Microtasks" block under a task.
+   */
+  void reportEventLoopMicrotasks(uint64_t start, uint64_t end);
+
   /**
    * Create and serialize Profile Trace Event.
    * \return serialized Trace Event that represents a Profile for CDT.

packages/react-native/ReactCommon/react/renderer/runtimescheduler/RuntimeScheduler_Modern.cpp

@@ -9,7 +9,7 @@
 #include "SchedulerPriorityUtils.h"
 
 #include <cxxreact/TraceSection.h>
-#include <jsinspector-modern/tracing/EventLoopTaskReporter.h>
+#include <jsinspector-modern/tracing/EventLoopReporter.h>
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/consistency/ScopedShadowTreeRevisionLock.h>
 #include <react/timing/primitives.h>
@@ -307,8 +307,8 @@ void RuntimeScheduler_Modern::runEventLoopTick(
     Task& task,
     RuntimeSchedulerTimePoint taskStartTime) {
   TraceSection s("RuntimeScheduler::runEventLoopTick");
-  [[maybe_unused]] jsinspector_modern::tracing::EventLoopTaskReporter
-      performanceReporter;
+  jsinspector_modern::tracing::EventLoopReporter performanceReporter(
+      jsinspector_modern::tracing::EventLoopPhase::Task);
 
   ScopedShadowTreeRevisionLock revisionLock(
       shadowTreeRevisionConsistencyManager_);
@@ -395,12 +395,14 @@ void RuntimeScheduler_Modern::executeTask(
  */
 void RuntimeScheduler_Modern::performMicrotaskCheckpoint(
     jsi::Runtime& runtime) {
-  TraceSection s("RuntimeScheduler::performMicrotaskCheckpoint");
-
   if (performingMicrotaskCheckpoint_) {
     return;
   }
 
+  TraceSection s("RuntimeScheduler::performMicrotaskCheckpoint");
+  jsinspector_modern::tracing::EventLoopReporter performanceReporter(
+      jsinspector_modern::tracing::EventLoopPhase::Microtasks);
+
   performingMicrotaskCheckpoint_ = true;
   OnScopeExit restoreFlag([&]() { performingMicrotaskCheckpoint_ = false; });