Bug: Optimistic message permanently freezes in pending state on sendMessage network failure in ChatInput.js

未关闭 适合新手
  • 哪里不对？
#1,416 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@yashsarvaiya45 已经在做这个了。

开始于 2026年11月5日。

  • #1417 来自 @yashsarvaiya45 —— 未关闭

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
84/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript, react
领域
frontend

调研方向

从 packages/react/src/views/ChatInput/ChatInput.js 中约第 399–414 行的 handleSendNewMessage 开始。跟踪 RCInstance.sendMessage 如何处理失败，以及附近如何使用 removeMessage 和 dispatchToastMessage。确认发送被拒绝时会移除待发送消息并显示错误 toast，而发送成功时会保持当前行为。

由索引模型根据 Issue 内容生成。

描述

Description

In packages/react/src/views/ChatInput/ChatInput.js, the handleSendNewMessage function adds a pending message to the message store before calling RCInstance.sendMessage. However, the API call lacks a try...catch block.

If a network error, client disconnection, or server timeout occurs, RCInstance.sendMessage throws an unhandled rejection. This bypasses the failure handling in the else block (removeMessage), leaving the message permanently stuck in the optimistic/pending grey state in the UI.

Affected File
  • packages/react/src/views/ChatInput/ChatInput.js (lines 399–414)
Steps to Reproduce
  1. Open EmbeddedChat connected to a server or test instance.
  2. Type a message in the input box.
  3. Disconnect internet (DevTools -> Network -> set to Offline) or trigger a network failure.
  4. Click Send or press Enter.
  5. Notice that the message appears in a grey pending state.
  6. Check DevTools Console: an unhandled rejection is logged.
  7. The message never clears or rolls back from the UI because removeMessage(pendingMessage._id) is never reached.
Expected Behavior

Network or dispatch errors should be caught gracefully using a try...catch block. If the call fails:

  • The pending message should be removed via removeMessage(pendingMessage._id).
  • A toast notification should notify the user that the message failed to send (dispatchToastMessage).
Proposed Solution

Wrap the RCInstance.sendMessage block in a try...catch:

try {
  const res = await RCInstance.sendMessage(
    {
      msg: pendingMessage.msg,
      _id: pendingMessage._id,
    },
    ECOptions.enableThreads ? threadId : undefined
  );

  if (res?.success) {
    clearQuoteMessages();
    replaceMessage(pendingMessage._id, res.message);
  } else {
    removeMessage(pendingMessage._id);
    dispatchToastMessage({
      type: 'error',
      message: 'Failed to send message',
    });
  }
} catch (error) {
  removeMessage(pendingMessage._id);
  dispatchToastMessage({
    type: 'error',
    message: error?.message || 'Error sending message',
  });
}
主要语言
JavaScript
星标
170
派生
397
平均合并
3 天 12 小时
30 天内合并 PR
2

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

RocketChat/EmbeddedChat 的其他 Issue

查看 RocketChat/EmbeddedChat 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。