React-native-svg: SvgUri On Error

[prashantchothani]

Feature Request

We need to have an on Error when we use svgUri as the app crashes if there is an error in the SVG format. A best practice guide on the format of the svg from uri is also required as it is based on trial and error and standard svg's do not load and app crashes

Why it is needed

In case the svg's are coming from a third party source and if the svg is not confirming to the specs required by react-native-svg, the app crashes. This can be handled and a default svg can be shown.

Possible implementation

It really helps if you could describe from a technical POV how this new feature would work, which code it rely on, etc

Code sample

Please show how the new code could work, if doable

[msand]

Would you be available to work on this? Could you make a pr?

[prashantchothani]

SvgUri loads svg from a url. We could have a onError prop which could be used to show a default svg image from local images. We noticed that in case of any missing svg's or not well formattted svg's from third party the whole application crashes. To avoid this, it would be helpful. Also the svg loads on component did mount of the view where we use svgURI and we could not trap the error as it happens inside the SvgUri library

[YuriiStetsula]

@prashantchothani as a workaround you can implement something like this

[uqmessias]

@msand and @prashantchothani, has anyone worked on this?
I'd be glad to work on this issue. In fact, I'v been working on a react-native-svg-uri fork called react-native-svg-renderer for a while and this was implemented there. But I just realized, today, that SvgUri and SvgXml is already implemented here (starting from v7.0.0).

So, if anyone has taken this feature request yet, I'd be glad to work on it.

[uqmessias]

@prashantchothani,
I just submitted a PR with the changes.

@msand, I couldn't find the example/App.js file. Is it on a different repository?

[prashantchothani]

@uqmessias @msand appreciate your taking up this issue. it would be nice to have an onError prop as mentioned above.

[msand]

@uqmessias Thanks for working on this, will take a closer look at it and test it tomorrow. There's no example file in this repo, there are some in https://github.com/msand/react-native-svg-e2e
There's also another example repo in https://github.com/react-native-community/react-native-svg#run-example / https://github.com/magicismight/react-native-svg-example.git but that hasn't been maintained for quite some time, instead I've kept it functional here: https://snack.expo.io/@msand/react-native-svg-example

[msand]

The pr template comes from react-native-community rather than from this repo. Should probably make a repo specific one instead.

[uqmessias]

@msand, what do you think about getting the example app and adding it to this repo? This way, we can keep it updated.

[msand]

I've made the e2e app work again, might make sense to move it here yeah, mind making a pr for it?

[uqmessias]

@msand,
This week I'm really busy, but if I can't find some time to do that in the next days, I'll in the next week.

[UserSina]

Any news about this topic ?

[uqmessias]

I couldn't find any time to do that yet. But I'm planning to do during this week.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[JacobBarr1986]

Any news about this topic ?

[uqmessias]

@JacobBarr1986, it was merged in the #1266

[prashantchothani]

@uqmessias Thanks for this effort and I tried to use the onError Prop to pass a SVG Component to load that in case of error of the SVG URI. But still it crashes. Any help on how can i use this prop and gracefully show a default image ?

[prashantchothani]

Any news please ?

[uqmessias]

Hey @prashantchothani, how are you doing? I hope you're well 😄

You can use the onError callback to show another view instead of the SVG with error, to do that, we may need to use something to hold the state of this SVG, in the following example, I'll use useState hook, but you can solve the same problem with other solutions:

const MySVG = () => {
  const [hasError, setError] = useState(false);
  const handleError = useCallback(() => {
    setError(true);
  }, []);

  if (hasError){
    return (
      <Text>There's an error in the SVG file</Text>
    );
  }

  return (
    <SvgXml
        xml='<svg width="400" height="180">\n<rectwitherror x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /></svg>'
        onError={handleError}
    />
  );
}

[vinitgundeti]

hi @uqmessias i have used above solution for SvgUri but onError app is crashing

this is my code

