Attempt to clear RedBox by automatically reloading on Metro file change

Summary:
While RedBox is displayed, open a native WebSocket to Metro's `/hot` endpoint. On file change, automatically reload — bridging the gap for bundle loading errors where the JS HMR client is unavailable.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D98350597

Author: motiz88

packages/react-native/React/CoreModules/RCTRedBox+Internal.h

@@ -33,4 +33,10 @@
 
 @end
 
+@protocol RCTRedBox2Controlling <RCTRedBoxControlling>
+
+@property (nonatomic, strong, nullable) NSURL *bundleURL;
+
+@end
+
 #endif

packages/react-native/React/CoreModules/RCTRedBox.mm

@@ -165,6 +165,14 @@ - (void)updateErrorMessage:(NSString *)message
   [self showErrorMessage:message withParsedStack:stack isUpdate:YES errorCookie:errorCookie];
 }
 
+- (id<RCTRedBox2Controlling>)_redBox2Controller
+{
+  if ([_controller conformsToProtocol:@protocol(RCTRedBox2Controlling)]) {
+    return (id<RCTRedBox2Controlling>)_controller;
+  }
+  return nil;
+}
+
 - (void)showErrorMessage:(NSString *)message
          withParsedStack:(NSArray<RCTJSStackFrame *> *)stack
                 isUpdate:(BOOL)isUpdate
@@ -195,6 +203,7 @@ - (void)showErrorMessage:(NSString *)message
       }
       self->_controller.actionDelegate = self;
     }
+    [self _redBox2Controller].bundleURL = self->_overrideBundleURL ?: self->_bundleManager.bundleURL;
     [self->_controller showErrorMessage:errorInfo.errorMessage
                               withStack:errorInfo.stack
                                isUpdate:isUpdate

packages/react-native/React/CoreModules/RCTRedBox2Controller+Internal.h

@@ -13,7 +13,7 @@
 
 using RCTRedBox2ButtonPressHandler = void (^)(void);
 
-@interface RCTRedBox2Controller : UIViewController <RCTRedBoxControlling, UITableViewDelegate, UITableViewDataSource>
+@interface RCTRedBox2Controller : UIViewController <RCTRedBox2Controlling, UITableViewDelegate, UITableViewDataSource>
 
 @property (nonatomic, weak) id<RCTRedBoxControllerActionDelegate> actionDelegate;
 
@@ -25,6 +25,9 @@ using RCTRedBox2ButtonPressHandler = void (^)(void);
                 isUpdate:(BOOL)isUpdate
              errorCookie:(int)errorCookie;
 
+/// The bundle URL used by the app, for the native HMR connection.
+@property (nonatomic, strong, nullable) NSURL *bundleURL;
+
 - (void)dismiss;
 @end
 

packages/react-native/React/CoreModules/RCTRedBox2Controller.mm

@@ -16,6 +16,7 @@
 
 #import "RCTRedBox2AnsiParser+Internal.h"
 #import "RCTRedBox2ErrorParser+Internal.h"
+#import "RCTRedBoxHMRClient+Internal.h"
 
 // @lint-ignore-every CLANGTIDY clang-diagnostic-switch-default
 // NOTE: clang-diagnostic-switch-default conflicts with clang-diagnostic-switch-enum
@@ -64,6 +65,7 @@ @implementation RCTRedBox2Controller {
   NSInteger _autoRetryCountdown;
   UIButton *_reloadButton;
   NSString *_reloadBaseText;
+  RCTRedBoxHMRClient *_hmrClient;
 }
 
 - (instancetype)initWithCustomButtonTitles:(NSArray<NSString *> *)customButtonTitles
@@ -297,6 +299,7 @@ - (void)showErrorMessage:(NSString *)message
                                         animated:NO];
 
     [self startAutoRetryIfApplicable];
+    [self _startHMRClient];
   }
 }
 
@@ -308,6 +311,7 @@ - (void)dismiss
 
 - (void)reload
 {
+  [self _stopHMRClient];
   [self stopAutoRetry];
   if (_actionDelegate != nil) {
     [_actionDelegate reloadFromRedBoxController:self];
@@ -318,6 +322,28 @@ - (void)reload
   }
 }
 
+#pragma mark - Native HMR Connection
+
+- (void)_startHMRClient
+{
+  [self _stopHMRClient];
+  if (!_bundleURL) {
+    return;
+  }
+  __weak __typeof(self) weakSelf = self;
+  _hmrClient = [[RCTRedBoxHMRClient alloc] initWithBundleURL:_bundleURL
+                                                onFileChange:^{
+                                                  [weakSelf reload];
+                                                }];
+  [_hmrClient start];
+}
+
+- (void)_stopHMRClient
+{
+  [_hmrClient stop];
+  _hmrClient = nil;
+}
+
 #pragma mark - Auto-Retry
 
 - (void)startAutoRetryIfApplicable

packages/react-native/React/CoreModules/RCTRedBoxHMRClient+Internal.h

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+#import <Foundation/Foundation.h>
+
+#import <React/RCTDefines.h>
+
+#if RCT_DEV_MENU
+
+/**
+ * Minimal native HMR client that connects to Metro's /hot WebSocket endpoint
+ * while RedBox 2.0 is displayed. When Metro detects a file change
+ * (update-start), this client triggers a reload so the user's fix is picked up
+ * automatically — even when the JS runtime has no active HMR connection.
+ */
+@interface RCTRedBoxHMRClient : NSObject <NSURLSessionWebSocketDelegate>
+- (instancetype)initWithBundleURL:(NSURL *)bundleURL onFileChange:(void (^)(void))onFileChange;
+- (void)start;
+- (void)stop;
+@end
+
+#endif

packages/react-native/React/CoreModules/RCTRedBoxHMRClient.mm

@@ -0,0 +1,125 @@
+/*
+ * 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.
+ */
+
+#import "RCTRedBoxHMRClient+Internal.h"
+
+#if RCT_DEV_MENU
+
+@implementation RCTRedBoxHMRClient {
+  NSURL *_bundleURL;
+  NSURLSessionWebSocketTask *_webSocketTask;
+  NSURLSession *_session;
+  void (^_onFileChange)(void);
+  BOOL _stopped;
+}
+
+- (instancetype)initWithBundleURL:(NSURL *)bundleURL onFileChange:(void (^)(void))onFileChange
+{
+  if (self = [super init]) {
+    _bundleURL = bundleURL;
+    _onFileChange = [onFileChange copy];
+  }
+  return self;
+}
+
+- (void)start
+{
+  if (![_bundleURL.scheme hasPrefix:@"http"]) {
+    return;
+  }
+
+  NSURLComponents *components = [[NSURLComponents alloc] initWithURL:_bundleURL resolvingAgainstBaseURL:NO];
+  components.scheme = [_bundleURL.scheme isEqualToString:@"https"] ? @"wss" : @"ws";
+  components.path = @"/hot";
+  components.query = nil;
+  components.fragment = nil;
+  NSURL *wsURL = components.URL;
+  if (!wsURL) {
+    return;
+  }
+
+  _session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]
+                                           delegate:self
+                                      delegateQueue:nil];
+  _webSocketTask = [_session webSocketTaskWithURL:wsURL];
+  [_webSocketTask resume];
+}
+
+- (void)stop
+{
+  _stopped = YES;
+  _onFileChange = nil;
+  [_webSocketTask cancel];
+  _webSocketTask = nil;
+  [_session invalidateAndCancel];
+  _session = nil;
+}
+
+- (void)URLSession:(__unused NSURLSession *)session
+          webSocketTask:(__unused NSURLSessionWebSocketTask *)webSocketTask
+    didOpenWithProtocol:(__unused NSString *)protocol
+{
+  NSDictionary *registration = @{
+    @"type" : @"register-entrypoints",
+    @"entryPoints" : @[ _bundleURL.absoluteString ],
+  };
+  NSData *json = [NSJSONSerialization dataWithJSONObject:registration options:0 error:nil];
+  NSURLSessionWebSocketMessage *msg = [[NSURLSessionWebSocketMessage alloc]
+      initWithString:[[NSString alloc] initWithData:json encoding:NSUTF8StringEncoding]];
+  [_webSocketTask sendMessage:msg
+            completionHandler:^(__unused NSError *error){
+            }];
+  [self _listenForNextMessage];
+}
+
+- (void)_listenForNextMessage
+{
+  if (_stopped) {
+    return;
+  }
+  __weak __typeof(self) weakSelf = self;
+  [_webSocketTask receiveMessageWithCompletionHandler:^(NSURLSessionWebSocketMessage *message, NSError *error) {
+    if (error || !message) {
+      return;
+    }
+    [weakSelf _handleMessage:message];
+    [weakSelf _listenForNextMessage];
+  }];
+}
+
+- (void)_handleMessage:(NSURLSessionWebSocketMessage *)message
+{
+  if (message.type != NSURLSessionWebSocketMessageTypeString || _stopped) {
+    return;
+  }
+  NSData *data = [message.string dataUsingEncoding:NSUTF8StringEncoding];
+  NSDictionary *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
+  if ([json[@"type"] isEqualToString:@"update-start"]) {
+    // Ignore the initial update that fires when the client first registers.
+    // Only react to subsequent file changes.
+    NSDictionary *body = json[@"body"];
+    if ([body isKindOfClass:[NSDictionary class]] && [body[@"isInitialUpdate"] boolValue]) {
+      return;
+    }
+    dispatch_async(dispatch_get_main_queue(), ^{
+      if (self->_onFileChange) {
+        self->_onFileChange();
+      }
+    });
+  }
+}
+
+- (void)URLSession:(__unused NSURLSession *)session
+       webSocketTask:(__unused NSURLSessionWebSocketTask *)task
+    didCloseWithCode:(__unused NSURLSessionWebSocketCloseCode)closeCode
+              reason:(__unused NSData *)reason
+{
+}
+
+@end
+
+#endif