From 8733bea10bf5d231f93f34b0cc3e659b9e49f003 Mon Sep 17 00:00:00 2001
From: Bohdan Artiukhov <69891500+bohdanprog@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:31:12 +0200
Subject: [PATCH] Handle error when pass wrong uri to SvgFromUri component
 (#2289)

# Summary

We want to add the ability to handle the Error when someone passes the
wrong URI to the `SvgFromUri` component.

Closes #2148

## Test Plan

Manual tests in TestsExample app. (Test2148)
---
 TestsExample/App.js           |  7 ++++---
 TestsExample/src/Test2148.tsx | 20 ++++++++++++++++++++
 src/xml.tsx                   |  9 +++++++--
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 TestsExample/src/Test2148.tsx

diff --git a/TestsExample/App.js b/TestsExample/App.js
index 76dd54361..4b665cbb5 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -2,17 +2,18 @@
 import React from 'react';
 
 import ColorTest from './src/ColorTest';
+import PointerEventsBoxNone from './src/PointerEventsBoxNone';
 import Test1374 from './src/Test1374';
 import Test1718 from './src/Test1718';
 import Test1813 from './src/Test1813';
 import Test1845 from './src/Test1845';
-import Test2080 from './src/Test2080';
-import PointerEventsBoxNone from './src/PointerEventsBoxNone';
+import Test1986 from './src/Test1986';
 import Test2071 from './src/Test2071';
+import Test2080 from './src/Test2080';
 import Test2089 from './src/Test2089';
+import Test2148 from './src/Test2148';
 import Test2196 from './src/Test2196';
 import Test2266 from './src/Test2266';
-import Test1986 from './src/Test1986';
 import Test2276 from './src/Test2276';
 
 export default function App() {
diff --git a/TestsExample/src/Test2148.tsx b/TestsExample/src/Test2148.tsx
new file mode 100644
index 000000000..6ffba4992
--- /dev/null
+++ b/TestsExample/src/Test2148.tsx
@@ -0,0 +1,20 @@
+import React, {useState} from 'react';
+import {Text, View} from 'react-native';
+import {SvgFromUri} from 'react-native-svg';
+
+export default function App() {
+  const [error, setError] = useState<Error>();
+  return (
+    <View style={{flex: 1, backgroundColor: 'red', padding: 50}}>
+      <SvgFromUri
+        uri={
+          'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.svgrepo.com%2Fsvg%2F5154%2Fhand-pointer&psig=AOvVaw2e3ud_ho3oPjy1VSLw0nch&ust=1717666569513000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCLixjuCUxIYDFQAAAAAdAAAAABAY'
+        }
+        width={24}
+        height={24}
+        onError={setError}
+      />
+      <Text style={{marginTop: 50, color: '#fff'}}>{error?.message}</Text>
+    </View>
+  );
+}
diff --git a/src/xml.tsx b/src/xml.tsx
index 34fad4714..61ff3370b 100644
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -171,10 +171,15 @@ export class SvgFromXml extends Component<XmlProps, XmlState> {
   }
 
   parse(xml: string | null) {
+    const { onError = err } = this.props;
     try {
       this.setState({ ast: xml ? parse(xml) : null });
     } catch (e) {
-      console.error(e);
+      const error = e as Error;
+      onError({
+        ...error,
+        message: `[RNSVG] Couldn't parse SVG, reason: ${error.message}`,
+      });
     }
   }
 
@@ -213,7 +218,7 @@ export class SvgFromUri extends Component<UriProps, UriState> {
       props,
       state: { xml },
     } = this;
-    return <SvgFromXml xml={xml} override={props} />;
+    return <SvgFromXml xml={xml} override={props} onError={props.onError} />;
   }
 }