WebSockets & Realtime Systems Programming · 강의

견고한 오류 전파와 복구

WebSocket 애플리케이션에서 오류를 처리하고 로깅하며 우아하게 기능을 축소하는 전략을 개발합니다.

레슨 2/411개 단계

견고한 오류 전파와 복구은(는) CoddyKit의 무료 WebSockets & Realtime Systems Programming 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 12
레슨: 47

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“견고한 오류 전파와 복구” 강의는 무료인가요?

네 — “견고한 오류 전파와 복구” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 WebSockets & Realtime Systems Programming 강의 전체를 잠금 해제할 수 있습니다. WebSockets & Realtime Systems Programming 강의에는 총 4개의 강의가 포함되어 있습니다.

“견고한 오류 전파와 복구”에서 뭘 배우나요?

WebSocket 애플리케이션에서 오류를 처리하고 로깅하며 우아하게 기능을 축소하는 전략을 개발합니다. 브라우저에서 직접 실행하는 실습 코드로 WebSockets & Realtime Systems Programming을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

WebSockets & Realtime Systems Programming을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 WebSockets & Realtime Systems Programming은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“견고한 오류 전파와 복구” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 WebSockets & Realtime Systems Programming 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 WebSockets & Realtime Systems Programming 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← WebSockets & Realtime Systems Programming(으)로 돌아가기