React集成Heap.io时报heap.push is not a function错误如何解决？

错误原因 #

• Heap SDK采用异步加载机制，标准初始化逻辑会先在全局生成一个临时heap数组作为事件队列，所有SDK加载完成前触发的上报请求都会通过heap.push()存入队列，待SDK加载完成后统一执行。如果仅引入了异步SDK脚本标签，未添加前置的临时队列初始化代码，SDK加载完成前调用heap.track时，其内部依赖的push方法就会不存在。
• React应用的初始化执行速度普遍快于异步SDK的加载速度，即使完成了初始化代码配置，在组件挂载、早期业务逻辑中直接调用heap.track时，如果SDK还未完成全量加载替换，也可能偶发该报错。
• 若在React组件内提前对全局heap对象做了局部赋值、解构操作，全局heap被加载完成的正式SDK实例替换后，局部变量没有同步更新，也会触发方法不存在的报错。

解决方案 #

补全标准初始化代码 #

不要仅引入异步script标签，需将完整的初始化片段添加到项目入口文件或公共HTML的head中，示例如下：

window.heap = window.heap || [];
heap.load = function (e, t) {
  window.heap.appid = e;
  window.heap.config = t = t || {};
  const r = document.createElement("script");
  r.type = "text/javascript";
  r.async = true;
  r.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js";
  const a = document.getElementsByTagName("script")[0];
  a.parentNode.insertBefore(r, a);
  const n = e => () => heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
  const p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"];
  for (let o = 0; o < p.length; o++) heap[p[o]] = n(p[o]);
};
// 替换为你自己的Heap应用ID
heap.load("xxxxxxxx5x");

这段代码会提前创建带push方法的临时heap队列，同时封装好track等所有官方方法，SDK加载完成前的所有上报请求都会先存入队列，不会触发报错。

调用前增加安全校验 #

在所有调用Heap相关方法的位置增加存在性判断，避免极端场景下的报错：

// 错误跟踪逻辑示例
if (window.heap && typeof window.heap.track === 'function') {
  window.heap.track('Error', {'message': e.message});
}

如果需要保证事件100%不丢失，可以自行实现临时队列存储未上报的事件，监听Heap SDK加载完成事件后再批量补发。

避免局部缓存heap实例 #

不要在React组件、工具函数中提前对window.heap做局部赋值，所有调用位置直接从全局window对象取heap实例，保证永远拿到的是加载完成后的正式SDK对象。

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