RuntimeExecutor: Fix sync js execution from main thread

Summary:
# Problem

Sync rendering/events (i.e: execute js now below), when used in conjunction with js -> ui sync calls, can deadlock react native:

## Deadlock #1
**Main thread**: execute js now:
  * Main thread puts a block on the js queue, to capture the runtime.
 * Main thread then then goes to sleep, waiting for runtime to be captured

**JS thread**: execute ui code synchronously:
* Js thread schedules a block on the ui thread
* Js thread then goes to sleep, waiting for that block to execute.
* **The application deadlocks**

| {F1978009555} |  {F1978009612} |

## Deadlock #2
**JS thread**: execute ui code synchronously:
* Js thread schedules a block on the ui thread
* Js thread then goes to sleep waiting for that block to execute.

**Main thread**: execute js now:
* Main thread puts a block on the js queue, to capture the runtime.
* Main thread then then goes to sleep, waiting for runtime to be captured
* **The application deadlocks.**

|  {F1978009690}  | {F1978009701} |

# Changes
This diff attempts to fix those deadlocks. How:
* This diff introduces a stateful "execute js now" coordinator.
* In "execute ui code synchronously" (js thread):
   * Before going to sleep, the js thread posts its ui work to the "execute js now" coordinator.
* In "execute js now" (main thread):
   * Before trying to capture the runtime, the main thread executes "pending ui work", if it exists.
   * While the main thread is sleeping, waiting for runtime capture, it can be woken up, and asked to execute "pending ui work."

## Mitigation: Deadlock #1
**Main thread**: execute js now:
* Main thread puts a block on the js queue, to capture the runtime.
* Main thread then then goes to sleep, waiting for runtime to be captured

**JS Thread**: execute ui code synchronously:
* Js thread schedules this block on the ui thread.
* ***New***: Js thread also assigns this block to the coordinator. *And wakes up the main thread*.
* Js thread goes to sleep.

The main thread wakes up:
* Main thread **executes** the ui block assigned to the coordinator. **This cancels the ui block scheduled on the main queue.**
* Main thread goes back to sleep.
* The js thread wakes up, moves on to the next task.

The runtime is captured by the main thread.

| {F1978010383} | {F1978010363} |  {F1978010371} |  {F1978010379}

## Mitigation: Deadlock #2
**JS Thread**: execute ui code synchronously:
* Js thread schedules this block on the ui thread.
* ***New***: Js thread also assigns this block to the coordinator. *And wakes up the main thread*.
* Js thread goes to sleep.

**Main thread**: execute js now
* Main thread executes the ui block immediately. (This cancels the ui block on the main queue).
* Js thread wakes up and moves onto the next task.

Main thread captures the runtime.

|  {F1978010525}  |  {F1978010533} |  {F1978010542} |

Differential Revision: D74769326

Author: RSNara

packages/react-native/React/Base/RCTUtils.mm

@@ -19,6 +19,7 @@
 #import <CommonCrypto/CommonCrypto.h>
 
 #import <React/RCTUtilsUIOverride.h>
+#import <ReactCommon/RuntimeExecutorUtils.h>
 #import "RCTAssert.h"
 #import "RCTLog.h"
 
@@ -295,6 +296,11 @@ void RCTExecuteOnMainQueue(dispatch_block_t block)
   }
 }
 
+static BOOL RCTIsJSThread()
+{
+  return [[NSThread currentThread].name containsString:@"JavaScript"];
+}
+
 // Please do not use this method
 // unless you know what you are doing.
 void RCTUnsafeExecuteOnMainQueueSync(dispatch_block_t block)
@@ -311,7 +317,16 @@ void RCTUnsafeExecuteOnMainQueueSyncWithError(dispatch_block_t block, NSString *
     return;
   }
 
-  if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
+  if (facebook::react::ReactNativeFeatureFlags::saferMainQueueSyncDispatch()) {
+    if (RCTIsJSThread()) {
+      auto uiTask = facebook::react::postPotentiallyDeadlockingUITask(block);
+      dispatch_async(dispatch_get_main_queue(), ^{
+        uiTask->run();
+      });
+      uiTask->waitUntilDone();
+      return;
+    }
+  } else if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
     RCTLogError(
         @"RCTUnsafeExecuteOnMainQueueSync: %@",
         context ?: @"Sync dispatches to the main queue can deadlock React Native.");
@@ -340,7 +355,16 @@ static void RCTUnsafeExecuteOnMainQueueOnceSync(dispatch_once_t *onceToken, disp
     return;
   }
 
-  if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
+  if (facebook::react::ReactNativeFeatureFlags::saferMainQueueSyncDispatch()) {
+    if (RCTIsJSThread()) {
+      auto uiTask = facebook::react::postPotentiallyDeadlockingUITask(block);
+      dispatch_async(dispatch_get_main_queue(), ^{
+        uiTask->run();
+      });
+      uiTask->waitUntilDone();
+      return;
+    }
+  } else if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
     RCTLogError(@"RCTUnsafeExecuteOnMainQueueOnceSync: Sync dispatches to the main queue can deadlock React Native.");
   }
 

packages/react-native/ReactCommon/runtimeexecutor/platform/ios/ReactCommon/RuntimeExecutorSyncUIThreadUtils.h

@@ -8,6 +8,7 @@
 #include <ReactCommon/RuntimeExecutor.h>
 
 #include <jsi/jsi.h>
+#include <future>
 
 namespace facebook::react {
 
@@ -34,4 +35,8 @@ DataT executeSynchronouslyOnSameThread_CAN_DEADLOCK(
 
   return data;
 }
+
+std::future<void> schedulePotentiallyDeadlockingUITask(
+    std::function<void()> runnable);
+
 } // namespace facebook::react

packages/react-native/ReactCommon/runtimeexecutor/platform/ios/ReactCommon/RuntimeExecutorSyncUIThreadUtils.mm

@@ -5,66 +5,122 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <Foundation/Foundation.h>
+
 #import <ReactCommon/RuntimeExecutorSyncUIThreadUtils.h>
-#include <mutex>
-#include <thread>
+#import <react/debug/react_native_assert.h>
+#import <react/utils/OnScopeExit.h>
+#import <functional>
+#import <mutex>
+
+namespace {
+struct UITask {
+  std::promise<void> _isDone;
+  std::mutex _mutex;
+  std::function<void()> _uiWork;
+  std::atomic_bool _hasStarted;
+
+ public:
+  UITask(std::function<void()> uiWork) : _uiWork(uiWork), _hasStarted(false) {}
+
+  void run()
+  {
+    bool expected = false;
+    if (!_hasStarted.compare_exchange_strong(expected, true)) {
+      return;
+    }
+    facebook::react::OnScopeExit onScopeExit(^{
+      _uiWork = nil;
+      _isDone.set_value();
+    });
+    _uiWork();
+  }
+
+  bool hasStarted()
+  {
+    return _hasStarted.load();
+  }
+
+  std::future<void> getFuture()
+  {
+    return _isDone.get_future();
+  }
+};
+
+static std::mutex _mutex;
+static std::condition_variable _cv;
+
+// Global state
+static bool _isRunningPendingUITask = false;
+static std::shared_ptr<UITask> _pendingUITask;
+
+void runPendingUITask()
+{
+  facebook::react::OnScopeExit onScopeExit([&]() {
+    _pendingUITask = nullptr;
+    _isRunningPendingUITask = false;
+  });
+  _isRunningPendingUITask = true;
+  _pendingUITask->run();
+}
+} // namespace
 
 namespace facebook::react {
-/**
- * Example order of events (when not a sync call in runtimeExecutor
- * jsWork):
- * - [UI thread] Lock all mutexes at start
- * - [UI thread] Schedule "runtime capture block" on js thread
- * - [UI thread] Wait for runtime capture: runtimeCaptured.lock()
- * - [JS thread] Capture runtime by setting runtimePtr
- * - [JS thread] Signal runtime captured: runtimeCaptured.unlock()
- * - [UI thread] Call jsWork using runtimePtr
- * - [JS thread] Wait until jsWork done: jsWorkDone.lock()
- * - [UI thread] Signal jsWork done: jsWorkDone.unlock()
- * - [UI thread] Wait until runtime capture block finished:
- *               runtimeCaptureBlockDone.lock()
- * - [JS thread] Signal runtime capture block is finished:
- *               runtimeCaptureBlockDone.unlock()
- */
 void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
     const RuntimeExecutor &runtimeExecutor,
     std::function<void(jsi::Runtime &runtime)> &&jsWork) noexcept
 {
-  // Note: We need the third mutex to get back to the main thread before
-  // the lambda is finished (because all mutexes are allocated on the stack).
+  react_native_assert([[NSThread currentThread] isMainThread] && !_isRunningPendingUITask);
 
-  std::mutex runtimeCaptured;
+  jsi::Runtime *runtime = nullptr;
   std::mutex jsWorkDone;
-  std::mutex runtimeCaptureBlockDone;
-
-  runtimeCaptured.lock();
   jsWorkDone.lock();
-  runtimeCaptureBlockDone.lock();
 
-  jsi::Runtime *runtimePtr;
+  {
+    std::unique_lock<std::mutex> lock(_mutex);
+    if (_pendingUITask) {
+      runPendingUITask();
+    }
+
+    runtimeExecutor([&](jsi::Runtime &rt) {
+      {
+        std::lock_guard<std::mutex> lock(_mutex);
+        runtime = &rt;
+        _cv.notify_one();
+      }
 
-  auto threadId = std::this_thread::get_id();
-  auto runtimeCaptureBlock = [&](jsi::Runtime &runtime) {
-    runtimePtr = &runtime;
+      // Block the js thread until jsWork finishes on calling thread
+      jsWorkDone.lock();
+    });
 
-    if (threadId == std::this_thread::get_id()) {
-      // In case of a synchronous call, we should unlock mutexes and return.
-      runtimeCaptured.unlock();
-      runtimeCaptureBlockDone.unlock();
-      return;
-    }
+    while (true) {
+      _cv.wait(lock, [&] { return runtime != nullptr || _pendingUITask != nullptr; });
 
-    runtimeCaptured.unlock();
-    // `jsWork` is called somewhere here.
-    jsWorkDone.lock();
-    runtimeCaptureBlockDone.unlock();
-  };
-  runtimeExecutor(std::move(runtimeCaptureBlock));
+      if (_pendingUITask != nullptr) {
+        runPendingUITask();
+      } else {
+        break;
+      }
+    }
+  }
 
-  runtimeCaptured.lock();
-  jsWork(*runtimePtr);
+  jsWork(*runtime);
   jsWorkDone.unlock();
-  runtimeCaptureBlockDone.lock();
+}
+
+std::future<void> schedulePotentiallyDeadlockingUITask(std::function<void()> work)
+{
+  std::lock_guard<std::mutex> lock(_mutex);
+  react_native_assert((!_pendingUITask || _pendingUITask->hasStarted()));
+
+  auto uiTask = std::make_shared<UITask>(work);
+  dispatch_async(dispatch_get_main_queue(), ^{
+    uiTask->run();
+  });
+
+  _pendingUITask = uiTask;
+  _cv.notify_one();
+  return uiTask->getFuture();
 }
 
 } // namespace facebook::react