升级react-scripts到4.0.3后报EmptyError: no elements in sequence如何解决

错误根因 #

EmptyError 是RxJS的标准错误，触发条件是：你使用的 first()/take(1) 操作符要求上游 Observable 至少发送1个符合条件的值，但你的 receiver$ 在 complete 之前没有发出任何满足 filter 条件的消息，所以触发报错。你替换成 take(1) 无效是正常的，二者在「上游无值就抛错」的逻辑上完全一致。

排查和修复方案 #

• 首先确认依赖版本变化：react-scripts 4.0.3 升级可能连带更新了rxjs、jest的版本，rxjs 6.x到7.x的版本迭代中对空序列的错误抛出逻辑有调整，你可以先检查锁文件中rxjs的版本是否和升级前一致。
• 代码层面快速修复：给 first() 操作符传入默认返回值，匹配失败时不会抛错，而是返回默认值走正常的next回调，自己在回调里处理异常情况即可：

receiver$
  .pipe(
    // 第一个参数是匹配谓词，可替代原来的filter逻辑；第二个参数是未匹配时的默认返回值
    first(message => message.requestId === requestId, null)
  )
  .subscribe(
    (result) => {
      // 处理匹配失败的情况
      if (!result) {
        reject(new Error('未匹配到对应requestId的消息'))
        return
      }
      const { success, data, error } = result
      if (success) {
        resolve(data);
      } else {
        console.log('rejecting this got data ', data, error);
        reject(error || data);
      }
    },
    error => console.warn('Caught error in make request', error)
  );

• 测试时序问题排查：react-scripts 4.x 升级后jest的fakeTimer、异步任务调度逻辑有变化，如果你的测试用了模拟定时器，或者存在「发消息早于订阅receiver$」的时序问题，就会导致收不到匹配消息。你可以在filter逻辑中加日志，确认测试运行时receiver$是否真的发出了对应requestId的消息，以及消息发出的时机是否在订阅之后。
• 加兜底超时逻辑：可在管道中加入timeout操作符，避免Observable长期挂死，也方便定位超时类问题：

import { timeout } from 'rxjs/operators'

receiver$.pipe(
  filter(message => message.requestId === requestId),
  first(),
  timeout(3000) // 3秒未收到匹配消息直接抛超时错误
)

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