Gallery app launches to a blank screen in Release builds

chrisglein commented 1 year ago

Works fine in Debug builds, but in release nothing is shown.

There appear to be thrown and caught exceptions from the JS, but I don't know if these happen in the normal flow or not.

chrisglein commented 1 year ago

Confirmed that this exception isn't thrown on launch in a Debug build. So it's probably the problem. There were many yellow box errors confusing things, I opened bugs on them:

chrisglein commented 1 year ago

Updated version in the store is fixed. @chiaramooney can you link the fixing PR and document whatever you had to navigate to sort out the dependencies here? Also, is there a more long term repair item here of getting a better error than a blank app? These issues have been hard to untangle. Can/should Gallery add error callbacks and add its own error handling for this? That'd help with Gallery, but a central event log that we can document how to investigate those. There are error logs in Debug but nothing in Release, so what's the idea recourse?

chiaramooney commented 1 year ago

SUMMARY OF THE BUG

Testing Scenarios Covered:

Issue not occurring with Stack Navigator or Bottom Tab Navigator.
Issue not influenced by react-native-gesture-handler package (reverting to older version, no change, importing package and trying to use it works fine).
Issue still exists after upgrading to react-navigation v6.
Issue occurs on v69, v70 and v71 fresh apps (not a gallery issue). Have not tested versions lower that v69, but is looking to not be an issue related to the release.
Issue not influenced after import of the warn-once package.
Issue not influenced by change version of react-native-screens. Imported screen type into app and app works fine.
Issue not influenced by change in version of react-native-safe-area-context.
Issue influenced by change in version of react-native-reanimated.

Solution

Ultimately the configuration we got working was to migrate gallery to navigation v6 (as v7 is almost ready to be released this version bump was a needed change anyway) and then downgrade the react-native-reanimated package to v1 instead of v2.

TODO: Deeper investigation still needed to determine what change in reanimated broke gallery (light research seems to allude to a new vs. legacy implementation of the module where the new implementation is now enabled by default?).

PR to upgrade gallery to v71 and fix the issue https://github.com/microsoft/react-native-gallery/pull/303/files.

Future Work

Looking to the future we will want to assess how we can make the debugging experience better for apps with blank screens in release. This behavior can happen in a number of scenarios; it would be good to offer the developer more data to work with when these issues arise.

TODO:

Create a document on how to add error callbacks and error handling to an RNW app for the case of blank app renders in release.
Add error callbacks and error handling to React Native Gallery to increase data available when this issue occurs in future.
Explore WinDbg debug path for this issue further: Can we get a list of modules by name that have thrown exceptions? Can we get information on what those exceptions are, or where in the module's code they have taken place? We should figure out how to get this information via WinDbg and add to the existing document we have on debugging RNW apps with WinDbg. This way developers can follow the steps to get more information.
Long term goal: Create a WinDbg extension that runs the steps automatically and spits out data.

chrisglein commented 1 year ago

Thanks for writing this all up.

TODO:

Create a document on how to add error callbacks and error handling to an RNW app for the case of blank app renders in release.

Add error callbacks and error handling to React Native Gallery to increase data available when this issue occurs in future.

Explore WinDbg debug path for this issue further: Can we get a list of modules by name that have thrown exceptions? Can we get information on what those exceptions are, or where in the module's code they have taken place? We should figure out how to get this information via WinDbg and add to the existing document we have on debugging RNW apps with WinDbg. This way developers can follow the steps to get more information.

Long term goal: Create a WinDbg extension that runs the steps automatically and spits out data.

Can you create issues for these as appropriate? At least the first 2 seem actionable in the short term.

chiaramooney commented 1 year ago

Jinx just finished writing those up!

https://github.com/microsoft/react-native-windows/issues/11196 https://github.com/microsoft/react-native-windows/issues/11195

microsoft / react-native-gallery