ReadableStream with Axios not working in Safari, but working in Chrome and Firefox

Question

I'm building a chat app with AI API like ChatGPT. I'm streaming back the responses, which works fine in chrome and firefox, but does not in Safari. There I always get this error:

[Log] Error: (handleError.ts, line 8)
AxiosError

cause: TypeError: ReadableByteStreamController is not implemented

column: 28

config: {transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}, adapter: "fetch", transformRequest: Array, transformResponse: Array, timeout: 0, …}

line: 1697

message: "ReadableByteStreamController is not implemented"

name: "TypeError"

request: Request

body: ReadableStream {locked: true}

bodyUsed: true

cache: "default"

credentials: "same-origin"

destination: ""

headers: Headers {append: function, delete: function, get: function, has: function, set: function, …}

integrity: ""

keepalive: false

method: "POST"

mode: "cors"

redirect: "follow"

referrer: "about:client"

referrerPolicy: ""

signal: AbortSignal {aborted: false, reason: undefined, onabort: null, throwIfAborted: function, addEventListener: function, …}

url: "http://localhost:3000/conversations/cht_GHyzT4yB35_363xN"

Request Prototyp

sourceURL: "http://localhost:5173/node_modules/.vite/deps/axios.js?v=e4786436"

stack: "AxiosError@http://localhost:5173/node_modules/.vite/deps/axios.js?v=e4786436:375:2…"

AxiosError Prototyp

For my API Calls, I'm using a wrapper around Axios, which makes the streaming request like this:

 async stream(data: any) {
        try {
            console.log("Sending request")
            const response = await instance.post(this.baseUrl, data, { headers: {
                'Accept': 'text/event-stream',
              },
              responseType: 'stream',
              adapter: 'fetch'
             });
            // Handle response data
            console.log("Request sent")
            return { data: response.data, error: null };
        } catch (error) {
            // Handle errors
            const handledError = await handleError(error);
            return { data: null, error: handledError };
        }
    }

With this, the "Request Sent" does not get logged to the console, so the error has to be in the post request.

The request on safari finished quickly, probably with the first chunk of data coming in. in the api logs it says for requests with safari they only take a couple ms to finish.

mikeboe · Accepted Answer · 2024-07-07 15:37:50Z

2

I have found a workaround using the browser native fetch() library, that works fine. Issue seems to be with Axios.

EDIT: This is the working workaround

async *stream(data: any) {
  try {
    console.log('Sending request');
    const response = await fetch(this.baseUrl, {
      method: 'POST',
      headers: {
        Authorization: 'Bearer ' + token
        Accept: 'text/event-stream',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.body) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');

      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        const chunk = decoder.decode(value, { stream: true });
        yield chunk;
      }
    }

    console.log('Request sent');
  } catch (error) {
    const handledError = await handleError(error);
    yield { error: handledError };
  }
}

And then use this function to access the stream:

async function handleStream() {
  const streamGenerator = await api
    .from('conversations')
    .byId(conversation.id)
    .stream({
      input
    });

  for await (const chunk of streamGenerator) {
    if (chunk.error) {
      // Handle error
      console.error(chunk.error);
      break;
    }
    // Process the chunk
    console.log(chunk);
    // Update your UI with the new chunk of data
  }
}

edited Jul 7, 2024 at 15:37

answered Jul 5, 2024 at 21:30

mikeboe

641 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darren Cook Over a year ago

Can you show your workaround. Also see developer.mozilla.org/en-US/docs/Web/API/… (note it is unsupported in Safari) - though it seems strange that axios would have built on something with a major browser missing.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

mikeboe Over a year ago

@DarrenCook edited the answer. Maybe I did something wrong, but as you linked the docs it is not supported by Safari, and that was always the error that I got.

Collectives™ on Stack Overflow

ReadableStream with Axios not working in Safari, but working in Chrome and Firefox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related