OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to catch uncaught TypeError during GPT chatbot stream using fetch and getReader in vue3 app

  • Thread starter Thread starter matrix4use
  • Start date Start date
M

matrix4use

Guest
I'm building a chatbot client using the Vue3 composition api. I have a fastapi backend post endpoint that returns a StreamingResponse. On the UI, I use a fetch request using the getReader method: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader

Code:
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);
}

Occasionally, I get a TypeError: network error, after the stream has started, but before the done flag returns true, with the response status 200!? net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) And the try catch I added around the fetch does not catch this error:

TypeError: network error

Any idea how I can catch this error during processing of chunks from getReader?

<p>I'm building a chatbot client using the Vue3 composition api. I have a fastapi backend post endpoint that returns a StreamingResponse. On the UI, I use a fetch request using the getReader method: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader</a></p>
<pre><code>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);
}
</code></pre>
<p>Occasionally, I get a TypeError: network error, after the stream has started, but before the done flag returns true, with the response status 200!? <code>net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK)</code>
And the <code>try catch</code> I added around the fetch does not catch this error:</p>
<p><a href="https://i.sstatic.net/82lbrNET.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/82lbrNET.png" alt="TypeError: network error" /></a></p>
<p>Any idea how I can catch this error during processing of chunks from getReader?</p>
 

Latest posts

M
Replies
0
Views
1
MOHAMED AMIIN ABDI AADAN
M
Top