abortController.current.abort?.(); 中断流数据时，页面有未捕获的报错

[skyming97]

重现步骤

1. 从 https://x.ant.design/docs/playground/independent-cn （官方样板间的demo代码）复制demo代码
2. 输入任意内容点击发送
3. 点击停止生成按钮

当前行为

出现下图报错：

Uncaught runtime errors:
ERROR
The user aborted a request.
ERROR
BodyStreamBuffer was aborted
AbortError:BodyStreamBuffer was aborted

预期行为

No response

上下文

No response

版本

1.2.0

您在哪些浏览器上遇到了这个问题？

其他, Microsoft Edge

[dosubot[bot]]

Hello @skyming97! I'm Dosu, here to help you with bugs, answer questions, and assist you in becoming a contributor. I'll be with you while you wait for a human maintainer. Let's tackle this issue together!

I found a similar unsolved discussion regarding the support for streaming in real request scenarios, which might be related to your issue. You can check it out here ^[1].

Regarding the error you're encountering, it seems to be related to the abortController implementation in the AIChat.tsx component. The AbortError typically occurs when a request is aborted using the abortController.current.abort() method. This error indicates that the BodyStreamBuffer was aborted, which suggests that the streaming data was interrupted unexpectedly.

To address this issue, ensure that the error handling in your component properly catches and manages AbortError. You can check if the error's name is 'AbortError' and handle it accordingly, as shown in the example below:

const request = async () => {
  setStatus('pending');
  setLines([]);
  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: questionText }],
      stream: true,
    },
    {
      onSuccess: () => {
        setStatus('success');
        setThoughtChainStatus('success');
      },
      onError: (error) => {
        if (error.name === 'AbortError') {
          setStatus('abort');
        }
        setThoughtChainStatus('error');
      },
      onUpdate: (msg) => {
        setLines((pre) => [...pre, msg]);
      },
      onStream: (controller) => {
        abortController.current = controller;
      },
    },
  );
};

const abort = () => {
  abortController?.current?.abort?.();
}

Make sure that your error handling logic is robust enough to manage aborted requests without causing uncaught runtime errors. If the issue persists, consider reviewing the implementation of BodyStreamBuffer and how it interacts with the abortController to ensure proper handling of streaming data ^[2][3][4].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[sonbao]

我也遇到了，请问有办法解决吗

[dlsysoft]

我也遇到了，代码是演示代码，我本地跑就报错，官网就没问题，版本都是一样的，日了狗了

[JinChentestin]

咋解决呢 (｡ì _ í｡)

[dlsysoft]

我也遇到了，代码是演示代码，我本地跑就报错，官网就没问题，版本都是一样的，日了狗了

不算问题，因为错误页面只开发环境出现，右上角叉掉就完了