WebSocket onerror事件无有效信息，如何排查错误原因？

1. 优化错误日志输出，完整捕获事件信息 #

当前你的onerror回调仅尝试读取event.data，但Chrome中WebSocket错误事件的有效信息可能分布在message、filename等其他属性中，甚至需要展开整个事件对象才能看到细节。修改onerror回调，补充完整的日志输出：

webSocket.onerror = (event) => {
    // 用console.dir展开事件完整结构，方便查看所有隐藏属性
    console.dir(event);
    // 收集多维度错误信息
    let errorDetails = [];
    if (event.message) errorDetails.push(`message: ${event.message}`);
    if (event.filename) errorDetails.push(`file: ${event.filename}`);
    if (event.lineno) errorDetails.push(`line: ${event.lineno}`);
    if (event.data) errorDetails.push(`data: ${event.data}`);
    DebugMsg(`webSocket.onerror: ${errorDetails.join(", ")}`);
};

同时调整DebugMsg函数，兼容Error对象和普通事件对象的序列化：

function DebugMsg(msg) {
    var msgdump = document.getElementById("msgdump");
    if (!msgdump) return;
    let strContent;
    if (typeof msg === "string" && msg.length > 0) {
        strContent = msg;
    } else if (msg instanceof Error) {
        strContent = `${msg.name}: ${msg.message}`;
    } else if (typeof msg === "object") {
        strContent = JSON.stringify(msg);
    }
    if (strContent) {
        strContent = `${new Date().toUTCString()}, ${strContent}...`;
        msgdump.innerHTML = `${strContent}\r\n${msgdump.innerHTML}`;
    }
}

2. 用Chrome网络面板排查握手阶段问题 #

WebSocket错误大多发生在HTTP握手环节，打开Chrome DevTools「网络」面板：

• 筛选「WS」类型请求，找到目标连接记录
• 检查响应状态码：正常握手会返回101 Switching Protocols，若为4xx/5xx，说明服务器拒绝了连接
• 核对请求URL：确认协议（ws:///wss://）、域名、端口是否正确
• 跨域场景下，检查服务器是否返回了Access-Control-Allow-Origin等合法CORS头

3. 查看服务器端日志 #

客户端onerror无详细信息时，服务器日志通常能提供关键线索：

• 确认服务器是否收到了WebSocket握手请求
• 检查服务器是否有连接失败的错误记录（如端口占用、协议不匹配、权限限制等）
• 验证服务器WebSocket路由和处理逻辑是否正常

4. 排查浏览器安全限制 #

Chrome的安全策略可能直接阻断连接，常见场景：

• 混合内容拦截：若页面是https://协议，却连接ws://（非加密）WebSocket，Chrome会默认阻止，控制台会有安全警告
• 内容安全策略(CSP)：检查页面CSP规则是否禁止了WebSocket连接，可在DevTools「控制台」查看相关提示

5. 验证消息发送逻辑 #

若连接成功后触发onerror，可能是发送的消息格式不合法：

• 检查cstrSendMsg的内容是否符合服务器要求（如JSON语法错误、数据长度超限）
• 临时注释ServiceRequests中的webSocket.send(cstrSendMsg)，确认是否还会触发错误，排除发送逻辑的问题

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