Add JS API for allocating network request IDs, capturing call stacks (facebook#54051)

Summary:

Adds the private, experimental `__NETWORK_REPORTER__.createDevToolsRequestId()` JavaScript method behind the Fusebox network inspection feature flag.

`createDevToolsRequestId()` returns a unique string ID for a network request, and records the current call stack as the request's [initiator](https://cdpstatus.reactnative.dev/devtools-protocol/tot/Network#type-Initiator). If the native networking layer passes the same request ID into the C++ `NetworkReporter::reportRequestStart` method, the corresponding CDP [`requestWillBeSent`](https://cdpstatus.reactnative.dev/devtools-protocol/tot/Network#event-requestWillBeSent) event will contain the stack trace.

Changelog: [Internal]

Differential Revision: D83238216

Author: motiz88

packages/react-native/ReactCommon/jsinspector-modern/CMakeLists.txt

@@ -19,13 +19,15 @@ target_merge_so(jsinspector)
 target_include_directories(jsinspector PUBLIC ${REACT_COMMON_DIR})
 
 target_link_libraries(jsinspector
+        boost
         folly_runtime
         glog
         jsinspector_network
         jsinspector_tracing
         react_featureflags
         runtimeexecutor
         reactperflogger
+        react_utils
 )
 target_compile_reactnative_options(jsinspector PRIVATE)
 if(${CMAKE_BUILD_TYPE} MATCHES Debug OR REACT_NATIVE_DEBUG_OPTIMIZED)

packages/react-native/ReactCommon/jsinspector-modern/React-jsinspector.podspec

@@ -46,6 +46,7 @@ Pod::Spec.new do |s|
 
   resolve_use_frameworks(s, module_name: module_name)
 
+  add_dependency(s, "boost")
   add_dependency(s, "React-oscompat") # Needed for USE_FRAMEWORKS=dynamic
   s.dependency "React-featureflags"
   add_dependency(s, "React-runtimeexecutor", :additional_framework_paths => ["platform/ios"])
@@ -55,7 +56,7 @@ Pod::Spec.new do |s|
   add_dependency(s, "React-jsinspectortracing", :framework_name => 'jsinspector_moderntracing')
   s.dependency "React-perflogger", version
   add_dependency(s, "React-oscompat")
-
+  add_dependency(s, "React-utils", :additional_framework_paths => ["react/utils/platform/ios"])
   if use_hermes()
     s.dependency "hermes-engine"
   end

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTarget.cpp

@@ -54,7 +54,12 @@ RuntimeTarget::RuntimeTarget(
 void RuntimeTarget::installGlobals() {
   // NOTE: RuntimeTarget::installConsoleHandler is in RuntimeTargetConsole.cpp
   installConsoleHandler();
+  // NOTE: RuntimeTarget::installDebuggerSessionObserver is in
+  // RuntimeTargetDebuggerSessionObserver.cpp
   installDebuggerSessionObserver();
+  // NOTE: RuntimeTarget::installNetworkReporterAPI is in
+  // RuntimeTargetNetwork.cpp
+  installNetworkReporterAPI();
 }
 
 std::shared_ptr<RuntimeAgent> RuntimeTarget::createAgent(

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTarget.h

@@ -299,6 +299,12 @@ class JSINSPECTOR_EXPORT RuntimeTarget
    */
   void installDebuggerSessionObserver();
 
+  /**
+   * Installs the private __NETWORK_REPORTER__ object on the Runtime's
+   * global object.
+   */
+  void installNetworkReporterAPI();
+
   /**
    * Propagates the debugger session state change to the JavaScript via calling
    * onStatusChange on __DEBUGGER_SESSION_OBSERVER__.
@@ -311,6 +317,12 @@ class JSINSPECTOR_EXPORT RuntimeTarget
    */
   void emitDebuggerSessionDestroyed();
 
+  /**
+   * \returns a globally unique ID for a network request.
+   * May be called from any thread as long as the RuntimeTarget is valid.
+   */
+  std::string createNetworkRequestId();
+
   // Necessary to allow RuntimeAgent to access RuntimeTarget's internals in a
   // controlled way (i.e. only RuntimeTargetController gets friend access, while
   // RuntimeAgent itself doesn't).

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTargetNetwork.cpp

@@ -0,0 +1,103 @@
+/*
+ * 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 <jsinspector-modern/InspectorFlags.h>
+#include <jsinspector-modern/RuntimeTarget.h>
+#include <jsinspector-modern/network/NetworkHandler.h>
+
+#include <boost/uuid/random_generator.hpp>
+#include <boost/uuid/uuid.hpp>
+#include <boost/uuid/uuid_io.hpp>
+
+using namespace facebook::jsi;
+using namespace std::string_literals;
+
+namespace facebook::react::jsinspector_modern {
+
+namespace {
+
+/**
+ * JS `Object.create()`
+ */
+Object objectCreate(Runtime& runtime, Value prototype) {
+  auto objectGlobal = runtime.global().getPropertyAsObject(runtime, "Object");
+  auto createFn = objectGlobal.getPropertyAsFunction(runtime, "create");
+  return createFn.callWithThis(runtime, objectGlobal, prototype)
+      .getObject(runtime);
+}
+
+/**
+ * JS `Object.freeze
+ */
+Object objectFreeze(Runtime& runtime, Object object) {
+  auto objectGlobal = runtime.global().getPropertyAsObject(runtime, "Object");
+  auto freezeFn = objectGlobal.getPropertyAsFunction(runtime, "freeze");
+  return freezeFn.callWithThis(runtime, objectGlobal, object)
+      .getObject(runtime);
+}
+
+} // namespace
+
+void RuntimeTarget::installNetworkReporterAPI() {
+  if (!InspectorFlags::getInstance().getNetworkInspectionEnabled()) {
+    return;
+  }
+  auto jsiCreateDevToolsRequestId = [selfWeak = weak_from_this()](
+                                        Runtime& runtime,
+                                        const Value& /*thisVal*/,
+                                        const Value* /*args*/,
+                                        size_t /*count*/) -> Value {
+    std::optional<std::string> devToolsRequestId;
+    tryExecuteSync(selfWeak, [&](RuntimeTarget& self) {
+      devToolsRequestId = self.createNetworkRequestId();
+      // Q: Why is it safe to use self.delegate_ here?
+      // A: Because the caller of InspectorTarget::registerRuntime
+      // is explicitly required to guarantee that the delegate not
+      // only outlives the target, but also outlives all JS code
+      // execution that occurs on the JS thread.
+      auto stackTrace = self.delegate_.captureStackTrace(runtime);
+      // TODO(moti): Instead of checking the singleton state,
+      // directly check whether the current target has a session
+      // with the Network domain enabled.
+      if (NetworkHandler::getInstance().isEnabled()) {
+        auto cdpStackTrace = self.delegate_.serializeStackTrace(*stackTrace);
+        if (cdpStackTrace) {
+          NetworkHandler::getInstance().recordRequestInitiatorStack(
+              *devToolsRequestId, std::move(*cdpStackTrace));
+        }
+      }
+    });
+    if (!devToolsRequestId) {
+      throw JSError(runtime, "React Native Runtime is shutting down");
+    }
+    return String::createFromUtf8(runtime, *devToolsRequestId);
+  };
+
+  jsExecutor_([selfWeak = weak_from_this(),
+               selfExecutor = executorFromThis(),
+               jsiCreateDevToolsRequestId =
+                   std::move(jsiCreateDevToolsRequestId)](Runtime& runtime) {
+    auto globalObj = runtime.global();
+    auto networkReporterApi = objectCreate(runtime, nullptr);
+    networkReporterApi.setProperty(
+        runtime,
+        "createDevToolsRequestId",
+        Function::createFromHostFunction(
+            runtime,
+            PropNameID::forAscii(runtime, "createDevToolsRequestId"),
+            0,
+            jsiCreateDevToolsRequestId));
+    networkReporterApi = objectFreeze(runtime, std::move(networkReporterApi));
+    globalObj.setProperty(runtime, "__NETWORK_REPORTER__", networkReporterApi);
+  });
+}
+
+std::string RuntimeTarget::createNetworkRequestId() {
+  return boost::uuids::to_string(boost::uuids::random_generator()());
+}
+
+} // namespace facebook::react::jsinspector_modern

packages/react-native/ReactCommon/jsinspector-modern/ScopedExecutor.h

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <react/utils/OnScopeExit.h>
 #include <cassert>
 #include <functional>
 #include <memory>
@@ -94,4 +95,32 @@ class EnableExecutorFromThis : public std::enable_shared_from_this<Self> {
   VoidExecutor baseExecutor_;
 };
 
+/**
+ * Synchronously executes a callback if the given object is still alive,
+ * and keeps the object alive at least until the callback returns, without
+ * moving ownership of the object itself across threads.
+ *
+ * The caller is responsible for all thread safety concerns outside of the
+ * lifetime of the object itself (e.g. the safety of calling particular methods
+ * on the object).
+ */
+template <typename ExecutorEnabledType>
+  requires std::derived_from<
+      ExecutorEnabledType,
+      EnableExecutorFromThis<ExecutorEnabledType>>
+static void tryExecuteSync(
+    std::weak_ptr<ExecutorEnabledType> selfWeak,
+    std::invocable<ExecutorEnabledType&> auto func) {
+  if (auto self = selfWeak.lock()) {
+    auto selfExecutor = self->executorFromThis();
+    OnScopeExit onScopeExit{[self, selfExecutor = std::move(selfExecutor)]() {
+      // To ensure we never destroy `self` on the wrong thread, send
+      // our shared_ptr back to the correct executor.
+      selfExecutor([self = std::move(self)](auto&) { (void)self; });
+    }};
+
+    func(*self);
+  }
+}
+
 } // namespace facebook::react::jsinspector_modern

