refactor[LogBox]: filter out ANSI color styles (#44924)

Summary:
Pull Request resolved: #44924

# Changelog: [Internal]

For Strict Mode, RDT backend will apply ANSI escape codes to style the message, basically to dim it for 2-nd invocations of logs / warnings / errors in Strict Mode.

With these changes, LogBox will filter out these stylings, so that the message is displayed correctly in the LogBox bubble and in LogBox panel (full screen mode).

Reviewed By: rickhanlonii, yungsters

Differential Revision: D58477316

fbshipit-source-id: 17773f658d2a3bfa7f6a3ccec9fc88a97dd2c0af

packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js

@@ -13,7 +13,11 @@
 
 import type {StackFrame} from '../../../Core/NativeExceptionsManager';
 
-const {parseLogBoxException, parseLogBoxLog} = require('../parseLogBoxLog');
+const {
+  parseLogBoxException,
+  parseLogBoxLog,
+  withoutANSIColorStyles,
+} = require('../parseLogBoxLog');
 
 describe('parseLogBoxLog', () => {
   it('parses strings', () => {
@@ -1656,3 +1660,36 @@ Please follow the instructions at: fburl.com/rn-remote-assets`,
     });
   });
 });
+
+describe('withoutANSIColorStyles', () => {
+  it('works with non-strings', () => {
+    expect(withoutANSIColorStyles(null)).toEqual(null);
+    expect(withoutANSIColorStyles(undefined)).toEqual(undefined);
+    expect(withoutANSIColorStyles({})).toEqual({});
+    expect(withoutANSIColorStyles(1)).toEqual(1);
+  });
+
+  it('works with empty string', () => {
+    expect(withoutANSIColorStyles('')).toEqual('');
+  });
+
+  it("doesn't modify string that don't have ANSI escape sequences", () => {
+    expect(
+      withoutANSIColorStyles('Warning: this is the React warning %s'),
+    ).toEqual('Warning: this is the React warning %s');
+  });
+
+  it('filters out ANSI escape sequences and preserves console substitutions', () => {
+    expect(
+      withoutANSIColorStyles(
+        '\x1b[2;38;2;124;124;124mWarning: this is the React warning %s\x1b[0m',
+      ),
+    ).toEqual('Warning: this is the React warning %s');
+  });
+
+  it('filters out ANSI escape sequences for string with only console substitutions', () => {
+    expect(
+      withoutANSIColorStyles('\x1b[2;38;2;124;124;124m%s %s\x1b[0m'),
+    ).toEqual('%s %s');
+  });
+});

packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -435,13 +435,25 @@ export function parseLogBoxException(
   };
 }
 
+export function withoutANSIColorStyles(message: mixed): mixed {
+  if (typeof message !== 'string') {
+    return message;
+  }
+
+  return message.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+    '',
+  );
+}
+
 export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
 |} {
-  const message = args[0];
+  const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];
   let componentStackType = 'legacy';

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5460,6 +5460,7 @@ declare export function parseComponentStack(message: string): {
 declare export function parseLogBoxException(
   error: ExtendedExceptionData
 ): LogBoxLogData;
+declare export function withoutANSIColorStyles(message: mixed): mixed;
 declare export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,