From 70c745f6cbae961b1c97ad92f0975a20a01d670b Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <hoxy@meta.com>
Date: Fri, 14 Jun 2024 09:26:23 -0700
Subject: [PATCH] refactor[LogBox]: filter out ANSI color styles (#44924)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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
---
 .../Data/__tests__/parseLogBoxLog-test.js     | 39 ++++++++++++++++++-
 .../Libraries/LogBox/Data/parseLogBoxLog.js   | 14 ++++++-
 .../__snapshots__/public-api-test.js.snap     |  1 +
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js b/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js
index 8de9a84f3266..6df61b51761e 100644
--- a/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js
+++ b/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');
+  });
+});
diff --git a/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js b/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js
index af0bb5c20101..a7cca640b0f6 100644
--- a/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js
+++ b/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';
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index 9e2246121538..2629df495faa 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/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,