React-PDF 字体加载失败问题分析与解决方案

问题背景

在使用React-PDF库进行PDF生成时，开发者遇到了一个关于自定义字体加载的问题。当尝试通过Font.register方法注册并使用自定义字体时，系统抛出"[Fetch TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation]"错误。这个问题在React 16.14版本中出现，但在之前版本中工作正常。

问题本质

深入分析后发现，问题根源在于React-PDF的字体加载机制存在缓存逻辑缺陷。具体来说，在packages/font/src/font.js文件中，字体加载器(_load函数)的实现存在一个关键的缓存处理问题：

1. 当首次加载字体失败时（可能由于网络问题或其他临时性错误）
2. 系统会将这个失败的Promise永久缓存
3. 导致后续所有加载尝试都会直接返回这个已缓存的失败Promise
4. 系统失去了自动重试的能力

技术细节

在React-PDF的字体加载实现中，使用了一个loadResultPromise变量来缓存字体加载结果。这个设计原本是为了优化性能，避免重复加载相同的字体资源。然而，当加载失败时，这个缓存机制反而成为了阻碍：

// 问题代码示例（简化版）
let loadResultPromise = null;

async function _load() {
  if (loadResultPromise) {
    return loadResultPromise;
  }
  
  loadResultPromise = fetchFont().catch(error => {
    // 这里缺少重置loadResultPromise的逻辑
    throw error;
  });
  
  return loadResultPromise;
}

解决方案

针对这个问题，正确的做法应该是：

1. 在字体加载失败时，重置loadResultPromise为null
2. 允许后续调用重新尝试加载字体
3. 修改后的代码逻辑如下：

// 修复后的代码示例（简化版）
let loadResultPromise = null;

async function _load() {
  if (loadResultPromise) {
    return loadResultPromise;
  }
  
  loadResultPromise = fetchFont().catch(error => {
    loadResultPromise = null; // 关键修复：重置缓存
    throw error;
  });
  
  return loadResultPromise;
}

临时解决方案

对于无法立即修改React-PDF源码的开发者，可以考虑以下临时解决方案：

1. 实现自定义字体加载器，绕过内置的字体加载机制
2. 使用base64编码的字体数据，避免网络请求
3. 在应用层实现重试逻辑，捕获错误后重新初始化字体加载

最佳实践建议

在使用React-PDF处理自定义字体时，建议开发者：

1. 对字体资源进行预加载，确保在生成PDF前字体已可用
2. 实现错误边界和重试机制，处理可能的加载失败情况
3. 考虑将常用字体打包到应用中，减少对外部资源的依赖
4. 监控字体加载性能，优化用户体验

总结

React-PDF的字体加载缓存机制在处理失败情况时存在逻辑缺陷，导致自定义字体无法正常加载。通过分析源码定位到问题所在，并提出了相应的修复方案。开发者可以根据实际情况选择直接修改源码或采用临时解决方案来处理这一问题。