Streaming on Axios with Fetch-adapter not working on Safari #6577
Description
Describe the bug
Hello everyone,
a colleague of mine recently stumbled upon a bug, while using Axios on a Safari. It turns out, streaming with Axios and the fetch adapter is not possible on Safari.
I did some research in our code and found out, that the bug was introduced after switching from the native fetch library to Axios with fetch adapter. Nobody noticed it until recently, as it was working perfectly on Firefox and Chrome (even on MacOS).
After another bit of research, I could narrow it down to the ReadableStream response, that Axios is providing. See the attached CodeSandBox example for further details.
Why do I write it here, although it might be a bug related to the underlying Safari?
For the sake of documentation and for the sake of preventing others to fall into the same pit. And, perhaps, there is a possibility to mitigate the problem by handling the user agent in Axios directly (see workaround bit further below)?
A somewhat familiar (perhaps, the same?) issue was already reported on StackOverflow: https://stackoverflow.com/q/78713060
To anyone experiencing the same issue: There is a workaround. Detect the user agent and check for Safari. For Safari, instead of using Axios, use the native fetch library - just in case, you want to stick to Axios (like we did in our project)
For some inspiration, I created another CodeSandbox: https://codesandbox.io/p/devbox/ecstatic-grass-6skn7l?workspaceId=18337018-7dab-4311-9114-b5cf242336fd
It contains a browser-check using bowser-js, based on the CodeSandbox used in the "To reproduce" section. If you click on the button in the preview, it will now use Axios for the calls for the non-Safari browsers or fallback to the native fetch library for Safari.
To Reproduce
I wrote a small example in CodeSandbox: https://codesandbox.io/p/devbox/objective-gwen-p8jlgv?workspaceId=18337018-7dab-4311-9114-b5cf242336fd
Simply click on the button reading "Click me!" in the preview to trigger the request.
Here is a screenshot of the error:
Notice, how line 13 in AxiosCaller is the "culprit". The line merely consists of the await reader.read()
, as you can see.
Code snippet
No response
Expected behavior
No error is thrown, if I access an endpoint serving a streamed response using Axios.
Axios Version
1.7.4 (already experienced with 1.7.2+)
Adapter Version
Fetch
Browser
Safari
Browser Version
17.5 (18618.2.12.111.5, 18618)
Node.js Version
20.11.1
OS
MacOS Version 13.6.7
Additional Library Versions
React 18.3.1 (I suppose, it will not be of revelance, just for completeness)
Additional context/Screenshots
No response