Add shared C++ error parser and ANSI renderer (#56553)

motiz88 · meta-codesync[bot] · commit 54b4f46da686 · 2026-04-22T07:56:36.000-07:00
Summary: Pull Request resolved: #56553 Add a platform-independent C++ library (`ReactCommon/react/debug/redbox/`) for error message parsing and ANSI escape sequence rendering, shared by both iOS and Android. `RedBoxErrorParser` — C++ port of `parseLogBoxException`. Classifies Metro errors, Babel transform errors, bundle loading errors, and code frame errors into a structured `ParsedError`. `AnsiParser` — converts ANSI SGR sequences into styled spans with foreground/background colors using the Afterglow theme. Uses `facebook::react::unstable_redbox` namespace to exclude from C++ API snapshots. Changelog: [Internal] Reviewed By: robhogan Differential Revision: D101357709 fbshipit-source-id: d2ecf9d12897e00f9590e1bec57ecf5d5895fcd5
diff --git a/packages/react-native/Package.swift b/packages/react-native/Package.swift
@@ -93,6 +93,7 @@ let reactRendererConsistency = RNTarget(
 let reactDebug = RNTarget(
   name: .reactDebug,
   path: "ReactCommon/react/debug",
+  excludedPaths: ["tests", "redbox/tests"],
   dependencies: [.reactNativeDependencies]
 )
 /// React-jsi.podspec
diff --git a/packages/react-native/ReactCommon/react/debug/CMakeLists.txt b/packages/react-native/ReactCommon/react/debug/CMakeLists.txt
@@ -9,7 +9,8 @@ set(CMAKE_VERBOSE_MAKEFILE on)
 include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)
 
 file(GLOB react_debug_SRC CONFIGURE_DEPENDS *.cpp)
-add_library(react_debug OBJECT ${react_debug_SRC})
+file(GLOB react_debug_redbox_SRC CONFIGURE_DEPENDS redbox/*.cpp)
+add_library(react_debug OBJECT ${react_debug_SRC} ${react_debug_redbox_SRC})
 
 target_include_directories(react_debug PUBLIC ${REACT_COMMON_DIR})
 
diff --git a/packages/react-native/ReactCommon/react/debug/React-debug.podspec b/packages/react-native/ReactCommon/react/debug/React-debug.podspec
@@ -26,6 +26,7 @@ Pod::Spec.new do |s|
   s.platforms              = min_supported_versions
   s.source                 = source
   s.source_files           = podspec_sources("**/*.{cpp,h}", "**/*.h")
+  s.exclude_files          = "**/tests/**/*.{cpp,h}"
   s.header_dir             = "react/debug"
   s.pod_target_xcconfig    = { "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard(),
                                "DEFINES_MODULE" => "YES" }
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/AnsiParser.cpp b/packages/react-native/ReactCommon/react/debug/redbox/AnsiParser.cpp
@@ -0,0 +1,139 @@
+/*
+ * 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.
+ */
+
+#include "AnsiParser.h"
+
+#include <optional>
+
+#include <regex> // NOLINT(facebook-hte-BadInclude-regex)
+
+// @lint-ignore-every CLANGTIDY facebook-hte-StdRegexIsAwful
+namespace facebook::react::unstable_redbox {
+
+namespace {
+
+// Afterglow theme colors (matching AnsiHighlight.js)
+std::optional<AnsiColor> ansiColor(int code) {
+  switch (code) {
+    case 30:
+      return AnsiColor{.r = 27, .g = 27, .b = 27}; // black
+    case 31:
+      return AnsiColor{.r = 187, .g = 86, .b = 83}; // red
+    case 32:
+      return AnsiColor{.r = 144, .g = 157, .b = 98}; // green
+    case 33:
+      return AnsiColor{.r = 234, .g = 193, .b = 121}; // yellow
+    case 34:
+      return AnsiColor{.r = 125, .g = 169, .b = 199}; // blue
+    case 35:
+      return AnsiColor{.r = 176, .g = 101, .b = 151}; // magenta
+    case 36:
+      return AnsiColor{.r = 140, .g = 220, .b = 216}; // cyan
+    case 37:
+      return std::nullopt; // white = default
+    case 90:
+      return AnsiColor{.r = 98, .g = 98, .b = 98}; // bright black
+    case 91:
+      return AnsiColor{.r = 187, .g = 86, .b = 83}; // bright red
+    case 92:
+      return AnsiColor{.r = 144, .g = 157, .b = 98}; // bright green
+    case 93:
+      return AnsiColor{.r = 234, .g = 193, .b = 121}; // bright yellow
+    case 94:
+      return AnsiColor{.r = 125, .g = 169, .b = 199}; // bright blue
+    case 95:
+      return AnsiColor{.r = 176, .g = 101, .b = 151}; // bright magenta
+    case 96:
+      return AnsiColor{.r = 140, .g = 220, .b = 216}; // bright cyan
+    case 97:
+      return AnsiColor{.r = 247, .g = 247, .b = 247}; // bright white
+    default:
+      return std::nullopt;
+  }
+}
+
+const std::regex& ansiRegex() {
+  static const std::regex re(R"(\x1b\[([0-9;]*)m)");
+  return re;
+}
+
+int parseSgrCode(const std::string& params, size_t& pos) {
+  size_t next = params.find(';', pos);
+  if (next == std::string::npos) {
+    next = params.size();
+  }
+  int code = 0;
+  for (size_t i = pos; i < next; ++i) {
+    code = code * 10 + (params[i] - '0');
+  }
+  pos = next + 1;
+  return code;
+}
+
+} // namespace
+
+std::vector<AnsiSpan> parseAnsi(const std::string& text) {
+  std::vector<AnsiSpan> spans;
+  std::optional<AnsiColor> currentFg;
+  std::optional<AnsiColor> currentBg;
+  auto it = std::sregex_iterator(text.begin(), text.end(), ansiRegex());
+  auto end = std::sregex_iterator();
+  size_t lastEnd = 0;
+
+  for (; it != end; ++it) {
+    const auto& match = *it;
+    auto matchStart = static_cast<size_t>(match.position());
+
+    if (matchStart > lastEnd) {
+      spans.push_back(
+          AnsiSpan{
+              .text = text.substr(lastEnd, matchStart - lastEnd),
+              .foregroundColor = currentFg,
+              .backgroundColor = currentBg});
+    }
+    lastEnd = matchStart + match.length();
+
+    std::string params = match[1].str();
+    // ESC[m (no params) is equivalent to ESC[0m (reset all attributes)
+    if (params.empty()) {
+      currentFg = std::nullopt;
+      currentBg = std::nullopt;
+    }
+    size_t pos = 0;
+    while (pos < params.size()) {
+      int code = parseSgrCode(params, pos);
+      if (code == 0) {
+        currentFg = std::nullopt;
+        currentBg = std::nullopt;
+      } else if ((code >= 30 && code <= 37) || (code >= 90 && code <= 97)) {
+        currentFg = ansiColor(code);
+      } else if ((code >= 40 && code <= 47) || (code >= 100 && code <= 107)) {
+        currentBg = ansiColor(code - 10);
+      } else if (code == 39) {
+        currentFg = std::nullopt;
+      } else if (code == 49) {
+        currentBg = std::nullopt;
+      }
+    }
+  }
+
+  if (lastEnd < text.size()) {
+    spans.push_back(
+        AnsiSpan{
+            .text = text.substr(lastEnd),
+            .foregroundColor = currentFg,
+            .backgroundColor = currentBg});
+  }
+
+  return spans;
+}
+
+std::string stripAnsi(const std::string& text) {
+  return std::regex_replace(text, ansiRegex(), "");
+}
+
+} // namespace facebook::react::unstable_redbox
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/AnsiParser.h b/packages/react-native/ReactCommon/react/debug/redbox/AnsiParser.h
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+#pragma once
+
+#include <optional>
+#include <string>
+#include <vector>
+
+namespace facebook::react::unstable_redbox {
+
+struct AnsiColor {
+  uint8_t r, g, b;
+};
+
+struct AnsiSpan {
+  std::string text;
+  std::optional<AnsiColor> foregroundColor;
+  std::optional<AnsiColor> backgroundColor;
+};
+
+/**
+ * Parse ANSI escape sequences in text and produce a list of styled spans.
+ * Uses the Afterglow color theme (matching LogBox's AnsiHighlight.js).
+ */
+std::vector<AnsiSpan> parseAnsi(const std::string &text);
+
+/** Strip all ANSI escape sequences from text. */
+std::string stripAnsi(const std::string &text);
+
+} // namespace facebook::react::unstable_redbox
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/RedBoxErrorParser.cpp b/packages/react-native/ReactCommon/react/debug/redbox/RedBoxErrorParser.cpp
@@ -0,0 +1,171 @@
+/*
+ * 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.
+ */
+
+#include "RedBoxErrorParser.h"
+
+#include <regex> // NOLINT(facebook-hte-BadInclude-regex)
+#include <unordered_set>
+
+// @lint-ignore-every CLANGTIDY facebook-hte-StdRegexIsAwful
+namespace facebook::react::unstable_redbox {
+
+namespace {
+
+const std::regex& metroErrorRegex() {
+  static const std::regex re(
+      R"(^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+))");
+  return re;
+}
+
+const std::regex& babelTransformErrorRegex() {
+  static const std::regex re(
+      R"(^(?:TransformError )?(?:SyntaxError: |ReferenceError: )(.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+))");
+  return re;
+}
+
+const std::regex& bundleLoadErrorRegex() {
+  static const std::regex re(R"(^(\w+) in (\S+): (.+) \((\d+):(\d+)\))");
+  return re;
+}
+
+const std::regex& babelCodeFrameErrorRegex() {
+  static const std::regex re(
+      R"(^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\x1b[\s\S]+))");
+  return re;
+}
+
+bool startsWithTransformError(const std::string& msg) {
+  return msg.rfind("TransformError ", 0) == 0;
+}
+
+const std::unordered_set<std::string>& knownBundleLoadErrorTypes() {
+  static const std::unordered_set<std::string> types{
+      "SyntaxError", "ReferenceError", "TypeError", "UnableToResolveError"};
+  return types;
+}
+
+} // namespace
+
+ParsedError parseErrorMessage(
+    const std::string& message,
+    const std::string& name,
+    const std::string& componentStack,
+    bool isFatal) {
+  std::smatch match;
+
+  if (message.empty()) {
+    return ParsedError{
+        .title = isFatal ? "Uncaught Error" : "Error",
+        .message = "",
+        .codeFrame = std::nullopt,
+        .isCompileError = false,
+    };
+  }
+
+  // 1. Metro internal error
+  if (std::regex_search(message, match, metroErrorRegex())) {
+    return ParsedError{
+        .title = match[1].str().empty() ? "Metro Error" : match[1].str(),
+        .message = match[2].str(),
+        .codeFrame =
+            CodeFrame{
+                .content = match[5].str(),
+                .fileName = "",
+                .row = std::stoi(match[3].str()),
+                .column = std::stoi(match[4].str()),
+            },
+        .isCompileError = true,
+    };
+  }
+
+  // 2. Babel transform error
+  if (std::regex_search(message, match, babelTransformErrorRegex())) {
+    return ParsedError{
+        .title = "Syntax Error",
+        .message = match[2].str(),
+        .codeFrame =
+            CodeFrame{
+                .content = match[5].str(),
+                .fileName = match[1].str(),
+                .row = std::stoi(match[3].str()),
+                .column = std::stoi(match[4].str()),
+            },
+        .isCompileError = true,
+    };
+  }
+
+  // 3. Bundle loading error: "ErrorType in /path: message (line:col)"
+  if (std::regex_search(message, match, bundleLoadErrorRegex())) {
+    const auto& errorType = match[1].str();
+    if (knownBundleLoadErrorTypes().count(errorType) > 0) {
+      std::string title = errorType == "UnableToResolveError"
+          ? "Module Not Found"
+          : "Syntax Error";
+      std::optional<std::string> codeFrameContent;
+      auto newlinePos = message.find('\n');
+      if (newlinePos != std::string::npos) {
+        codeFrameContent = message.substr(newlinePos + 1);
+      }
+      return ParsedError{
+          .title = title,
+          .message = match[3].str(),
+          .codeFrame =
+              CodeFrame{
+                  .content = codeFrameContent.value_or(""),
+                  .fileName = match[2].str(),
+                  .row = std::stoi(match[4].str()),
+                  .column = std::stoi(match[5].str()),
+              },
+          .isCompileError = true,
+      };
+    }
+  }
+
+  // 4. Babel code frame error
+  if (std::regex_search(message, match, babelCodeFrameErrorRegex())) {
+    return ParsedError{
+        .title = "Syntax Error",
+        .message = match[2].str(),
+        .codeFrame =
+            CodeFrame{
+                .content = match[3].str(),
+                .fileName = match[1].str(),
+            },
+        .isCompileError = true,
+    };
+  }
+
+  // 5. Generic transform error (no code frame)
+  if (startsWithTransformError(message)) {
+    return ParsedError{
+        .title = "Syntax Error",
+        .message = message,
+        .codeFrame = std::nullopt,
+        .isCompileError = true,
+    };
+  }
+
+  // 6. Determine title from context (matching LogBoxInspectorHeader title map)
+  std::string title;
+  if (!name.empty()) {
+    title = name;
+  } else if (!componentStack.empty()) {
+    title = "Render Error";
+  } else if (isFatal) {
+    title = "Uncaught Error";
+  } else {
+    title = "Error";
+  }
+  return ParsedError{
+      .title = title,
+      .message = message,
+      .codeFrame = std::nullopt,
+      .isCompileError = false,
+  };
+}
+
+} // namespace facebook::react::unstable_redbox
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/RedBoxErrorParser.h b/packages/react-native/ReactCommon/react/debug/redbox/RedBoxErrorParser.h
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/tests/AnsiParserTest.cpp b/packages/react-native/ReactCommon/react/debug/redbox/tests/AnsiParserTest.cpp
diff --git a/packages/react-native/ReactCommon/react/debug/redbox/tests/RedBoxErrorParserTest.cpp b/packages/react-native/ReactCommon/react/debug/redbox/tests/RedBoxErrorParserTest.cpp

Original file line number	Diff line number	Diff line change
`@@ -93,6 +93,7 @@ let reactRendererConsistency = RNTarget(`
`93`	`93`	`let reactDebug = RNTarget(`
`94`	`94`	`name: .reactDebug,`
`95`	`95`	`path: "ReactCommon/react/debug",`
	`96`	`+ excludedPaths: ["tests", "redbox/tests"],`
`96`	`97`	`dependencies: [.reactNativeDependencies]`
`97`	`98`	`)`
`98`	`99`	`/// React-jsi.podspec`