packages/react-native/ReactCommon/jsinspector-modern/tests/NetworkReporterTest.cpp

@@ -44,9 +44,37 @@ class NetworkReporterTest : public JsiIntegrationPortableTestBase<
   void SetUp() override {
     JsiIntegrationPortableTestBase::SetUp();
     connect();
+    EXPECT_CALL(
+        fromPage(),
+        onMessage(
+            JsonParsed(AllOf(AtJsonPtr("/method", "Debugger.scriptParsed")))))
+        .Times(AnyNumber())
+        .WillRepeatedly(Invoke<>([this](const std::string& message) {
+          auto params = folly::parseJson(message);
+          // Store the script ID and URL for later use.
+          scriptUrlsById_.emplace(
+              params.at("params").at("scriptId").getString(),
+              params.at("params").at("url").getString());
+        }));
+  }
+
+  template <typename InnerMatcher>
+  Matcher<folly::dynamic> ScriptIdMapsTo(InnerMatcher urlMatcher) {
+    return ResultOf(
+        [this](const auto& id) { return getScriptUrlById(id.getString()); },
+        urlMatcher);
   }
 
  private:
+  std::optional<std::string> getScriptUrlById(const std::string& scriptId) {
+    auto it = scriptUrlsById_.find(scriptId);
+    if (it == scriptUrlsById_.end()) {
+      return std::nullopt;
+    }
+    return it->second;
+  }
+
+  std::unordered_map<std::string, std::string> scriptUrlsById_;
 };
 
 TEST_P(NetworkReporterTest, testNetworkEnableDisable) {
@@ -455,6 +483,104 @@ TEST_P(NetworkReporterTest, testNetworkEventsWhenDisabled) {
   NetworkReporter::getInstance().reportRequestFailed("disabled-request", false);
 }
 
+TEST_P(NetworkReporterTest, testRequestWillBeSentWithInitiator) {
+  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"
+                                })");
+  RequestInfo requestInfo;
+  requestInfo.url = "https://example.com/initiator";
+  requestInfo.httpMethod = "GET";
+
+  auto& runtime = engineAdapter_->getRuntime();
+
+  auto requestId = this->eval(R"( // line 0
+    function inner() { // line 1
+      return globalThis.__NETWORK_REPORTER__.createDevToolsRequestId(); // line 2
+    } // line 3
+    function outer() { // line 4
+      return inner(); // line 5
+    } // line 6
+    outer(); // line 7
+
+    //# sourceURL=initiatorTest.js
+  )")
+                       .asString(runtime)
+                       .utf8(runtime);
+
+  this->expectMessageFromPage(JsonParsed(AllOf(
+      AtJsonPtr("/method", "Network.requestWillBeSent"),
+      AtJsonPtr("/params/requestId", requestId),
+      AtJsonPtr("/params/initiator/type", "script"),
+      AtJsonPtr(
+          "/params/initiator/stack/callFrames",
+          AllOf(
+              Each(AllOf(
+                  AtJsonPtr("/url", "initiatorTest.js"),
+                  AtJsonPtr(
+                      "/scriptId", this->ScriptIdMapsTo("initiatorTest.js")))),
+              ElementsAre(
+                  AllOf(
+                      AtJsonPtr("/functionName", "inner"),
+                      AtJsonPtr("/lineNumber", 2)),
+                  AllOf(
+                      AtJsonPtr("/functionName", "outer"),
+                      AtJsonPtr("/lineNumber", 5)),
+                  AllOf(
+                      AtJsonPtr("/functionName", "global"),
+                      AtJsonPtr("/lineNumber", 7))))))));
+
+  NetworkReporter::getInstance().reportRequestStart(
+      requestId, requestInfo, 0, std::nullopt);
+
+  this->expectMessageFromPage(JsonEq(R"({
+                                          "id": 2,
+                                          "result": {}
+                                        })"));
+  this->toPage_->sendMessage(R"({
+                                  "id": 2,
+                                  "method": "Network.disable"
+                                })");
+}
+
+TEST_P(NetworkReporterTest, testCreateRequestIdWithoutNetworkDomain) {
+  InSequence s;
+
+  auto& runtime = engineAdapter_->getRuntime();
+
+  auto id1 = this->eval(R"(
+    globalThis.__NETWORK_REPORTER__.createDevToolsRequestId();
+  )")
+                 .asString(runtime)
+                 .utf8(runtime);
+  EXPECT_NE(id1, "");
+
+  auto id2 = this->eval(R"(
+    globalThis.__NETWORK_REPORTER__.createDevToolsRequestId();
+  )")
+                 .asString(runtime)
+                 .utf8(runtime);
+
+  EXPECT_NE(id2, "");
+
+  EXPECT_NE(id1, id2);
+}
+
 static const auto paramValues = testing::Values(
     Params{.enableNetworkEventReporting = true},
     Params{