Aspx页面Ajax加载图表Chrome正常但IE/Edge报错无提示，如何排查？

按从易到难的顺序逐步定位解决：

第一步：先修正示例代码自带的显性错误 #

Chrome对JS的容错性远高于IE/Edge，代码里的小问题在Chrome上能正常运行，到旧内核浏览器会直接触发无捕获异常，导致页面被替换成通用崩溃提示：

• 补全Ajax请求的必填参数：示例里的url、data两个参数是空值，IE碰到未定义的Ajax配置参数会直接中断上下文，必须替换成明确的接口地址、序列化完成的请求数据，不能留空。
• 修正循环的变量引用错误：成功回调里循环判定写的是i < res.length，但当前作用域根本没有定义res变量，只接收到了请求返回的data。Chrome可能碰巧能从全局作用域拿到同名变量跑通，IE/Edge在严格作用域解析下碰到未定义变量会直接抛ReferenceError，正确的循环逻辑应该基于拿到的返回值data做判定。
• 修正动态DOM拼接的不规范写法：示例里拼div的代码生成的节点是<div id=0></div>，id既没加引号，又是不符合HTML规范的数字开头id，IE碰到这类非标准DOM拼接会直接断渲染流程。正确写法应该给id加闭合引号，用合法格式的id名，比如拼接为<div id="chart-0"></div>这类符合规范的结构。

第二步：绕过浏览器默认的崩溃提示，拿到真实错误信息 #

IE/Edge碰到严重JS异常时会直接把整个页面替换成“This page is having a problem”的通用提示，完全吞掉真实的错误信息，必须先把错误捕获出来：

• 按F12打开开发者工具，切换到「调试器」面板，勾选“遇到所有异常时中断”选项，刷新页面，浏览器会直接定位到触发崩溃的代码行，不用靠猜测排查。
• 在页面最顶部的脚本块加全局错误拦截，优先级高于浏览器默认的崩溃页逻辑：

  window.onerror = function(message, source, line) {
    alert(`捕获到崩溃原因：${message}，错误位置：${source} 第${line}行`);
    return true;
  }
  

  加完这段代码，哪怕触发了严重错误，也会先弹出自定义的错误提示，不会直接跳通用崩溃页。

第三步：排查IE/Edge特有的兼容性问题 #

这类问题大多是Chrome校验宽松、IE/Edge校验严格导致的，代码本身在Chrome上运行无异常：

• 校验Ajax请求头适配性：示例里设置的contentType: 'application/json; charset=utf-8'，如果后端是老版本.NET Framework的Aspx接口，本身不支持直接接收JSON格式POST请求，Chrome会自动做兼容补全，IE/Edge会严格按照设置的请求头发送，后端直接返回500错误触发崩溃。要么调整后端接口的JSON接收能力，要么临时把请求头改成表单格式的application/x-www-form-urlencoded; charset=utf-8适配老接口。
• 校验跨域凭证配置：代码里开了withCredentials: true带cookie跨域请求，这类请求在IE/Edge下要求后端必须返回明确的Access-Control-Allow-Credentials: true响应头，且不能把允许源设为*，不然浏览器会直接拦截请求触发上下文异常，Chrome对这类跨域配置的校验要宽松很多。
• 校验ES语法兼容：示例里用了箭头函数、let声明，这类语法在IE11、旧版EdgeHTML内核下是不完全支持的，如果没有做语法转译，碰到不兼容的语法会直接抛语法错误，打断整个脚本块的执行。临时适配的话可以把箭头函数换成普通函数写法，把let替换成var。
• 校验图表组件兼容：如果用的是第三方图表库，要确认引入的版本是否支持当前使用的IE/Edge内核，比如新版ECharts、Chart.js已经放弃了对旧版内核的支持，必须降到兼容版本才能正常初始化，且要等对应DOM节点渲染完成后再初始化图表，不然在IE下初始化空节点会直接抛错。

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