Detect non-Fusebox frontends and log a message (#43574)

Summary:
Pull Request resolved: #43574

Changelog: [Internal]

Once we start rolling out the Fusebox backend, users might still try to use the debugger frontends they're used to, for which we can't guarantee reliability. Let's detect this and log a message letting them know about the supported Fusebox launch flows.

Reviewed By: huntie

Differential Revision: D55122115

fbshipit-source-id: a17c0c6b9140059f489e0852fe673306fb6ef8f5

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

@@ -45,7 +45,7 @@ void HostAgent::handleRequest(const cdp::PreparsedRequest& req) {
   if (req.method == "Log.enable") {
     sessionState_.isLogDomainEnabled = true;
 
-    if (sessionState_.isFuseboxClientDetected) {
+    if (fuseboxClientType_ == FuseboxClientType::Fusebox) {
       sendFuseboxNotice();
     }
 
@@ -66,6 +66,14 @@ void HostAgent::handleRequest(const cdp::PreparsedRequest& req) {
   } else if (req.method == "Runtime.enable") {
     sessionState_.isRuntimeDomainEnabled = true;
 
+    if (fuseboxClientType_ == FuseboxClientType::Unknown) {
+      // Since we know the Fusebox frontend sends
+      // FuseboxClient.setClientMetadata before enabling the Runtime domain, we
+      // can conclude that we're dealing with some other client.
+      fuseboxClientType_ = FuseboxClientType::NonFusebox;
+      sendNonFuseboxNotice();
+    }
+
     shouldSendOKResponse = true;
     isFinishedHandlingRequest = false;
   } else if (req.method == "Runtime.disable") {
@@ -100,7 +108,7 @@ void HostAgent::handleRequest(const cdp::PreparsedRequest& req) {
     shouldSendOKResponse = true;
     isFinishedHandlingRequest = true;
   } else if (req.method == "FuseboxClient.setClientMetadata") {
-    sessionState_.isFuseboxClientDetected = true;
+    fuseboxClientType_ = FuseboxClientType::Fusebox;
 
     if (sessionState_.isLogDomainEnabled) {
       sendFuseboxNotice();
@@ -136,6 +144,18 @@ void HostAgent::sendFuseboxNotice() {
       kFuseboxNotice, {"font-family: sans-serif;", "font-family: monospace;"});
 }
 
+void HostAgent::sendNonFuseboxNotice() {
+  static constexpr auto kNonFuseboxNotice =
+      ANSI_COLOR_BG_YELLOW ANSI_WEIGHT_BOLD
+      "NOTE: " ANSI_WEIGHT_RESET
+      "You are using an unsupported debugging client. "
+      "Use the Dev Menu in your app (or type `j` in the Metro terminal) to open the latest, supported React Native debugger."sv;
+
+  std::vector<std::string> args;
+  args.emplace_back(kNonFuseboxNotice);
+  sendConsoleMessage({ConsoleAPIType::kInfo, args});
+}
+
 void HostAgent::sendInfoLogEntry(
     std::string_view text,
     std::initializer_list<std::string_view> args) {

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

@@ -62,6 +62,8 @@ class HostAgent final {
   void setCurrentInstanceAgent(std::shared_ptr<InstanceAgent> agent);
 
  private:
+  enum class FuseboxClientType { Unknown, Fusebox, NonFusebox };
+
   /**
    * Send a simple Log.entryAdded notification with the given
    * \param text. You must ensure that the frontend has enabled Log
@@ -76,6 +78,7 @@ class HostAgent final {
       std::initializer_list<std::string_view> args = {});
 
   void sendFuseboxNotice();
+  void sendNonFuseboxNotice();
 
   /**
    * Send a console message to the frontend, or buffer it to be sent later.
@@ -86,6 +89,7 @@ class HostAgent final {
   HostTargetController& targetController_;
   const HostTarget::SessionMetadata sessionMetadata_;
   std::shared_ptr<InstanceAgent> instanceAgent_;
+  FuseboxClientType fuseboxClientType_{FuseboxClientType::Unknown};
 
   /**
    * A shared reference to the session's state. This is only safe to access

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

@@ -36,8 +36,6 @@ struct SessionState {
   std::unordered_map<std::string, ExecutionContextSelectorSet>
       subscribedBindings;
 
-  bool isFuseboxClientDetected{false};
-
   /**
    * Messages logged through the HostAgent::sendConsoleMessage and
    * InstanceAgent::sendConsoleMessage utilities that have not yet been sent to