fix(web): 修复 WebSocket 切换 session 时的错误
- 添加 isClosingRef 标记主动关闭,避免触发错误回调 - 在 effect 开始时重置 isClosingRef 支持 StrictMode - 增强 Vite 代理错误处理,静默 EPIPE/ECONNRESET 错误
This commit is contained in:
@@ -32,6 +32,8 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
|
|||||||
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
|
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
|
||||||
const reconnectAttemptsRef = useRef(0);
|
const reconnectAttemptsRef = useRef(0);
|
||||||
const maxReconnectAttempts = 5;
|
const maxReconnectAttempts = 5;
|
||||||
|
// 标记是否正在主动关闭连接(切换 session 时)
|
||||||
|
const isClosingRef = useRef(false);
|
||||||
|
|
||||||
// 用 ref 存储回调,避免依赖变化导致无限循环
|
// 用 ref 存储回调,避免依赖变化导致无限循环
|
||||||
const onErrorRef = useRef(onError);
|
const onErrorRef = useRef(onError);
|
||||||
@@ -57,7 +59,12 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
|
|||||||
|
|
||||||
// 连接 WebSocket
|
// 连接 WebSocket
|
||||||
const connect = useCallback(() => {
|
const connect = useCallback(() => {
|
||||||
|
// 如果正在关闭,不要连接
|
||||||
|
if (isClosingRef.current) return;
|
||||||
|
// 如果已经连接,不要重复连接
|
||||||
if (wsRef.current?.readyState === WebSocket.OPEN) return;
|
if (wsRef.current?.readyState === WebSocket.OPEN) return;
|
||||||
|
// 如果正在连接中,不要重复连接
|
||||||
|
if (wsRef.current?.readyState === WebSocket.CONNECTING) return;
|
||||||
|
|
||||||
const ws = createWebSocket(sessionId);
|
const ws = createWebSocket(sessionId);
|
||||||
|
|
||||||
@@ -68,6 +75,11 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
|
|||||||
|
|
||||||
ws.onclose = () => {
|
ws.onclose = () => {
|
||||||
setState((prev) => ({ ...prev, isConnected: false }));
|
setState((prev) => ({ ...prev, isConnected: false }));
|
||||||
|
// 主动关闭时不重连
|
||||||
|
if (isClosingRef.current) {
|
||||||
|
isClosingRef.current = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
// 限制重连次数
|
// 限制重连次数
|
||||||
if (reconnectAttemptsRef.current < maxReconnectAttempts) {
|
if (reconnectAttemptsRef.current < maxReconnectAttempts) {
|
||||||
reconnectAttemptsRef.current++;
|
reconnectAttemptsRef.current++;
|
||||||
@@ -76,6 +88,8 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
|
|||||||
};
|
};
|
||||||
|
|
||||||
ws.onerror = () => {
|
ws.onerror = () => {
|
||||||
|
// 主动关闭时不报错
|
||||||
|
if (isClosingRef.current) return;
|
||||||
onErrorRef.current?.(new Error('WebSocket connection error'));
|
onErrorRef.current?.(new Error('WebSocket connection error'));
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -166,12 +180,33 @@ export function useChat({ sessionId, onError, onSessionNotFound }: UseChatOption
|
|||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// 重置状态
|
||||||
|
isClosingRef.current = false;
|
||||||
|
setState({
|
||||||
|
messages: [],
|
||||||
|
isConnected: false,
|
||||||
|
isLoading: false,
|
||||||
|
streamingContent: '',
|
||||||
|
});
|
||||||
|
reconnectAttemptsRef.current = 0;
|
||||||
|
|
||||||
loadMessages();
|
loadMessages();
|
||||||
connect();
|
connect();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(reconnectTimeoutRef.current);
|
clearTimeout(reconnectTimeoutRef.current);
|
||||||
wsRef.current?.close();
|
// 标记为主动关闭,避免触发错误回调和重连
|
||||||
|
isClosingRef.current = true;
|
||||||
|
// 只关闭已建立的连接
|
||||||
|
if (wsRef.current) {
|
||||||
|
const ws = wsRef.current;
|
||||||
|
// 清除引用,防止后续操作
|
||||||
|
wsRef.current = null;
|
||||||
|
// 只有在 OPEN 或 CONNECTING 状态才关闭
|
||||||
|
if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
|
||||||
|
ws.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}, [loadMessages, connect]);
|
}, [loadMessages, connect]);
|
||||||
|
|
||||||
|
|||||||
@@ -61,6 +61,36 @@ export default defineConfig({
|
|||||||
target: 'http://localhost:3000',
|
target: 'http://localhost:3000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
ws: true,
|
ws: true,
|
||||||
|
// 忽略 WebSocket 代理错误(切换 session 时正常发生)
|
||||||
|
configure: (proxy) => {
|
||||||
|
// 静默忽略所有代理错误
|
||||||
|
proxy.on('error', (err, _req, res) => {
|
||||||
|
const msg = err.message || '';
|
||||||
|
// EPIPE/ECONNRESET 是正常的连接关闭错误
|
||||||
|
if (msg.includes('EPIPE') || msg.includes('ECONNRESET') || msg.includes('ECONNREFUSED')) {
|
||||||
|
if (res && 'writeHead' in res && !res.headersSent) {
|
||||||
|
res.writeHead(502);
|
||||||
|
res.end();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.error('[proxy error]', msg);
|
||||||
|
});
|
||||||
|
// WebSocket 请求阶段错误
|
||||||
|
proxy.on('proxyReqWs', (_proxyReq, _req, socket) => {
|
||||||
|
socket.on('error', () => {});
|
||||||
|
});
|
||||||
|
// WebSocket 响应阶段错误
|
||||||
|
proxy.on('open', (proxySocket) => {
|
||||||
|
proxySocket.on('error', () => {});
|
||||||
|
});
|
||||||
|
// WebSocket 关闭
|
||||||
|
proxy.on('close', (_res, socket) => {
|
||||||
|
if (socket && !socket.destroyed) {
|
||||||
|
socket.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
'/health': {
|
'/health': {
|
||||||
target: 'http://localhost:3000',
|
target: 'http://localhost:3000',
|
||||||
|
|||||||
Reference in New Issue
Block a user