React-native-svg: SvgUri does not handle response status code when fetching the resource

Created on 24 Jul 2020 · 3Comments · Source: react-native-svg/react-native-svg

Bug

SvgUri component crashes when svg resource request returns a response with status 404.

Environment info

React native info output:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 678.98 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.0

Steps To Reproduce

import { SvgUri } from "react-native-svg";
Place this <SvgUri uri="https://dev.w3.org/SVG/tools/svgweb/samples.svg" /> in any screen/component
Run the app
Exception in app:
Requested resource response:

Describe what you expected to happen:

SvgUri onError to be triggered and passed callback to be executed.

Suggested Fix

SvgUri Implementation

SvgUri Implementation with response status check:

export function SvgUri(props: UriProps) {
  const { onError = err, uri } = props;
  const [xml, setXml] = useState<string | null>(null);
  useEffect(() => {
    uri
      ? fetch(uri).then((response)=>{
        if(response.ok) {
          return response.text()
        }
        throw new Error(`${response.status} ${response.statusText}`)
      })
          .then(setXml)
          .catch(onError)
      : setXml(null);
  }, [onError, uri]);
  return <SvgXml xml={xml} override={props} />;
}

Source

vallvien

👍2

Most helpful comment

this is a very necessary feature. I'm currently also facing an issue where I need to know if the icons can't load/render for any reason so i can swap in some kind of error state icon or something other than just blank UI.

mdalpozzo on 30 Jul 2020

👍2

All 3 comments

mdalpozzo on 30 Jul 2020

👍2

Adding also an isCancelled field could improve this component to avoid Can't perform a React state update on an unmounted component when the network is slow.
Something like:

export function SvgUri(props: UriProps) {
  const { onError = err, uri } = props;
  const [xml, setXml] = useState<string | null>(null);
  let isCancelled = false;
  useEffect(() => {
    uri
      ? fetch(uri).then((response)=>{
        if(response.ok) {
          return response.text()
        }
        throw new Error(`${response.status} ${response.statusText}`)
      })
          .then((x) => !isCancelled ? setXml(x): null )
          .catch(onError)
      : setXml(null);
     return () => { isCancelled = true }
  }, [onError, uri]);
  return <SvgXml xml={xml} override={props} />;
}