export default React.memo(function Segment(props) {
    const [hasError, setError] = useState(false);
    const handleError =()=>{
        setError(true)
    }
  return(
         <View>
               {hasError ?
                    <Text>error</Text>
                    :
                    <SvgUri
                        width={22}
                        height={22}
                        uri={Urls.svgAirlineImageUrl + data.vc + ".svg"}
                        onError={handleError}
                    >
                    </SvgUri>
                }
            </View>
)})

i get this error when i pass wrong svg

can you please help where i am doing wrong

i have also try like this still getting same error

export default React.memo(function Segment(props) {
    const [hasError, setError] = useState(false);
    const handleError =useCallback(()=>{
        setError(true)
    },[])

    if(hasError){
        return (
            <Text>Error</Text>
          );
    }
    return (
            <View>
                <SvgUri
                    width={22}
                    height={22}
                    uri={Urls.svgAirlineImageUrl + data.vc + ".svg"}
                    onError={handleError}
                >
                </SvgUri>
            </View>
    )
})

[prashantchothani]

@uqmessias I am fine and hope all's well with you and your family :)

Even i got the same issue.

[uqmessias]

Hey @prashantchothani and @vinitgundeti, does it work if you change your example to the following?

diff --git a/your-example.jsx b/your-example.jsx
index 392360b31..ece36f1bc 100644
--- a/your-example.jsx
+++ b/your-example.jsx
@@ -13,8 +13,7 @@ export default React.memo(function Segment(props) {
                         height={22}
                         uri={Urls.svgAirlineImageUrl + data.vc + ".svg"}
                         onError={handleError}
-                    >
-                    </SvgUri>
+                    />
                 }
             </View>
 )})

[vinitgundeti]

Hi @uqmessias it's not working even i change it like above

[uqmessias]

@vinitgundeti, are you getting any new error or something? Because the previous error was regarding to the missing children value (default to null)

[vinitgundeti]

@uqmessias i am getting the same error

[uqmessias]

Hey @vinitgundeti, sorry for taking so long to answer!

Can you upload a sample code to Github and send the link so I can test it and try to help you with that?
I'm not actively working with React Native currently (working with other technologies and other projects) and if you could send me this sample it would be a lot easier to spot the error and I probably could you faster.

[vinitgundeti]

Hey @uqmessias, sorry for late reply

this is my git repo link
https://github.com/vinitgundeti/reactnativesvg.git

i have made component svgcomponent.js added it in App.js

in code i have added wrong svg link the right link i have mentioned in readme

[uqmessias]

@vinitgundeti, this is an issue on the initial implementation of onError, I just opened a PR to fix that:
https://github.com/react-native-svg/react-native-svg/pull/1476

@msand, can you take a look at it, pls?

[vinitgundeti]

@uqmessias Thank you very much for fixing this, this was must required feature, i have tested it and it is working fine. when will this be in the main branch ?

[uqmessias]

@vinitgundeti, I'm not sure because it depends on @msand and it seems that he's take a time off from open source projects.
I don't have the power to merge any PR yet, maybe @magicismight has, don't you?

[staghouse]

Just wanted to throw my hat in the ring and say this would be great to be fixed.

[GeorgeAverkin]

As a workaround, it possible to prevent the app from crashing using error boundaries.
<ErrorBoundary> <SvgXml xml='...' /> </ErrorBoundary>

[alemarra89]

Hi all, I don't know how many of you are using the onError props, but I think we have to update ts definitions in order to make it available in typescript.

in _src/index.d.ts_, this code:

export interface SvgProps extends GProps, ReactNative.ViewProperties {
  width?: NumberProp;
  height?: NumberProp;
  viewBox?: string;
  preserveAspectRatio?: string;
  color?: Color;
  title?: string;
}

probably should become:

export type AdditionalProps = {
  onError?: (error: Error) => void;
  override?: Object;
};

export interface SvgProps extends AdditionalProps, GProps, ReactNative.ViewProperties {
  width?: NumberProp;
  height?: NumberProp;
  viewBox?: string;
  preserveAspectRatio?: string;
  color?: Color;
  title?: string;
}