点击HTML按钮触发读取null的length属性TypeError错误如何排查

你遇到的报错不属于你执行的click代码本身的逻辑错误，而是点击事件触发后，网站自身绑定的第三方埋点（谷歌标签管理器GTM）代码逻辑抛出的异常，具体成因可参考以下几点：

• 首先解释try...catch无效的原因：你用try...catch包裹的仅为click()方法的同步调用过程，点击事件触发后执行的网站内置回调、GTM上报逻辑属于后续事件循环中的异步执行任务，不在你包裹的同步代码执行栈范围内，因此无法被捕获。
• 从报错堆栈分析，错误出现在gtm-client.js的initializePayload方法中，代码尝试读取某个null值的length属性，结合点击加载更多的场景，常见触发原因有三类：
  • 脚本触发的点击事件与真实用户点击的事件对象存在差异：GTM上报逻辑预期读取点击事件的某些上下文属性（如点击坐标、关联元素数据集），而控制台脚本调用click()生成的事件对象缺少对应字段，导致预期为数组/字符串的变量被赋值为null，读取length时触发报错。
  • DOM节点提前销毁：点击加载更多后，按钮本身会被立刻替换为加载中状态、或加载完成后直接隐藏/移除，GTM的上报回调存在延迟执行的情况，回调运行时尝试读取按钮相关DOM节点时已经获取到null，后续读取该节点关联属性的length时触发报错。
  • 上报数据字段异常：加载更多触发的接口返回数据中，某个GTM埋点约定需要上报的字段值为null，埋点代码未做非空判断直接读取该值的length属性触发报错。

该报错属于网站自身代码的健壮性问题，不会影响你触发加载更多的核心功能，仅会在控制台抛出错误提示。如果需要避免该错误打断后续你自己写的自动化脚本逻辑，可以监听全局error事件对该类报错做过滤处理。

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