Skip to content

Fix disappearing redbox on initial load of an invalid bundle. #50867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

aleqsio
Copy link
Contributor

@aleqsio aleqsio commented Apr 23, 2025

Summary:

Right now having a javascript error like an invalid import statement during first bundle load results in a disappearing redbox screen.

Untitled.mp4

The invalidate call removed in this PR cleans up all turbomodules, including the RedBox module, which in turns calls dismiss in RCTRedBox.

After removing this line the result is as following:

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-04-23.at.13.14.16.mp4

I made sure that the invalidate function is still called when executing only two possible ways to reload the bundle:

  • the Reload button
  • Cmd+R

The HMR/hot reload is not connected if the bundle has an error on initial load, so we don't need to worry about it.

Longer term, it would be better to establish HMR and use a different redbox in this case:

simulator_screenshot_DFF4EA47-DA12-46A9-81DF-9904B35EB1D9

Doing this requires larger changes to the bundle loading flow – happy to to try and land that change if there's any guidance you could give.

Changelog:

[IOS][FIXED] – Fix disappearing redbox on initial load of an invalid bundle.

Test Plan:

I have tested this change using RN from main and RNTester app (see videos).

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Software Mansion Partner: Software Mansion Partner p: Expo Partner: Expo Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Apr 23, 2025
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Apr 24, 2025
@facebook-github-bot
Copy link
Contributor

@cipolleschi merged this pull request in 4cc9db1.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @aleqsio in 4cc9db1

When will my fix make it into a release? | How to file a pick request?

@aleqsio aleqsio deleted the @aleqsio/fix-disappearing-redbox-on-initial-load branch April 29, 2025 12:17
react-native-bot pushed a commit that referenced this pull request Jun 4, 2025
Summary:
Right now having a javascript error like an invalid import statement during first bundle load results in a disappearing redbox screen.

https://github.com/user-attachments/assets/ab9c64f5-6e32-481c-a58f-6d37bb920acb

The `invalidate` call removed in this PR cleans up all turbomodules, including the RedBox module, which in turns calls `dismiss` in `RCTRedBox`.

After removing this line the result is as following:

https://github.com/user-attachments/assets/6eeb4d43-f883-440f-ade3-5628f85f833a

I made sure that the `invalidate` function is still called when executing only two possible ways to reload the bundle:
- the Reload button
- Cmd+R

The HMR/hot reload is not connected if the bundle has an error on initial load, so we don't need to worry about it.

Longer term, it would be better to establish HMR and use a different redbox in this case:

![simulator_screenshot_DFF4EA47-DA12-46A9-81DF-9904B35EB1D9](https://github.com/user-attachments/assets/c46eb0e9-845a-4b62-96e2-74215cbdad18)

Doing this requires larger changes to the bundle loading flow – happy to to try and land that change if there's any guidance you could give.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[IOS][FIXED] – Fix disappearing redbox on initial load of an invalid bundle.

Pull Request resolved: #50867

Test Plan: I have tested this change using RN from main and RNTester app (see videos).

Reviewed By: cortinico

Differential Revision: D73511154

Pulled By: cipolleschi

fbshipit-source-id: dfe149ebc15d845f07fd3926db2e063b468870af
@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @aleqsio in 3af9e65

When will my fix make it into a release? | How to file a pick request?

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. Merged This PR has been merged. p: Expo Partner: Expo p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants