Clean up error messages

change/react-native-windows-3c8e3cc4-43d0-4278-8808-fef1574c5b17.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Clean up error messages",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp

@@ -530,9 +530,9 @@ void ReactNativeIsland::UninitRootView() noexcept {
     if (m_context.Handle().LoadingState() == winrt::Microsoft::ReactNative::LoadingState::HasError)
       return;
 
-    auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-        winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
-    uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(RootTag()));
+    if (auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties())))
+      uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(RootTag()));
   }
 
   m_rootTag = -1;

vnext/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -46,7 +46,10 @@ FabicUIManagerProperty() noexcept {
 
 /*static*/ std::shared_ptr<FabricUIManager> FabricUIManager::FromProperties(
     const winrt::Microsoft::ReactNative::ReactPropertyBag &props) {
-  return props.Get(FabicUIManagerProperty()).Value();
+  auto p = props.Get(FabicUIManagerProperty());
+  if (p)
+    return p.Value();
+  return {};
 }
 
 FabricUIManager::FabricUIManager() {}

vnext/Microsoft.ReactNative/RedBox.cpp

@@ -83,7 +83,36 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
     // Ideally we'd have a dialog we could push UI updates to. -- Maybe we could load XAML and host the XAML dialog?
 
     std::stringstream ss;
-    ss << m_errorInfo.Message;
+
+    const std::regex colorsRegex(
+        "(\\x1b\\[[0-9;]*m)|(\\\\u001b\\[\\d*m)"); // strip out console colors which is often added to JS error messages
+    auto message = std::regex_replace(m_errorInfo.Message, colorsRegex, "");
+    bool needsMessage = true;
+
+    if (!message.empty() && message[0] == '{') {
+      try {
+        auto json = folly::parseJson(message);
+
+        if (json.count("type") && json["type"] == "TransformError") {
+          ss << "TransformError: " << std::endl;
+          if (json.count("errors")) {
+            for (const auto &err : json["errors"]) {
+              ss << "Filename: " << err["filename"] << std::endl;
+              ss << "lineNumber: " << err["lineNumber"] << std::endl;
+              ss << err["description"] << std::endl;
+            }
+          }
+          needsMessage = false;
+        } else {
+          message = folly::toPrettyJson(json);
+          message = std::regex_replace(m_errorInfo.Message, colorsRegex, "");
+        }
+      } catch (...) {
+      }
+    }
+
+    if (needsMessage)
+      ss << message;
     ss << std::endl << std::endl;
     for (auto frame : m_errorInfo.Callstack) {
       ss << frame.Method << "\n" << frame.File << ":" << frame.Line << ":" << frame.Column << std::endl;