React生产环境t.apply is not a function报错溯源方法

问题场景 #

基于create-react-app构建的生产环境React应用突发控制台静默报错，错误栈全部指向压缩后的ReactDOM产物，报错信息如下：

Uncaught TypeError: t.apply is not a function
 at Object.ze (react-dom.production.min.js:54:317)
 at Ue (react-dom.production.min.js:54:471)
 at react-dom.production.min.js:55:35
 at Lr (react-dom.production.min.js:105:68)
 at zr (react-dom.production.min.js:106:380)
 at react-dom.production.min.js:117:104
 at as (react-dom.production.min.js:273:42)
 at je (react-dom.production.min.js:52:375)
 at Ur (react-dom.production.min.js:109:469)
 at Qt (react-dom.production.min.js:74:59)

已知触发特征：点击特定组件内的任意输入框时触发，不会导致UI崩溃，仅在控制台输出错误。

定位最佳实践 #

• 优先通过sourcemap还原原始错误栈
  create-react-app生产构建默认会生成对应sourcemap文件，无需手动修改配置。注意：不要将sourcemap文件部署到公网服务器，避免源码泄露。可以本地保留构建生成的.map文件，在Chrome开发者工具的Sources面板中将map文件和对应压缩的js资源关联，刷新页面后触发报错，控制台的错误栈会直接映射回原始React源码、业务代码的具体行号，无需手动计算压缩代码的偏移量。
  结合当前t.apply is not a function的报错特征和点击输入框的触发时机，基本可以锁定错误出在React合成事件派发阶段：压缩后的变量t对应事件回调引用，说明事件系统尝试调用回调执行apply时，发现该值不是函数类型。
• 二分法缩小问题组件范围
  已经确定错误触发范围是某一特定组件，可逐层临时注释/移除该组件的子模块、第三方依赖组件，每次修改后重新构建测试点击输入框是否还会报错，快速定位到出问题的最小组件单元。排查时重点关注组件树中所有会在点击输入框时触发的事件绑定：包括onFocus、onClick、onChange、onBlur、onMouseDown等合成事件属性，检查所有传入值是否为合法的函数类型。
• 本地生产模式复现排查
  不要在开发模式下定位该类问题：开发模式React有额外的类型校验和冗余逻辑，很多生产环境的静默报错在开发模式会输出明确的类型警告，和生产环境表现不一致。本地执行npm run build构建后，用静态服务器启动构建产物，保持和线上环境完全一致的配置复现问题，同时打开React DevTools选中目标输入框，逐层检查组件props中所有事件相关属性的值，排查非函数类型的异常绑定。
• 针对事件绑定场景做专项检查
  该类报错的高频触发原因都是错误的事件绑定写法，重点排查几类典型问题：
  • 绑定事件时多写了执行括号，比如将onClick={handleClick}错写为onClick={handleClick()}，渲染时直接执行函数，将非函数类型的返回值（通常是undefined）传给了事件属性
  • 从props、context或第三方hook返回值中解构事件回调时，拼错了属性名，实际拿到的是undefined
  • 条件绑定事件时判断逻辑错误，传入了对象、字符串、布尔值等非函数类型的值
  • 给原生输入框DOM添加了和React合成事件重名的自定义属性，属性值不是函数类型

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