HLS.js 中 xhrSetup 方法引发空指针异常的分析与解决方案

问题背景

在使用 HLS.js 1.5.0 版本时，开发者报告了一个关于 XMLHttpRequest 配置的错误。当使用 xhrSetup 配置项时，控制台会抛出"Uncaught (in promise) TypeError: Cannot read properties of null (reading 'onError')"的错误。这个错误在 1.4.14 版本中并不存在，但在升级到 1.5.0 后开始出现。

技术分析

该问题源于 HLS.js 内部加载机制的变化。在 xhr-loader.ts 文件中，当执行 loadInternal 方法时，系统会尝试访问 this.stats 和 this.callbacks 对象。但在某些情况下，这些对象可能已被销毁或未被正确初始化，导致空指针异常。

具体来说，问题出现在以下两种场景：

1. 当检查请求是否被中止时(this.stats.aborted)
2. 当触发错误回调时(this.callbacks.onError)

根本原因

深入分析表明，这种情况通常发生在 Hls 实例或加载器在 loadInternal 方法被调用后、但在异步回调执行前被同步销毁的情况下。特别是在使用 React 等框架时，组件卸载可能导致 HLS 实例被提前销毁。

解决方案

目前有两种可行的解决方案：

1. 临时解决方案：将 xhrSetup 配置设为 undefined，但这会失去对 XMLHttpRequest 的自定义配置能力。

2. 永久解决方案：通过修改 HLS.js 源代码，为 this.stats 和 this.callbacks 添加可选链操作符(?.)，使其变为：

   • this.stats?.aborted
   • this.callbacks?.onError

最佳实践建议

对于需要使用 CMCD(Common Media Client Data)功能的开发者，建议使用 HlsConfig.cmcd.includeKeys 配置而非 xhrSetup，因为：

• 性能更优：不会在微任务队列上调度请求开始
• 稳定性更高：避免了潜在的异步时序问题
• 代码更简洁：配置方式更为直接

总结

HLS.js 1.5.0 版本引入的这个错误虽然不影响基本功能，但会给开发者带来困扰。理解其背后的机制有助于我们更好地使用这个强大的流媒体播放库。对于遇到类似问题的开发者，建议关注官方补丁更新或按照上述方案进行临时修复。