如何在IIS上调试.Net Core 3.1 + CRA(Create React App)应用并排查运行报错

这个错误的本质是React-Table接收到的预期为数组的入参实际为非可迭代类型（undefined、null、字符串、普通对象等），本地运行正常但IIS部署后报错基本和环境配置差异、线上接口返回异常有关，你可以按以下步骤排查：

1. 快速定位错误触发点 #

错误栈已经明确指向GamerProfiles.js第355行的useTable调用，你可以直接在该位置临时添加调试日志：

// GamerProfiles.js 第355行调用useTable之前添加
console.log('传入的columns:', columns, Array.isArray(columns))
console.log('传入的data:', data, Array.isArray(data))

发布到IIS后打开浏览器控制台查看输出，90%以上的场景是data参数不是数组：

• 如果data为undefined或404响应内容，说明API请求失败
• 如果data为HTML字符串，说明IIS路由规则错误，把API请求重定向到了前端入口index.html

2. 排查IIS配置问题 #

• 确认服务器已经安装了对应版本的.NET Core 3.1 Hosting Bundle，未安装宿主包会导致所有后端接口请求返回404/502，前端拿不到预期的数组数据
• 如果你将应用部署在了IIS的虚拟子目录下，检查前端API请求路径是否适配了子目录路径，比如站点部署在/myapp路径下，原/api/xxx的请求需要改为/myapp/api/xxx，否则会404
• 检查IIS的CORS配置、请求过滤规则，确认没有拦截前端的API请求
• 临时关闭IIS的静态资源压缩功能，测试是否是js资源异常压缩导致的执行错误

3. 生产环境调试优化 #

• 不要只修改.NET的发布模式为Debug，还需要确保CRA构建时生成了sourcemap：只要你没有在.env配置文件中设置GENERATE_SOURCEMAP=false，npm run build会自动生成sourcemap文件，发布时将build目录下所有.map文件同步上传到IIS，就可以在浏览器控制台点击错误栈直接定位到未压缩的源码位置
• 本地执行npm run build后，用静态服务直接运行build后的产物测试，如果本地build后的代码也复现错误，说明和IIS无关，是代码未处理边界情况：比如接口请求失败、pending状态时直接将非数组值传给了React-Table，补充兜底逻辑即可：

// 给data补充兜底空数组
const tableInstance = useTable({ columns, data: data || [] })

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