Skip to content

Streaming on Axios with Fetch-adapter not working on Safari #6577

Closed
@bruets

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:
grafik
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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions