I am currently working on a chatbot client using the Vue3 composition api. My backend is built on fastapi and has a post endpoint that returns a StreamingResponse. To handle this on the UI, I have implemented a fetch request that utilizes the getReader method: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader
try {
fetch('api...', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: jsonPrompt
})
.then(response => {
if (!response.ok || !response.body) {
return;
}
const reader = response.body.getReader();
reader.read().then(function processText({ done, value }) {
if (done) {
console.log('Stream done');
return;
}
const decodedData = new TextDecoder('utf-8').decode(value);
console.log('decodedData:', decodedData);
//processStream(decodedData);
return reader.read().then(processText);
})
})
.catch(error => {
console.error('Error in promise:', error);
});
}
catch (error) {
console.error('Error:', error);
}
Sometimes, I encounter a TypeError: network error during the processing of chunks from getReader, even though the stream has started, and before the done flag returns true, with the response status code being 200!?
net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK)try catch block surrounding the fetch operation does not capture this specific error:
https://i.sstatic.net/82lbrNET.png
Any suggestions on how to handle and catch this particular error while processing chunks from getReader?