Skip to content

Show syntax-highlighted code frames (#56551)#56551

Closed
motiz88 wants to merge 3 commits intofacebook:mainfrom
motiz88:export-D98113191
Closed

Show syntax-highlighted code frames (#56551)#56551
motiz88 wants to merge 3 commits intofacebook:mainfrom
motiz88:export-D98113191

Conversation

@motiz88
Copy link
Copy Markdown
Contributor

@motiz88 motiz88 commented Apr 22, 2026

Summary:

TSIA

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98113191

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 22, 2026
@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Apr 22, 2026

@motiz88 has exported this pull request. If you are a Meta employee, you can view the originating Diff in D98113191.

motiz88 added 2 commits April 22, 2026 06:43
Summary:
Replace the legacy red-on-black error screen with a LogBox-inspired design: charcoal background, salmon header bar, structured call stack, and a 3-button footer. Gated behind `redBoxV2IOS`.

Changelog: [Internal]

Differential Revision: D98115368
Summary:
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]

Differential Revision: D101357709
motiz88 added a commit to motiz88/react-native that referenced this pull request Apr 22, 2026
Summary:
Pull Request resolved: facebook#56551

TSIA

Changelog: [Internal]

Differential Revision: D98113191
@meta-codesync meta-codesync Bot changed the title Show syntax-highlighted code frames Show syntax-highlighted code frames (#56551) Apr 22, 2026
motiz88 added a commit to motiz88/react-native that referenced this pull request Apr 22, 2026
Summary:
Pull Request resolved: facebook#56551

TSIA

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98113191
Summary:
Pull Request resolved: facebook#56551

TSIA

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98113191
@meta-codesync meta-codesync Bot closed this in ad71deb Apr 22, 2026
@facebook-github-tools facebook-github-tools Bot added the Merged This PR has been merged. label Apr 22, 2026
@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Apr 22, 2026

This pull request has been merged in ad71deb.

motiz88 added a commit that referenced this pull request Apr 23, 2026
* Add per-platform redBoxV2 feature flags

Cherry-pick of d6ed561 with feature flag files regenerated
for the 0.83-stable branch.

* Extract RCTRedBoxController from RCTRedBox.mm (#56509)

Summary:
Pull Request resolved: #56509

Moves the `RCTRedBoxController` class, previously inlined in `RCTRedBox.mm`, into its own implementation and header files (`RCTRedBoxController.mm`, `RCTRedBoxController+Internal.h`). An upcoming diff will fork these files for the experimental RedBox 2.0.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D101484586

fbshipit-source-id: 0b0c80caa790ee5286c48adfce5c22d22bef47b6

* Add LogBox-styled error overlay (#56550)

Summary:
Pull Request resolved: #56550

Replace the legacy red-on-black RedBox design with a LogBox-inspired design for RedBox 2.0: charcoal background, salmon header bar, structured call stack, 3-button footer, full-screen view with no animated transition. Gated behind `redBoxV2IOS`.

This diff is just for the low-hanging fruit - setting up the split implementation and borrowing the broad visual style of LogBox. Further up this stack we will port more functionality and improve on this baseline.

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98115368

fbshipit-source-id: 7c14137c94c812f42b6af0c376762e068cfcdaaa

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

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

* Show syntax-highlighted code frames (#56551)

Summary:
Pull Request resolved: #56551

TSIA

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98113191

fbshipit-source-id: 00b640de69a5a3e48dae624dd24c25a1da3c7548

* Mark all errors as retryable (#56552)

Summary:
Pull Request resolved: #56552

Adds `isRetryable` and `isCompileError` to C++ `ParsedError` and its iOS wrapper, for use in RedBox 2.0. **Currently all errors are assumed to be retryable under RedBox 2.0.**

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D101357708

fbshipit-source-id: 6a83b5944e5451a7818c66a321bf8d45a1951970

* Auto-reload on retryable errors (#56549)

Summary:
Pull Request resolved: #56549

Adds an automatic reload countdown to the RedBox 2.0 overlay for errors marked as retryable by the error parser. (Currently all of them, see D101357708.)

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D98107027

fbshipit-source-id: 9f39491e4ecf5086a76b7f6446c34231a5d4eb0d

* Attempt to clear RedBox by automatically reloading on Metro file change (#56554)

Summary:
Pull Request resolved: #56554

While RedBox is displayed, open a native WebSocket to Metro's `/hot` endpoint. On file change, automatically reload — bridging the gap for bundle loading errors where the JS HMR client is unavailable.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D98350597

fbshipit-source-id: 9d11d99226483d937be45d75be008b0f9f25572b

* 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

* Guard tvOS-unavailable APIs in RCTRedBox2Controller (#56568)

Summary:
Pull Request resolved: #56568

`separatorStyle` and `UITableViewCellSeparatorStyleNone` are unavailable on tvOS, causing the airwave-tvos-appletvos build to fail. Wrap them with `#if !TARGET_OS_TV`, matching the existing pattern in `RCTRedBoxController.mm`.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D102001404

fbshipit-source-id: 383e1cc64070000c258b71a60aa4b4ef6453206e

* Fix C++ syntax in Objective-C header breaking React module build (#56569)

Summary:
Pull Request resolved: #56569

`RCTRedBox2Controller+Internal.h` used a C++ `using` type alias, which fails when compiled as plain Objective-C. This header is currently included in the `React-Core` umbrella header (via the `CoreModulesHeaders` subspec), so it gets compiled in a pure-ObjC context and breaks the RNTester iOS CI build.

Here, we replace the `using` with an equivalent `typedef`.

NOTE: The underlying issue is that this `+Internal.h` header should not be in the umbrella header at all. I will follow up to make the RedBox 2.0 internal headers private at the CocoaPods level.

Changelog: [Internal]

___

overriding_review_checks_triggers_an_audit_and_retroactive_review
Oncall Short Name: react_native

landed-with-radar-review

Reviewed By: sbuggay

Differential Revision: D102005814

fbshipit-source-id: d0a5727ee47ea5148a371074bc74e42e503c20f8

---------

Co-authored-by: Terry Kwon <kastopia@meta.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant