From 09bdbace9500af51086d010f457cd33d06134ff1 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <hoxy@meta.com>
Date: Fri, 14 Jun 2024 10:42:12 -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

fbshipit-source-id: 17773f658d2a3bfa7f6a3ccec9fc88a97dd2c0af
---
 .../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 8de9a84f326..6df61b51761 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 af0bb5c2010..a7cca640b0f 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 9e224612153..2629df495fa 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,