Error This operation was aborted when interupt streaming response

[atomic atlas]

When user stop streaming response from

• refresh app on browser
• click stop button which essentially run stopGeneration() method

These will brick all subsequent messages on all clients even after refresh page. User will see error This operation was aborted.
From console, user will see
Error in async callback: Error: This operation was aborted
at useChat.useAsyncCallback[runChatCompletion] (use-chat.ts:594:19)
at useChat.useAsyncCallback[runChatCompletion].next (<anonymous>)
at fulfilled (dev-console.ts:19:1)
The only way to stop this is to restart nextjs server.

What I need to check to make sure I may did something wrong. Is this a known bug like
https://github.com/ag-ui-protocol/ag-ui/issues/733
https://github.com/CopilotKit/CopilotKit/issues/2749

[obtuse bronze]

This solution has been AI generated

This is a known issue when aborting a streaming response in CopilotKit's chat hooks. Aborts (via refresh or stopGeneration) can leave the hook stuck and cause "This operation was aborted" on subsequent messages in Next.js serverless setups.

Root cause

• In use-chat.ts, runChatCompletion sets isLoading = true and expects to reset it in finally.
• In serverless environments, the streaming for await loop can hang on abort and never reach finally, leaving isLoading stuck and "bricking" future sends.

What to check

• It's likely not your app code; the issue stems from the stream not unwinding on abort.
• Ensure you explicitly reset loading state on abort/timeout to prevent the stuck state.

Workaround (abort + reset state with timeout)

// Example wrapping your message send with a forced timeout
const handleAppendMessage = async (message) => {
  const abortController = new AbortController();

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      abortController.abort();
      reject(new Error('Request timed out'));
    }, 9000); // e.g., 9s for Vercel 10s limit
  });

  try {
    await Promise.race([
      runChatCompletion({ abortController, message }), // or your appendMessage
      timeoutPromise,
    ]);
  } catch (error) {
    // Ensure UI recovers after abort
    if (error.name === 'AbortError') console.log('Operation aborted');
    setIsLoading(false);
  }
};

Integration notes

• Replace runChatCompletion with your actual hook call (e.g., appendMessage).
• Adjust timeout for your provider.
• Manually calling setIsLoading(false) on abort/timeout prevents the "bricked" state.

References

• Hook reference: https://docs.copilotkit.ai/reference/hooks/useCopilotChat
• Streaming guide: https://docs.copilotkit.ai/guides/streaming
• Example: https://github.com/CopilotKit/CopilotKit/tree/main/CopilotKit/examples/next-openai

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

[obtuse bronze]

Thank you for your feedback! Our team will provide additional assistance. 🔄