使用window.open打开页面后API调用触发崩溃的问题排查求助

问题详情 #

从主页进入贡献页的两种方式对应异常情况：

• 使用window.open(url)打开页面时，点击触发API调用的按钮会直接导致标签页崩溃；但如果在页面加载阶段自动执行该API调用函数（无需点击操作），API调用成功且页面运行正常。
• 使用以下代码打开页面时无崩溃问题，但会替换父标签页，不符合保留父标签页的需求：

history.push(url);
window.open(url, "_self");

URL生成逻辑：

const url = `/documents/${itemId}?name=${item.title.replace(/ /g, "-")}&referrer=${encodeURIComponent(location?.pathname + location?.search)}`;

已完成的排查动作：全量添加debugger、try/catch块，但程序进入react-dom-development.js后无响应，标签页直接崩溃；检查过storage、useEffects、组件状态、props均未发现异常。

排查方向建议 #

• 检查跨标签页上下文冲突：window.open打开的新标签页会继承父页面的部分上下文，若贡献页存在针对storage的高频读写或无限循环监听逻辑，可能触发死循环导致崩溃。可临时注释所有storage相关监听代码测试。
• 对比API触发逻辑的差异：自动执行是在组件挂载阶段，点击执行是用户交互阶段，检查点击事件是否存在重复绑定（比如每次渲染都重新绑定），导致点击时触发大量重复调用。
• 验证URL参数的合法性：虽然对referrer做了编码，但item.title仅替换了空格，是否存在其他特殊字符（如中文、特殊符号）导致路由解析异常？可临时使用固定参数的URL测试，排除参数问题。
• 排查React渲染死循环：点击按钮后是否触发了无终止条件的状态更新？比如API回调中错误设置了会触发重渲染的状态，导致React陷入无限渲染循环，耗尽内存崩溃。可在所有setState/useState更新处添加日志，观察是否有重复触发。
• 检查window.opener相关逻辑：window.open打开的页面会保留window.opener引用，若贡献页存在向父页面发送消息且父页面又触发贡献页更新的逻辑，可能形成循环调用导致崩溃。可临时禁用window.opener相关代码测试。

内容的提问来源于stack exchange，提问作者Obaid Ur Rehman