SvgUri does not handle response status code when fetching the resource
See original GitHub issueBug
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 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} />;
}
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:6
Top Results From Across the Web
SvgUri does not handle response status code when fetching ...
Bug SvgUri component crashes when svg resource request returns a response with status 404. Environment info React native info output: ...
Read more >React Native - converting SVG file to code - Stack Overflow
I would like to get SVG image code after fetching from URL. I was trying something like this: getImgXml = async () =>...
Read more >HTTP response status codes - MDN Web Docs - Mozilla
HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:
Read more >73 HTTP error handling | A Complete React Course - YouTube
When working with HTTP requests, we might come across errors. And as a developer, its our responsibility to handle those errors and show...
Read more >Probably Don't Base64 SVG | CSS-Tricks
It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Adding also an
isCancelled
field could improve this component to avoidCan't perform a React state update on an unmounted component
when the network is slow. Something like: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.