可靠的错误传播与恢复
学习 WebSocket 应用中的错误处理、日志记录和优雅降级策略。
可靠的错误传播与恢复 是 CoddyKit 上的免费 WebSockets & Realtime Systems Programming 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 WebSockets & Realtime Systems Programming 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Handling Realtime Errors
Building reliable realtime applications requires more than just handling disconnections. You need a solid strategy for dealing with errors that occur within your WebSocket communication.
Robust error handling ensures your application remains stable, provides a good user experience, and helps you diagnose issues quickly.
Different Error Types
Errors in WebSocket applications can come from various sources:
- Protocol Errors: These are issues like malformed frames or invalid opcodes. Your WebSocket library usually handles these automatically.
- Application Logic Errors: Bugs in your server or client code that cause unexpected behavior or crashes during message processing.
- Network Errors: Problems like firewalls, proxy issues, or unstable internet connections, often leading to connection loss.
We'll focus on handling application and network-related errors effectively.
Server Error Handling
On the server, WebSocket libraries provide mechanisms to catch errors. For example, in Node.js with the popular ws library, both the server instance and individual client connections can emit 'error' events.
It's crucial to listen for these events to prevent your server from crashing and to log issues for debugging.
Server Error in Action
This Node.js example shows a simple WebSocket server that intentionally throws an error when a specific message is received. Notice how the wss.on('error') and ws.on('error') handlers catch it.
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('Client connected');
ws.on('message', function incoming(message) {
console.log('Received: %s', message);
if (message.toString() === 'cause error') {
// Simulate an application logic error
try {
throw new Error('Simulated application error!');
} catch (e) {
console.error('Caught application error:', e.message);
// In a real app, you might send this error to the client
ws.send(JSON.stringify({ type: 'error', message: e.message }));
}
} else {
ws.send(`Echo: ${message}`);
}
});
ws.on('error', (error) => {
console.error('WebSocket connection error:', error.message);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
wss.on('error', (error) => {
console.error('WebSocket server error:', error.message);
});
console.log('WebSocket server started on port 8080');
// To run this example:
// 1. npm init -y
// 2. npm install ws
// 3. node server.js
// Then connect with a client and send 'cause error'Client Error Handling
On the client side, the browser's native WebSocket object provides an onerror event. This event fires when errors occur during connection establishment, or at any point during the connection's lifetime.
It's important to note that onerror often precedes or accompanies a onclose event, indicating a problematic connection termination.
Client Error in Action
This HTML and JavaScript snippet demonstrates how to set up an onerror handler for a WebSocket client. Try running the server from the previous scene and then this client in your browser.
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Client Error Handling</title>
</head>
<body>
<h1>Client Error Handler</h1>
<p id="status">Connecting...</p>
<script>
const statusElement = document.getElementById('status');
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
statusElement.textContent = 'Connected! Try sending "cause error" from a different client.';
console.log('WebSocket connected.');
ws.send('Hello server!');
};
ws.onmessage = (event) => {
console.log('Message from server:', event.data);
statusElement.textContent = `Received: ${event.data}`;
};
ws.onerror = (error) => {
// The error object itself might not contain detailed info
// but it signals that an error occurred.
statusElement.textContent = 'Error occurred! Check console.';
console.error('WebSocket error event:', error);
};
ws.onclose = (event) => {
statusElement.textContent = `Disconnected. Code: ${event.code}, Reason: ${event.reason}`;
console.log('WebSocket disconnected:', event);
};
</script>
</body>
</html>Propagating Custom Errors
Sometimes, errors aren't about the connection itself, but about your application's logic. For example, a user trying to access unauthorized data or submitting invalid input. In these cases, you need to explicitly send an error message.
It's best practice to structure these as standard messages (e.g., JSON) with a specific type or status to differentiate them from regular data.
Server Sending Custom Errors
Here's how a server can send a structured error message back to the client. The client then needs to parse and handle this specific message type to react appropriately.
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8081 }); // Using a different port
wss.on('connection', function connection(ws) {
console.log('Client connected to custom error server');
ws.on('message', function incoming(message) {
const msgStr = message.toString();
if (msgStr === 'fetch_sensitive_data') {
// Simulate an authorization error
const errorResponse = {
type: 'error',
code: 403,
message: 'Access denied: You are not authorized for this data.'
};
ws.send(JSON.stringify(errorResponse));
} else {
ws.send(`Echo: ${msgStr}`);
}
});
ws.on('error', (error) => console.error('Connection error:', error.message));
ws.on('close', () => console.log('Client disconnected from custom error server'));
});
console.log('WebSocket server for custom errors started on port 8081');
// To run this example:
// 1. npm init -y
// 2. npm install ws
// 3. node server_custom_error.js
// Then connect a client and send 'fetch_sensitive_data'Graceful Degradation
When a severe error occurs, instead of completely failing, your application can "gracefully degrade" its functionality. This means offering a reduced but still usable experience.
- Partial Functionality: Disable features that rely on the problematic component, but keep others working.
- Fallback Mechanisms: Use alternative (perhaps less real-time) methods, like refreshing data via traditional HTTP requests.
- Inform User: Clearly communicate the issue and what functionality is affected, managing their expectations.
Error Strategy Check
Which of the following is an effective strategy for graceful degradation in a WebSocket application when a critical server-side error prevents real-time updates?
Error Handling Summary
You've learned that robust error handling in WebSocket applications involves understanding different error types, catching both server-side and client-side events, and explicitly propagating application-level errors.
Crucially, implementing graceful degradation ensures your application remains resilient and user-friendly even when things go wrong. Keep practicing these strategies to build more robust realtime systems!
常见问题解答
「可靠的错误传播与恢复」课时是免费的吗？
是的 — 「可靠的错误传播与恢复」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebSockets & Realtime Systems Programming 课程的其余内容，请升级到 CoddyKit PRO。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。
「可靠的错误传播与恢复」这节课中我会学到什么？
学习 WebSocket 应用中的错误处理、日志记录和优雅降级策略。 你通过在浏览器中直接运行的动手代码来练习 WebSockets & Realtime Systems Programming，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 WebSockets & Realtime Systems Programming 需要有经验吗？
无需任何先前经验。CoddyKit 上的 WebSockets & Realtime Systems Programming 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「可靠的错误传播与恢复」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 WebSockets & Realtime Systems Programming 课中编写并运行代码吗？
能。每节 WebSockets & Realtime Systems Programming 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 处理断开连接与重新连接
- 可靠的错误传播与恢复
- 心跳与连接保活
- 消息确认与传递保证