New Architecture application appears as blank white app when launching on certain versions of RNW: Better dev ex around this class of errors

[Yajur-Grover]

Problem Description

There have been several instances of a fresh New Architecture app being launched and deployed without any build errors, but then displaying a blank white screen. The JS bundle loads correctly, and the solution has no errors, so it is very difficult to debug the reason why the app content is not being displayed.

Link to instance of issue: #14370

A common cause of this error is when the RN and RNW versions being used by the app are not the same major version (i.e using 0.77.X RNW version with 0.78.X RN version). In order to fix this, the react-native and react-native-windows dependencies should be on the same major version.

Steps To Reproduce

1. Create a new RNW app with the New Arch template
2. Build and launch

Expected Results

App displays content successfully

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[chrisglein]

Two actions here:

1. Having a mismatch between RN core and RNW should trigger a warning error message (from the CLI)
2. There should be a better error state here than a blank app (it should expose the error or give instructions for how to look for the error)
   a. There are errors that are not making it to red box
   b. There may be cases where there is no obvious error and some default failure UI would be helpful - "waiting for the app to start" default UI in debug state? / splash screen

[chrisglein]

CLI check should be straightforward, tagging as a help wanted item, arguably good first issue but there are more ideas in here.