[0.65] [iOS] Redbox displayed as well as LogBox

[chrisgreen1993]

Description

In 0.65 on iOS, RedBox is displayed as well as LogBox when using console.error or throwing an Error.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 84.11 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
    npm: 7.5.4 - ~/.nvm/versions/node/v14.15.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.6 - /usr/local/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.65.1 => 0.65.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. npx react-native init Test --version 0.65.1
2. Open up App.js and add the following to App component:

   const App: () => Node = () => {
      const isDarkMode = useColorScheme() === 'dark';
      console.error('hello'); // <-- Add this here
      const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
      };

3. run yarn start and yarn ios

Expected Results

I expect to only see the error in LogBox at the bottom of the screen as in 0.64.2:

Actual Results

I get the Error in Redbox as well (Note that this is only an issue on iOS):

This also happens when throwing an Error, however it isn't as much of an issue as LogBox is displayed in full screen in this case anyway.

[mrousavy]

Shouldn't the RedBox be deprecated?

[NickGerleman]

@mrousavy RedBox is still needed for cases where the bundle fails to load, since LogBox has not yet loaded. RedBox display is instead handled in native code.

[mrousavy]

Oh so the LogBox cannot be activated from native code? I tried to find an API for that to add LogBox (incl. stacktrace and source preview) support for Reanimated/VisionCamera Worklets, but seems like that's pretty difficult to achieve...

[NickGerleman]

@mrousavy LogBox is rendered in JS using react-native, but you can inject redbox/yellowbox from native if you really want to.

Instance load registers RCTLog as a callable module, so if you have a react instance (Not sure what Java or ObjC projections of the instance look like), you can call RCTLog.logToConsole from the React Instance, with args of severity (warn or error), along with the string.

That async from native triggers the equivalent of console.warn or console.log.

[NickGerleman]

These would likely all be considered private APIs though... So YMMV

[mrousavy]

thanks nick!

[anthowm]

Today I was upgrading to 0.65.2 make it works but all console.errors trigger a fullScreen LogBox. There is any workaround or plan to fix this ?

[apamphilon]

Also in the same position as @anthowm. Does anyone know if this is being looked at?

[anthowm]

@apamphilon By the moment we put this so we can go ahead with the upgrade don't know the full impact of put this
//

react-native/Libraries/Core/ExceptionsManager.js

Line 97 in 1e8f3b1

* setting `console.reportErrorsAsExceptions = false;` in your app.

// @ts-ignore Disable error screen from console.error as we use it.
console.reportErrorsAsExceptions = false;

[chrisgreen1993]

@apamphilon By the moment we put this so we can go ahead with the upgrade don't know the full impact of put this
//

react-native/Libraries/Core/ExceptionsManager.js

Line 97 in 1e8f3b1

* setting `console.reportErrorsAsExceptions = false;` in your app.

// @ts-ignore Disable error screen from console.error as we use it.
console.reportErrorsAsExceptions = false;

@anthowm This could work as a workaround for now although one thing to note with this is that it also disables LogBox for console.errors.

[christophemenager]

I have the exact same issue, after 1 hour looking for solutions, it appears this issue is the only one trying to solve this.
Does anyone found a better solution than disabling all the error logs ? (which works btw)

[valeriashpiner]

I am facing the same issue with 0.66. It would be nice to have a workaround.

[liamjones]

Just encountered this upgrading from RN 0.63.4 to 0.66.3 myself. Only seems to affect iOS.

[liamjones]

Oh, I forgot to post in here.

I believe I've found the original cause for this issue and I've raised a PR for the fix: #32641

If you want to fix it locally, in advance of the PR being released, it's a one-line change you could use patch-package to apply.

[christophemenager]

Thanks a lot @liamjones , created a patch for my project and it works perfectly well 👌 Nice job !

[DavinAhn]

@liamjones Thanks for finding the cause and fixing it.

I solved it with method swizzling. Since I do a lot of swizzling, this method was easy.

Just add the code below to your project.

// RCTExceptionsManager+FixBug.h
#import <React-Core/React/RCTExceptionsManager.h>

@interface RCTExceptionsManager (FixBug)

@end

// RCTExceptionsManager+FixBug.m
#import "RCTExceptionsManager+FixBug.h"

#import <objc/message.h>
#import <React-Core/React/RCTRedBox.h>

@implementation RCTExceptionsManager (FixBug)

BOOL swizzle(Class __nonnull class, SEL __nonnull originalSelector, SEL __nonnull newSelector, id __nonnull block) {
  if ([class instancesRespondToSelector:newSelector]) {
    return YES;
  }

  Method originalMethod = class_getInstanceMethod(class, originalSelector);
  IMP implementForNewSelector = imp_implementationWithBlock(block);
  if (!class_addMethod(class, newSelector, implementForNewSelector, method_getTypeEncoding(originalMethod))) {
    return NO;
  }

  Method newMethod = class_getInstanceMethod(class, newSelector);
  if (class_addMethod(class, originalSelector, method_getImplementation(newMethod), method_getTypeEncoding(originalMethod))) {
    class_replaceMethod(class, newSelector, method_getImplementation(originalMethod), method_getTypeEncoding(newMethod));
  }
  else {
    method_exchangeImplementations(originalMethod, newMethod);
  }

  NSLog(@"Swizzled [%@] %@ -> %@", NSStringFromClass(class), NSStringFromSelector(originalSelector), NSStringFromSelector(newSelector));

  return YES;
}

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wundeclared-selector"

+ (void)initialize {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    SEL originSelector = @selector(updateExceptionMessage:stack:exceptionId:);
    SEL swizzleSelector = @selector(swizzle_updateExceptionMessage:stack:exceptionId:);
    swizzle([RCTExceptionsManager class], originSelector, swizzleSelector, ^(RCTExceptionsManager *manager, NSString *message, NSArray<NSDictionary *> *stack, double exceptionId) {
      RCTRedBox *redbox = [manager.moduleRegistry moduleForName:"RedBox"];
      [redbox updateErrorMessage:message withStack:stack errorCookie:(int)exceptionId];

      if (manager.delegate && [manager.delegate respondsToSelector:@selector(updateJSExceptionWithMessage:stack:exceptionId:)]) {
        [manager.delegate updateJSExceptionWithMessage:message stack:stack exceptionId:[NSNumber numberWithDouble:exceptionId]];
      }
    });
  });
}

#pragma clang diagnostic pop

@end