Twilio Flex自定义插件开发接电时出现‘no active call’异常求助

问题背景 #

基于React示例项目开发Twilio Flex自定义插件，试用账户环境下，来电已路由至默认任务队列，但点击UI绿色接起按钮时触发Error-45600（自定义代码通用错误），浏览器控制台抛出WorkerActions.AcceptTask: no active call错误。关闭错误提示后可正常通话、执行保持等操作，更换网络、隔离自定义代码后问题仍存在。

报错详情 #

• 浏览器报错：

ERROR
Script error.
at handleError (http://localhost:3000/plugins/plugin-ioconnect.js:11524:58)
at http://localhost:3000/plugins/plugin-ioconnect.js:11543:7

• 控制台报错：

twilio-flex.unbundled-react.min.js:207 11/6/2024, 5:19:53 PM - WorkerActions.AcceptTask: no active call
apply @ twilio-flex.unbundled-react.min.js:207
apply @ twilio-flex.unbundled-react.min.js:207
e.processError @ twilio-flex.unbundled-react.min.js:207
e.createAndProcessError @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
setTimeout
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
a @ twilio-flex.unbundled-react.min.js:207
Promise.then
c @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
s @ twilio-flex.unbundled-react.min.js:207
e.acceptTask @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
r @ twilio-flex.unbundled-react.min.js:207
e.invokeAction @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
(anonymous) @ twilio-flex.unbundled-react.min.js:207
r @ twilio-flex.unbundled-react.min.js:207
t.tryInvokeAction @ twilio-flex.unbundled-react.min.js:207
t.onClick @ twilio-flex.unbundled-react.min.js:207
onClick @ twilio-flex.unbundled-react.min.js:207
callCallback @ react-dom.development.js:3942
invokeGuardedCallbackDev @ react-dom.development.js:3991
invokeGuardedCallback @ react-dom.development.js:4053
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4067
executeDispatch @ react-dom.development.js:8273
processDispatchQueueItemsInOrder @ react-dom.development.js:8305
processDispatchQueue @ react-dom.development.js:8318
dispatchEventsForPlugins @ react-dom.development.js:8329
(anonymous) @ react-dom.development.js:8538
batchedEventUpdates$1 @ react-dom.development.js:22426
batchedEventUpdates @ react-dom.development.js:3742
dispatchEventForPluginEventSystem @ react-dom.development.js:8537
attemptToDispatchEvent @ react-dom.development.js:6035
dispatchEvent @ react-dom.development.js:5954
unstable_runWithPriority @ react.development.js:2764
runWithPriority$1 @ react-dom.development.js:11306
discreteUpdates$1 @ react-dom.development.js:22443
discreteUpdates @ react-dom.development.js:3753
dispatchDiscreteEvent @ react-dom.development.js:5919Understand this error
twilio-flex.unbundled-react.min.js:207 Uncaught Error: no active call
    at new n (twilio-flex.unbundled-react.min.js:207:6461573)
    at e.createAndProcessError (twilio-flex.unbundled-react.min.js:207:6464687)
    at twilio-flex.unbundled-react.min.js:207:6590127

排查与解决步骤 #

• 验证任务与通话状态同步逻辑
  Flex接起按钮默认绑定的AcceptTask动作需要任务关联的通话处于active状态。试用账户跨区域路由可能导致任务状态更新与通话建立存在延迟，可通过监听Task对象的status和callSid属性，确认接起动作触发时通话已完成建立。

• 检查Flex插件版本兼容性
  确认使用的Flex UI SDK版本与React示例项目依赖版本匹配。部分旧版本SDK在跨区域场景下存在状态同步bug，尝试升级至最新稳定版（如@twilio/flex-ui@2.x系列），同时同步更新相关依赖包。

• 调整任务路由的事件触发时机
  在Studio流程中，确保Connect Agent组件的"Wait for agent to accept"选项设置正确，避免任务过早派发给Agent导致通话未就绪。可添加短暂延迟（如1-2秒）后再触发任务推送，给通话建立留足时间。

• 禁用自动AcceptTask的重复触发
  即使未主动调用AcceptTask，插件或Flex内置逻辑可能因状态监听异常重复触发该动作。可通过自定义拦截器，在任务状态为reserved且通话未就绪时，阻止AcceptTask动作执行：

  import { Actions } from '@twilio/flex-ui';
  
  Actions.addListener('beforeAcceptTask', (payload, abort) => {
    const { task } = payload;
    if (task.attributes.callStatus !== 'ringing' && task.attributes.callStatus !== 'active') {
      abort('Call not ready yet');
    }
  });
  

• 试用账户区域限制适配
  英国地区试用账户可能存在Twilio媒体资源区域限制，可在Flex控制台的"Voice Settings"中，将媒体区域手动指定为eu-west-1（爱尔兰），尽管官方标注暂不支持，但部分场景下可解决跨区域状态同步问题。

• 忽略非致命错误（临时方案）
  由于关闭错误提示后不影响通话功能，可通过自定义错误处理器拦截no active call错误，避免弹窗干扰：

  import { ErrorManager } from '@twilio/flex-ui';
  
  ErrorManager.addListener('beforeError', (error) => {
    if (error.message.includes('no active call')) {
      return false; // 阻止错误弹窗
    }
    return true;
  });
  

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