react-native-tvos 0.87.1-0 → 0.88.0-0rc2

package/ReactCommon/jsinspector-modern/network/NetworkHandler.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/PrivateGuard.h>
+
 #include "BoundedRequestBuffer.h"
 #include "CdpNetwork.h"
 
@@ -90,6 +92,44 @@ class NetworkHandler {
    */
   void onLoadingFailed(const std::string &requestId, bool cancelled);
 
+  /**
+   * @cdp Network.webSocketCreated
+   */
+  void onWebSocketCreated(const std::string &requestId, const std::string &url);
+
+  /**
+   * @cdp Network.webSocketWillSendHandshakeRequest
+   */
+  void onWebSocketWillSendHandshakeRequest(const std::string &requestId, const Headers &headers);
+
+  /**
+   * @cdp Network.webSocketHandshakeResponseReceived
+   */
+  void onWebSocketHandshakeResponseReceived(const std::string &requestId, uint16_t status, const Headers &headers);
+
+  /**
+   * @cdp Network.webSocketFrameSent
+   *
+   * \param payloadData The message payload. A UTF-8 string for text messages,
+   * or a base64-encoded string for binary messages.
+   * \param isBinary Whether this is a binary message.
+   */
+  void onWebSocketFrameSent(const std::string &requestId, const std::string &payloadData, bool isBinary);
+
+  /**
+   * @cdp Network.webSocketFrameReceived
+   *
+   * \param payloadData The message payload. A UTF-8 string for text messages,
+   * or a base64-encoded string for binary messages.
+   * \param isBinary Whether this is a binary message.
+   */
+  void onWebSocketFrameReceived(const std::string &requestId, const std::string &payloadData, bool isBinary);
+
+  /**
+   * @cdp Network.webSocketClosed
+   */
+  void onWebSocketClosed(const std::string &requestId);
+
   /**
    * Store the fetched response body for a text or image network response.
    *

package/ReactCommon/jsinspector-modern/network/React-jsinspectornetwork.podspec

@@ -47,4 +47,8 @@ Pod::Spec.new do |s|
 
   add_rn_third_party_dependencies(s)
   add_rncore_dependency(s)
+
+  s.dependency "React-cxxstableapi"
+
+  mark_as_react_native_build(s)
 end

package/ReactCommon/jsinspector-modern/tests/HostTargetTest.cpp

@@ -1632,11 +1632,15 @@ TEST_F(HostTargetTest, TracingDelegateIsNotifiedOnDirectTracingCall) {
   page_->stopTracing();
 }
 
-TEST_F(HostTargetProtocolTest, CaptureScreenshotNotSupportedWhenFlagDisabled) {
+TEST_F(HostTargetProtocolTest, CaptureScreenshotReturnsData) {
+  EXPECT_CALL(hostTargetDelegate_, captureScreenshot(_))
+      .WillOnce(Return(std::optional<std::string>("c2NyZWVuc2hvdA==")))
+      .RetiresOnSaturation();
   EXPECT_CALL(
       fromPage(),
       onMessage(JsonParsed(AllOf(
-          AtJsonPtr("/error/code", Eq(-32601)), AtJsonPtr("/id", Eq(1))))))
+          AtJsonPtr("/id", Eq(1)),
+          AtJsonPtr("/result/data", Eq("c2NyZWVuc2hvdA=="))))))
       .RetiresOnSaturation();
   toPage_->sendMessage(R"({
                            "id": 1,

package/ReactCommon/jsinspector-modern/tests/JsiIntegrationTest.cpp

@@ -360,7 +360,7 @@ TYPED_TEST(JsiIntegrationPortableTest, ReactNativeApplicationEnable) {
                                             "integrationName": "JsiIntegrationTest",
                                             "unstable_frameRecordingEnabled": false,
                                             "unstable_isProfilingBuild": false,
-                                            "unstable_networkInspectionEnabled": false
+                                            "unstable_networkInspectionEnabled": true
                                           }
                                         })"));
 

package/ReactCommon/jsinspector-modern/tests/NetworkReporterTest.cpp

@@ -10,6 +10,7 @@
 
 #include <folly/executors/QueuedImmediateExecutor.h>
 #include <jsinspector-modern/InspectorFlags.h>
+#include <oscompat/OSCompat.h>
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/networking/NetworkReporter.h>
 
@@ -19,9 +20,7 @@ namespace facebook::react::jsinspector_modern {
 
 namespace {
 
-struct NetworkReporterTestParams {
-  bool enableNetworkEventReporting;
-};
+struct NetworkReporterTestParams {};
 
 } // namespace
 
@@ -36,13 +35,7 @@ class NetworkReporterTestBase : public TracingTestBase<
                                     folly::QueuedImmediateExecutor>,
                                 public WithParamInterface<Params> {
  protected:
-  NetworkReporterTestBase()
-      : TracingTestBase({
-            .enableNetworkEventReporting =
-                WithParamInterface<Params>::GetParam()
-                    .enableNetworkEventReporting,
-            .networkInspectionEnabled = true,
-        }) {}
+  NetworkReporterTestBase() : TracingTestBase(InspectorFlagOverrides{}) {}
 
   void SetUp() override {
     JsiIntegrationPortableTestBase::SetUp();
@@ -464,6 +457,174 @@ TEST_P(NetworkReporterTest, testGetResponseBodyWithBase64) {
                                 })");
 }
 
+TEST_P(NetworkReporterTest, testCompleteWebSocketFlow) {
+  InSequence s;
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 1,
+                                          "result": {}
+                                        })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 1,
+                                  "method": "Network.enable"
+                                })");
+
+  const std::string requestId = "websocket-flow-request";
+
+  // Step 1: WebSocket created
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketCreated"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/url", "wss://echo.example.com/socket"),
+      AtJsonPtr("/params/initiator/type", "script"))));
+
+  NetworkReporter::getInstance().reportWebSocketCreated(
+      requestId, "wss://echo.example.com/socket");
+
+  // Step 2: Handshake request will be sent
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketWillSendHandshakeRequest"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)),
+      AtJsonPtr("/params/wallTime", Gt(0)),
+      AtJsonPtr("/params/request/headers/Origin", "https://example.com"),
+      AtJsonPtr(
+          "/params/request/headers/Sec-WebSocket-Protocol", "graphql-ws"))));
+
+  NetworkReporter::getInstance().reportWebSocketWillSendHandshakeRequest(
+      requestId,
+      Headers{
+          {"Origin", "https://example.com"},
+          {"Sec-WebSocket-Protocol", "graphql-ws"}});
+
+  // Step 3: Handshake response received
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketHandshakeResponseReceived"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)),
+      AtJsonPtr("/params/response/status", 101),
+      AtJsonPtr("/params/response/statusText", "Switching Protocols"),
+      AtJsonPtr("/params/response/headers/Upgrade", "websocket"),
+      AtJsonPtr("/params/response/headers/Connection", "Upgrade"))));
+
+  NetworkReporter::getInstance().reportWebSocketHandshakeResponseReceived(
+      requestId,
+      101,
+      Headers{{"Upgrade", "websocket"}, {"Connection", "Upgrade"}});
+
+  // Step 4: Text message sent
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketFrameSent"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)),
+      AtJsonPtr("/params/response/opcode", 1),
+      AtJsonPtr("/params/response/mask", true),
+      AtJsonPtr("/params/response/payloadData", R"({"type": "ping"})"))));
+
+  NetworkReporter::getInstance().reportWebSocketMessageSent(
+      requestId, R"({"type": "ping"})", false);
+
+  // Step 5: Binary message sent (payload is base64-encoded)
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketFrameSent"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)),
+      AtJsonPtr("/params/response/opcode", 2),
+      AtJsonPtr("/params/response/mask", true),
+      AtJsonPtr("/params/response/payloadData", "aGVsbG8="))));
+
+  NetworkReporter::getInstance().reportWebSocketMessageSent(
+      requestId, "aGVsbG8=", true);
+
+  // Step 6: Text message received
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketFrameReceived"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)),
+      AtJsonPtr("/params/response/opcode", 1),
+      AtJsonPtr("/params/response/mask", false),
+      AtJsonPtr("/params/response/payloadData", R"({"type": "pong"})"))));
+
+  NetworkReporter::getInstance().reportWebSocketMessageReceived(
+      requestId, R"({"type": "pong"})", false);
+
+  // Step 7: WebSocket closed
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketClosed"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/timestamp", Gt(0)))));
+
+  NetworkReporter::getInstance().reportWebSocketClosed(requestId);
+
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 2,
+                                          "result": {}
+                                        })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 2,
+                                  "method": "Network.disable"
+                                })");
+}
+
+TEST_P(NetworkReporterTest, testWebSocketCreatedWithInitiator) {
+  InSequence s;
+
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 0,
+                                          "result": {}
+                                      })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 0,
+                                  "method": "Debugger.enable"
+                              })");
+
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 1,
+                                          "result": {}
+                                        })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 1,
+                                  "method": "Network.enable"
+                                })");
+
+  auto& runtime = engineAdapter_->getRuntime();
+
+  auto requestId = this->eval(R"( // line 0
+    function openSocket() { // line 1
+      return globalThis.__NETWORK_REPORTER__.createDevToolsRequestId(); // line 2
+    } // line 3
+    openSocket(); // line 4
+
+    //# sourceURL=webSocketInitiatorTest.js
+  )")
+                       .asString(runtime)
+                       .utf8(runtime);
+
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.webSocketCreated"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/url", "wss://example.com/initiator"),
+      AtJsonPtr("/params/initiator/type", "script"),
+      AtJsonPtr(
+          "/params/initiator/stack/callFrames",
+          AllOf(
+              Each(AtJsonPtr("/url", "webSocketInitiatorTest.js")),
+              Contains(AllOf(
+                  AtJsonPtr("/functionName", "openSocket"),
+                  AtJsonPtr("/lineNumber", 2))))))));
+
+  NetworkReporter::getInstance().reportWebSocketCreated(
+      requestId, "wss://example.com/initiator");
+
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 2,
+                                          "result": {}
+                                        })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 2,
+                                  "method": "Network.disable"
+                                })");
+}
+
 TEST_P(NetworkReporterTest, testNetworkEventsWhenDisabled) {
   EXPECT_FALSE(NetworkReporter::getInstance().isDebuggingEnabled());
 
@@ -488,6 +649,18 @@ TEST_P(NetworkReporterTest, testNetworkEventsWhenDisabled) {
       "disabled-request", 512, 512);
   NetworkReporter::getInstance().reportResponseEnd("disabled-request", 1024);
   NetworkReporter::getInstance().reportRequestFailed("disabled-request", false);
+
+  NetworkReporter::getInstance().reportWebSocketCreated(
+      "disabled-websocket", "wss://example.com/disabled");
+  NetworkReporter::getInstance().reportWebSocketWillSendHandshakeRequest(
+      "disabled-websocket", {});
+  NetworkReporter::getInstance().reportWebSocketHandshakeResponseReceived(
+      "disabled-websocket", 101, {});
+  NetworkReporter::getInstance().reportWebSocketMessageSent(
+      "disabled-websocket", "hello", false);
+  NetworkReporter::getInstance().reportWebSocketMessageReceived(
+      "disabled-websocket", "world", false);
+  NetworkReporter::getInstance().reportWebSocketClosed("disabled-websocket");
 }
 
 TEST_P(NetworkReporterTest, testRequestWillBeSentWithInitiator) {
@@ -623,13 +796,10 @@ TEST_P(NetworkReporterTest, testTwoSessionsReceiveNetworkEvents) {
 }
 
 struct NetworkReporterTracingTestParams {
-  bool enableNetworkEventReporting;
   bool enableNetworkDomain;
 
   operator NetworkReporterTestParams() const {
-    return NetworkReporterTestParams{
-        .enableNetworkEventReporting = enableNetworkEventReporting,
-    };
+    return NetworkReporterTestParams{};
   }
 };
 
@@ -802,19 +972,12 @@ TEST_P(
           AtJsonPtr("/args/data/didFail", false))));
 }
 
-static const auto networkReporterTestParamValues = testing::Values(
-    NetworkReporterTestParams{.enableNetworkEventReporting = true},
-    NetworkReporterTestParams{
-        .enableNetworkEventReporting = false,
-    });
+static const auto networkReporterTestParamValues =
+    testing::Values(NetworkReporterTestParams{});
 
 static const auto networkReporterTracingTestParamValues = testing::Values(
-    NetworkReporterTracingTestParams{
-        .enableNetworkEventReporting = true,
-        .enableNetworkDomain = true},
-    NetworkReporterTracingTestParams{
-        .enableNetworkEventReporting = true,
-        .enableNetworkDomain = false});
+    NetworkReporterTracingTestParams{.enableNetworkDomain = true},
+    NetworkReporterTracingTestParams{.enableNetworkDomain = false});
 
 INSTANTIATE_TEST_SUITE_P(
     NetworkReporterTest,

package/ReactCommon/jsinspector-modern/tests/TracingTest.cpp

@@ -37,7 +37,15 @@ class TracingTest : public TracingTestBase<
 TEST_F(TracingTest, EnablesSamplingProfilerOnlyCategoryIsSpecified) {
   InSequence s;
 
+  const auto runSamplingWorkload = [this]() {
+    eval(R"(
+      const start = Date.now();
+      while (Date.now() - start < 10) {}
+    )");
+  };
+
   startTracing({});
+  runSamplingWorkload();
   auto allTraceEvents = endTracingAndCollectEvents();
 
   EXPECT_THAT(
@@ -47,6 +55,7 @@ TEST_F(TracingTest, EnablesSamplingProfilerOnlyCategoryIsSpecified) {
           AtJsonPtr("/cat", "disabled-by-default-v8.cpu_profiler")))));
 
   startTracing({tracing::Category::JavaScriptSampling});
+  runSamplingWorkload();
   allTraceEvents = endTracingAndCollectEvents();
 
   EXPECT_THAT(

package/ReactCommon/jsinspector-modern/tests/utils/InspectorFlagOverridesGuard.cpp

@@ -41,23 +41,6 @@ class ReactNativeFeatureFlagsOverrides
         ReactNativeFeatureFlagsDefaults::fuseboxFrameRecordingEnabled());
   }
 
-  bool fuseboxNetworkInspectionEnabled() override {
-    return overrides_.networkInspectionEnabled.value_or(
-        ReactNativeFeatureFlagsDefaults::fuseboxNetworkInspectionEnabled());
-  }
-
-  bool enableBridgelessArchitecture() override {
-    // NOTE: Network support is gated by (enableBridgelessArchitecture &&
-    // fuseboxNetworkInspectionEnabled).
-    return overrides_.networkInspectionEnabled.value_or(
-        ReactNativeFeatureFlagsDefaults::enableBridgelessArchitecture());
-  }
-
-  bool enableNetworkEventReporting() override {
-    return overrides_.enableNetworkEventReporting.value_or(
-        ReactNativeFeatureFlagsDefaults::enableNetworkEventReporting());
-  }
-
  private:
   InspectorFlagOverrides overrides_;
 };

package/ReactCommon/jsinspector-modern/tests/utils/InspectorFlagOverridesGuard.h

@@ -20,10 +20,8 @@ struct InspectorFlagOverrides {
   // NOTE: Keep these entries in sync with ReactNativeFeatureFlagsOverrides in
   // the implementation file.
   std::optional<bool> screenshotCaptureEnabled;
-  std::optional<bool> enableNetworkEventReporting;
   std::optional<bool> frameRecordingEnabled;
   std::optional<bool> fuseboxEnabledRelease;
-  std::optional<bool> networkInspectionEnabled;
 };
 
 /**

package/ReactCommon/jsinspector-modern/tracing/CMakeLists.txt

@@ -21,6 +21,7 @@ target_link_libraries(jsinspector_tracing
         jsi
         jsinspector_network
         oscompat
+        react_cxxstableapi
         react_timing
         react_utils
 )

package/ReactCommon/jsinspector-modern/tracing/ConsoleTimeStamp.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include <jsi/JSIDynamic.h>
 #include <jsi/jsi.h>
 #include <react/timing/primitives.h>

package/ReactCommon/jsinspector-modern/tracing/EventLoopReporter.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #if defined(REACT_NATIVE_DEBUGGER_ENABLED)
 #include <react/timing/primitives.h>
 #endif

package/ReactCommon/jsinspector-modern/tracing/FrameTimingSequence.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include "TraceEvent.h"
 
 #include <react/timing/primitives.h>
@@ -30,12 +32,14 @@ struct FrameTimingSequence {
       ThreadId threadId,
       HighResTimeStamp beginTimestamp,
       HighResTimeStamp endTimestamp,
-      std::optional<std::vector<uint8_t>> screenshot = std::nullopt)
+      std::optional<std::vector<uint8_t>> screenshot = std::nullopt,
+      HighResDuration vsyncInterval = HighResDuration::zero())
       : id(id),
         threadId(threadId),
         beginTimestamp(beginTimestamp),
         endTimestamp(endTimestamp),
-        screenshot(std::move(screenshot))
+        screenshot(std::move(screenshot)),
+        vsyncInterval(vsyncInterval)
   {
   }
 
@@ -56,6 +60,12 @@ struct FrameTimingSequence {
    * Optional screenshot data captured during the frame.
    */
   std::optional<std::vector<uint8_t>> screenshot;
+
+  /**
+   * Duration of one vsync interval from the device's display refresh rate.
+   * Zero when unknown (e.g. the initial synthetic frame).
+   */
+  HighResDuration vsyncInterval = HighResDuration::zero();
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing

package/ReactCommon/jsinspector-modern/tracing/HostTracingProfile.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include "FrameTimingSequence.h"
 #include "InstanceTracingProfile.h"
 #include "RuntimeSamplingProfile.h"

package/ReactCommon/jsinspector-modern/tracing/HostTracingProfileSerializer.cpp

@@ -10,6 +10,8 @@
 #include "TraceEventGenerator.h"
 #include "TraceEventSerializer.h"
 
+#include <algorithm>
+
 namespace facebook::react::jsinspector_modern::tracing {
 
 namespace {
@@ -20,6 +22,11 @@ namespace {
  */
 constexpr int FALLBACK_LAYER_TREE_ID = 1;
 
+// Default vsync interval (60 Hz), used as a fallback when the device's
+// actual refresh rate is unknown (e.g. the initial synthetic frame).
+const auto DEFAULT_VSYNC_INTERVAL =
+    HighResDuration::fromNanoseconds(16'667'000);
+
 } // namespace
 
 /* static */ void HostTracingProfileSerializer::emitAsDataCollectedChunks(
@@ -104,11 +111,87 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
       TraceEventSerializer::estimateJsonSize(serializedSetLayerTreeId);
   chunk.push_back(std::move(serializedSetLayerTreeId));
 
+  // Filter out frames that started before recording began. On Android,
+  // FrameMetrics may deliver frames from app startup that predate the recording
+  // session; on iOS the first CADisplayLink callback reports sender.timestamp
+  // (the previous vsync) which can be before the recording start. These would
+  // otherwise appear as large pre-recording render frames in the timeline.
+  frameTimings.erase(
+      std::remove_if(
+          frameTimings.begin(),
+          frameTimings.end(),
+          [&recordingStartTimestamp](const FrameTimingSequence& ft) {
+            return ft.beginTimestamp < recordingStartTimestamp;
+          }),
+      frameTimings.end());
+
+  if (frameTimings.empty()) {
+    chunkCallback(std::move(chunk));
+    return;
+  }
+
+  // Sort frames by beginTimestamp to handle out-of-order arrivals caused by
+  // async screenshot encoding. The initial synthetic frame may arrive in the
+  // buffer after real frames because its screenshot encoding takes longer than
+  // one vsync (~16ms). Sorting ensures the idle-gap detection loop below sees
+  // frames in chronological order.
+  std::sort(
+      frameTimings.begin(),
+      frameTimings.end(),
+      [](const FrameTimingSequence& a, const FrameTimingSequence& b) {
+        return a.beginTimestamp < b.beginTimestamp;
+      });
+
+  // Compute the next available sequence ID for synthetic frames (idle frames
+  // and dropped frames).
+  FrameSequenceId nextSyntheticSeqId = 0;
+  for (const auto& ft : frameTimings) {
+    nextSyntheticSeqId = std::max(nextSyntheticSeqId, ft.id + 1);
+  }
+
+  std::optional<HighResTimeStamp> prevEndTimestamp;
+
   for (auto&& frameTimingSequence : frameTimings) {
     // Serialize all events for this frame.
     folly::dynamic frameEvents = folly::dynamic::array();
     size_t totalFrameBytes = 0;
 
+    // Detect idle period: gap between previous frame's end and this frame's
+    // begin exceeding one vsync interval. Emit NeedsBeginFrameChanged +
+    // BeginFrame to fill the gap. Chrome DevTools renders a BeginFrame
+    // without a corresponding DrawFrame as an "Idle frame".
+    auto minIdleGap =
+        frameTimingSequence.vsyncInterval > HighResDuration::zero()
+        ? frameTimingSequence.vsyncInterval
+        : DEFAULT_VSYNC_INTERVAL;
+    if (prevEndTimestamp.has_value() &&
+        (frameTimingSequence.beginTimestamp - *prevEndTimestamp) > minIdleGap) {
+      auto needsBeginFrameEvent =
+          TraceEventGenerator::createNeedsBeginFrameChangedEvent(
+              FALLBACK_LAYER_TREE_ID,
+              *prevEndTimestamp,
+              processId,
+              frameTimingSequence.threadId);
+      auto serializedNeedsBeginFrame =
+          TraceEventSerializer::serialize(std::move(needsBeginFrameEvent));
+      totalFrameBytes +=
+          TraceEventSerializer::estimateJsonSize(serializedNeedsBeginFrame);
+      frameEvents.push_back(std::move(serializedNeedsBeginFrame));
+
+      auto idleBeginEvent = TraceEventGenerator::createIdleBeginFrameEvent(
+          nextSyntheticSeqId++,
+          FALLBACK_LAYER_TREE_ID,
+          *prevEndTimestamp,
+          processId,
+          frameTimingSequence.threadId);
+
+      auto serializedIdleBegin =
+          TraceEventSerializer::serialize(std::move(idleBeginEvent));
+      totalFrameBytes +=
+          TraceEventSerializer::estimateJsonSize(serializedIdleBegin);
+      frameEvents.push_back(std::move(serializedIdleBegin));
+    }
+
     auto [beginDrawingEvent, endDrawingEvent] =
         TraceEventGenerator::createFrameTimingsEvents(
             frameTimingSequence.id,
@@ -155,6 +238,8 @@ constexpr int FALLBACK_LAYER_TREE_ID = 1;
       chunk.push_back(std::move(frameEvent));
     }
     currentChunkBytes += totalFrameBytes;
+
+    prevEndTimestamp = frameTimingSequence.endTimestamp;
   }
 
   if (!chunk.empty()) {

package/ReactCommon/jsinspector-modern/tracing/HostTracingProfileSerializer.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include "FrameTimingSequence.h"
 #include "HostTracingProfile.h"
 #include "TraceEvent.h"

package/ReactCommon/jsinspector-modern/tracing/InstanceTracingProfile.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include "TraceEvent.h"
 
 namespace facebook::react::jsinspector_modern::tracing {

package/ReactCommon/jsinspector-modern/tracing/PerformanceTracer.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include "ConsoleTimeStamp.h"
 #include "TraceEvent.h"
 #include "TraceEventProfile.h"

package/ReactCommon/jsinspector-modern/tracing/PerformanceTracerSection.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include <folly/dynamic.h>
 
 #include <jsinspector-modern/tracing/PerformanceTracer.h>

package/ReactCommon/jsinspector-modern/tracing/ProfileTreeNode.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <react/cxxstableapi/FrameworksGuard.h>
+
 #include <utility>
 
 #include <jsinspector-modern/tracing/RuntimeSamplingProfile.h>