`UnexpectedData` cannot be caught by an error boundary

Description

Related: #1199

We have an SVG, which is fetched from an API over which I have no direct control. 👇

<svg viewBox="0 0 257.832 257.832" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill="currentColor" d="M62.288,89.305c1.367,0,2.741-0.465,3.867-1.415c2.532-2.138,2.853-5.924,0.715-8.455&#xD;&#xA;		C60.642,72.058,57.213,62.67,57.213,53c0-22.608,18.393-41,41-41s41,18.392,41,41c0,6.308-1.392,12.354-4.137,17.974&#xD;&#xA;		c-1.455,2.978-0.221,6.57,2.757,8.024c2.977,1.459,6.57,0.22,8.024-2.757c3.554-7.274,5.355-15.093,5.355-23.241&#xD;&#xA;		c0-29.225-23.775-53-53-53s-53,23.775-53,53c0,12.5,4.435,24.637,12.487,34.175C58.887,88.581,60.582,89.305,62.288,89.305z" /><path fill="currentColor" d="M211.134,141.765c-3.866-22.86-20.326-25.967-27.416-26.223c-2.007-0.073-3.836-1.129-4.912-2.824&#xD;&#xA;		c-5.367-8.456-12.645-10.681-18.813-10.681c-2.824-0.001-5.414,0.465-7.485,1.013c-0.608,0.16-1.227,0.239-1.839,0.239&#xD;&#xA;		c-2.178,0-4.277-0.994-5.588-2.811c-5.28-7.315-12.171-9.293-18.078-9.293c-1.58,0-3.09,0.142-4.479,0.36&#xD;&#xA;		c-0.371,0.059-0.739,0.087-1.1,0.087c-3.78,0-6.969-3.07-6.974-6.987l-0.05-42.287c-0.014-10.927-8.209-16.387-16.404-16.387&#xD;&#xA;		c-8.211,0-16.422,5.479-16.408,16.427c0.022,18.357,0.089,73.493,0.108,90.106c0.004,2.808-1.675,5.345-4.265,6.428&#xD;&#xA;		c-32.541,13.602,7.643,74.619,14.84,85.076c0.702,1.02,1.118,2.203,1.211,3.438l1.759,23.661c0.274,3.65,3.316,6.724,6.977,6.724&#xD;&#xA;		c0.003,0,0.006,0,0.009,0l78.623-0.349c3.509-0.005,6.471-2.732,6.928-6.211l3.202-24.453c0.136-1.031,0.51-2.053,1.074-2.927&#xD;&#xA;		C213.066,191.413,214.717,162.954,211.134,141.765z" /></g></svg>

As you can see, this contains som special characters. Which makes the renderer crash.

The main issue is that this cannot be caught by an error boundary. Which can cause the app to crash on any screen where external icons are used.

The onError prop doesn't catch the error either.

Steps to reproduce

1. Get badSvg from external service (or use above example)
2. Render bad svg:

<ErrorBoundary>
  <SvgXml
    onError={(error) => {
      console.log('svg xml error', error);
    }}
    xml={badSvg}
  />
</ErrorBoundary>

Snack or a link to a repository

https://snack.expo.dev/@bitsoflove-operations/playful-orange-french-fries

SVG version

15.11.2 & 15.12.1

React Native version

0.79.5

Platforms

Android, iOS

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

Start by reproducing the failure with the provided badSvg in the linked Snack and trace the SvgXml rendering and error handling described in the issue. Done means malformed external SVG input can be handled through the onError prop or an ErrorBoundary without crashing the app on Android and iOS.