Fix truncated filenames in call stack frames (#56565)

Summary:
Pull Request resolved: #56565

Stack frame file paths in RedBox 2.0 were displaying as truncated jsc-safe-url fragments (e.g. `dev=true` instead of `index.bundle`). This happened because `lastPathComponent` treats the `//&` path-encoded query as additional path segments.

Here, we port the `jsc-safe-url` npm package to shared C++ (matching the JS implementation line-for-line, including the RFC 3986 appendix B regex) and use it to normalize stack frame URLs before extracting filenames. Query strings are also stripped after normalization.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D101796395

fbshipit-source-id: 38d5a8ccb111e78f847be4a551e359dd075e6a0f

Author: motiz88

packages/react-native/React/CoreModules/RCTJscSafeUrl+Internal.h

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+#import <Foundation/Foundation.h>
+
+/**
+ * Converts between standard URLs and JSC-safe URLs.
+ *
+ * JSC (JavaScriptCore) strips query strings from source URLs in stack traces
+ * as of iOS 16.4. Metro works around this by encoding the query string into
+ * the URL path. These methods convert between the two formats.
+ */
+@interface RCTJscSafeUrl : NSObject
+
++ (nonnull NSString *)normalUrlFromJscSafeUrl:(nonnull NSString *)url;
++ (nonnull NSString *)jscSafeUrlFromNormalUrl:(nonnull NSString *)url;
++ (BOOL)isJscSafeUrl:(nonnull NSString *)url;
+
+@end

packages/react-native/React/CoreModules/RCTJscSafeUrl.mm

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+#import "RCTJscSafeUrl+Internal.h"
+
+#import <React/RCTDefines.h>
+#import <react/debug/redbox/JscSafeUrl.h>
+
+#if RCT_DEV_MENU
+
+using facebook::react::unstable_redbox::isJscSafeUrl;
+using facebook::react::unstable_redbox::toJscSafeUrl;
+using facebook::react::unstable_redbox::toNormalUrl;
+
+@implementation RCTJscSafeUrl
+
++ (NSString *)normalUrlFromJscSafeUrl:(NSString *)url
+{
+  return [NSString stringWithUTF8String:toNormalUrl(url.UTF8String).c_str()];
+}
+
++ (NSString *)jscSafeUrlFromNormalUrl:(NSString *)url
+{
+  return [NSString stringWithUTF8String:toJscSafeUrl(url.UTF8String).c_str()];
+}
+
++ (BOOL)isJscSafeUrl:(NSString *)url
+{
+  return isJscSafeUrl(url.UTF8String);
+}
+
+@end
+
+#endif

packages/react-native/React/CoreModules/RCTRedBox2Controller.mm

@@ -14,6 +14,7 @@
 
 #include <array>
 
+#import "RCTJscSafeUrl+Internal.h"
 #import "RCTRedBox2AnsiParser+Internal.h"
 #import "RCTRedBox2ErrorParser+Internal.h"
 #import "RCTRedBoxHMRClient+Internal.h"
@@ -410,7 +411,13 @@ - (void)copyStack
 
 - (NSString *)formatFrameSource:(RCTJSStackFrame *)stackFrame
 {
-  NSString *fileName = RCTNilIfNull(stackFrame.file) ? [stackFrame.file lastPathComponent] : @"<unknown file>";
+  NSString *file = [RCTJscSafeUrl normalUrlFromJscSafeUrl:stackFrame.file];
+  // Strip query string (e.g. ?platform=ios&dev=true) before extracting the filename.
+  NSRange queryRange = [file rangeOfString:@"?"];
+  if (queryRange.location != NSNotFound) {
+    file = [file substringToIndex:queryRange.location];
+  }
+  NSString *fileName = RCTNilIfNull(file) ? [file lastPathComponent] : @"<unknown file>";
   NSString *lineInfo = [NSString stringWithFormat:@"%@:%lld", fileName, (long long)stackFrame.lineNumber];
 
   if (stackFrame.column != 0) {
@@ -619,8 +626,7 @@ - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forCodeFrame:(RCTRedBox2E
   // File name label below the code frame
   UILabel *fileLabel = [[UILabel alloc] init];
   fileLabel.translatesAutoresizingMaskIntoConstraints = NO;
-  NSString *fileName = errorData.codeFrameFileName.lastPathComponent ? errorData.codeFrameFileName.lastPathComponent
-                                                                     : errorData.codeFrameFileName;
+  NSString *fileName = errorData.codeFrameFileName.lastPathComponent ?: errorData.codeFrameFileName;
   if (errorData.codeFrameRow > 0) {
     fileLabel.text = [NSString
         stringWithFormat:@"%@ (%ld:%ld)", fileName, (long)errorData.codeFrameRow, (long)errorData.codeFrameColumn + 1];

packages/react-native/ReactCommon/react/debug/redbox/JscSafeUrl.cpp

@@ -0,0 +1,179 @@
+/*
+ * 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 "JscSafeUrl.h"
+
+#include <cassert>
+#include <regex> // NOLINT(facebook-hte-BadInclude-regex)
+#include <stdexcept>
+#include <string_view>
+
+// @lint-ignore-every CLANGTIDY facebook-hte-StdRegexIsAwful
+
+namespace facebook::react::unstable_redbox {
+
+namespace {
+
+// We use regex-based URL parsing as defined in RFC 3986 because it's easier to
+// determine whether the input is a complete URI, a path-absolute or a
+// path-rootless (as defined in the spec), and be as faithful to the input as
+// possible. This will match any string, and does not imply validity.
+//
+// https://www.rfc-editor.org/rfc/rfc3986#appendix-B
+const std::regex& uriRegex() {
+  static const std::regex re(
+      R"(^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?)");
+  return re;
+}
+
+struct ParsedUri {
+  std::string_view schemeAndAuthority;
+  std::string_view path;
+  bool hasQueryPart = false;
+  std::string_view queryWithoutQuestionMark;
+  std::string_view fragmentWithHash;
+};
+
+ParsedUri rfc3986Parse(std::string_view url) {
+  std::cmatch match;
+  if (!std::regex_match(
+          url.data(), url.data() + url.size(), match, uriRegex())) {
+    throw std::runtime_error("Unexpected error - failed to regex-match URL");
+  }
+
+  // match[1] = scheme with colon (e.g. "http:")
+  // match[3] = authority with slashes (e.g. "//host")
+  // match[5] = path
+  // match[6] = query with question mark (e.g. "?key=val")
+  // match[7] = query without question mark
+  // match[8] = fragment with hash (e.g. "#frag")
+
+  auto viewOf = [&](int group) -> std::string_view {
+    if (!match[group].matched) {
+      return {};
+    }
+    return {match[group].first, static_cast<size_t>(match[group].length())};
+  };
+
+  // schemeAndAuthority = (match[1] || "") + (match[3] || "")
+  // These are contiguous when both present, but may be individually absent.
+  std::string_view schemeAndAuthority;
+  if (match[1].matched && match[3].matched) {
+    assert(match[1].second == match[3].first);
+    schemeAndAuthority = {
+        match[1].first, static_cast<size_t>(match[3].second - match[1].first)};
+  } else if (match[1].matched) {
+    schemeAndAuthority = viewOf(1);
+  } else if (match[3].matched) {
+    schemeAndAuthority = viewOf(3);
+  }
+
+  return ParsedUri{
+      .schemeAndAuthority = schemeAndAuthority,
+      .path = viewOf(5),
+      .hasQueryPart = match[6].matched,
+      .queryWithoutQuestionMark = viewOf(7),
+      .fragmentWithHash = viewOf(8),
+  };
+}
+
+} // namespace
+
+bool isJscSafeUrl(std::string_view url) {
+  return !rfc3986Parse(url).hasQueryPart;
+}
+
+std::string toNormalUrl(std::string url) {
+  auto parsed = rfc3986Parse(url);
+  auto markerPos = parsed.path.find("//&");
+  if (markerPos == std::string_view::npos) {
+    return url;
+  }
+
+  // path before //&, then ?, then path after //&
+  std::string_view pathBefore = parsed.path.substr(0, markerPos);
+  std::string_view pathAfter = parsed.path.substr(markerPos + 3);
+
+  // We don't expect JSC urls to also have query strings, but interpret
+  // liberally and append them.
+  bool hasExistingQuery = !parsed.queryWithoutQuestionMark.empty();
+
+  // Likewise, JSC URLs will usually have their fragments stripped, but
+  // preserve if we find one.
+  size_t totalSize = parsed.schemeAndAuthority.size() + pathBefore.size() +
+      1 /* ? */ + pathAfter.size() +
+      (hasExistingQuery ? 1 + parsed.queryWithoutQuestionMark.size() : 0) +
+      parsed.fragmentWithHash.size();
+
+  std::string result;
+  result.reserve(totalSize);
+  result += parsed.schemeAndAuthority;
+  result += pathBefore;
+  result += '?';
+  result += pathAfter;
+  if (hasExistingQuery) {
+    result += '&';
+    result += parsed.queryWithoutQuestionMark;
+  }
+  result += parsed.fragmentWithHash;
+  assert(result.size() == totalSize);
+  return result;
+}
+
+std::string toJscSafeUrl(std::string url) {
+  if (!rfc3986Parse(url).hasQueryPart) {
+    return url;
+  }
+  url = toNormalUrl(std::move(url));
+  auto parsed = rfc3986Parse(url);
+  if (!parsed.queryWithoutQuestionMark.empty() &&
+      (parsed.path.empty() || parsed.path == "/")) {
+    throw std::invalid_argument(
+        "The given URL \"" + url +
+        "\" has an empty path and cannot be converted to a JSC-safe format.");
+  }
+
+  // Query strings may contain '?' (e.g. in key or value names) - these
+  // must be percent-encoded to form a valid path, and not be stripped.
+  // Count them first so we can preallocate exactly.
+  bool hasQuery = !parsed.queryWithoutQuestionMark.empty();
+  size_t questionMarks = 0;
+  if (hasQuery) {
+    for (char c : parsed.queryWithoutQuestionMark) {
+      if (c == '?') {
+        questionMarks++;
+      }
+    }
+  }
+
+  // Each '?' becomes "%3F" (+2 bytes), plus "//&" delimiter (+3 bytes)
+  size_t totalSize = parsed.schemeAndAuthority.size() + parsed.path.size() +
+      (hasQuery ? 3 + parsed.queryWithoutQuestionMark.size() + questionMarks * 2
+                : 0) +
+      // We expect JSC to strip this - we don't handle fragments for now.
+      parsed.fragmentWithHash.size();
+
+  std::string result;
+  result.reserve(totalSize);
+  result += parsed.schemeAndAuthority;
+  result += parsed.path;
+  if (hasQuery) {
+    result += "//&";
+    for (char c : parsed.queryWithoutQuestionMark) {
+      if (c == '?') {
+        result += "%3F";
+      } else {
+        result += c;
+      }
+    }
+  }
+  result += parsed.fragmentWithHash;
+  assert(result.size() == totalSize);
+  return result;
+}
+
+} // namespace facebook::react::unstable_redbox

packages/react-native/ReactCommon/react/debug/redbox/JscSafeUrl.h

@@ -0,0 +1,27 @@
+/*
+ * 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 <string>
+#include <string_view>
+
+namespace facebook::react::unstable_redbox {
+
+/**
+ * These functions are for handling of query-string free URLs, necessitated
+ * by query string stripping of URLs in JavaScriptCore stack traces
+ * introduced in iOS 16.4. This is a direct port of https://www.npmjs.com/package/jsc-safe-url.
+ *
+ * See https://github.com/facebook/react-native/issues/36794 for context.
+ */
+
+bool isJscSafeUrl(std::string_view url);
+std::string toNormalUrl(std::string url);
+std::string toJscSafeUrl(std::string url);
+
+} // namespace facebook::react::unstable_redbox