`UnexpectedData` cannot be caught by an error boundary

[robbeman]

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