CKEditor5 Comments Adapter未处理CKEditorError及Watchdog相关技术咨询

问题背景 #

使用CommentAdapter添加评论时，服务器返回错误，addComment返回Promise.reject()，此时抛出CKEditorError：

bundle.js:48916 Uncaught (in promise) CKEditorError: commentsrepository-add-comment-internal-error
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-commentsrepository-add-comment-internal-error
    at bundle.js:48916:41

React集成的CKEditor已默认集成Watchdog，但评论功能崩溃后未重启，不清楚错误处理逻辑。

React-CKEditor代码片段：

<CKEditorContext context={ClassicEditor.Context}>
     <CKEditor
                    editor={ClassicEditor}
                    onReady={async editor => {
                      console.log(
                        'onReady is called after CKEditorError',
                        editor,
                      );
                    ... // 未配置watchdogConfig
      ...
...

文档说明：

The React integration comes with the watchdog feature already integrated into the core.

核心问题 #

• 是否可以预期评论功能会以某种方式显示错误？
• 如何确认Watchdog正在运行并发挥作用？
• 为何适配器的addComment方法返回Promise.reject()会导致整个评论功能崩溃？

回答 #

1. 评论功能是否会自动显示错误？ #

CKEditor5的评论功能默认不会自动在UI层展示addComment失败的错误。这类内部错误会以CKEditorError的形式抛出，但需要你手动处理并在UI上反馈给用户。

你可以通过监听编辑器的error事件，或者在CommentAdapter的addComment方法内部捕获reject，然后自定义错误提示（比如弹出提示框、在评论区域显示错误信息）。

2. 如何确认Watchdog正在运行并发挥作用？ #

• 查看控制台日志：Watchdog运行时，当编辑器出现崩溃风险，会在控制台输出类似Watchdog has detected an error and is restarting the editor的日志。
• 访问Watchdog实例：在React集成中，你可以通过editor.watchdog获取实例，然后检查其状态：

  onReady={async editor => {
    console.log('Watchdog instance:', editor.watchdog);
    console.log('Watchdog is active:', editor.watchdog.isActive);
  }}
  

• 主动触发测试错误：可以模拟一个会导致编辑器崩溃的操作，比如故意抛出一个未捕获的错误，观察编辑器是否会自动重启。

3. 为什么addComment返回Promise.reject()会导致评论功能崩溃？ #

这是因为CommentAdapter的addComment方法抛出的未捕获错误被CKEditor的内部错误处理机制捕获后，触发了commentsrepository-add-comment-internal-error，而这个错误没有被你的代码或编辑器的默认处理逻辑妥善处理，导致评论模块的状态异常，进而引发功能崩溃。

解决方法：

• 在addComment方法内部捕获错误，不要让Promise直接reject，而是返回一个已处理的结果，同时手动触发错误提示：

  addComment: async (comment) => {
    try {
      // 调用服务器接口
      await yourApiCall(comment);
    } catch (error) {
      // 自定义错误处理逻辑，比如提示用户
      alert('添加评论失败：' + error.message);
      // 如需让编辑器感知错误，可重新抛出包装后的错误或返回特定标识
      throw new Error('添加评论失败');
    }
  }
  

• 监听编辑器的error事件，全局捕获并处理这类错误，避免错误扩散导致模块崩溃：

  onReady={async editor => {
    editor.on('error', (evt, data) => {
      console.error('编辑器错误:', data);
      // 添加自定义错误处理逻辑
    });
  }}
  

内容的提问来源于stack exchange，提问作者panchicore