[카카오테크 부트캠프] 에러 처리 및 디버깅

에러 처리를 위한 세 가지 방법

콘솔에 로깅

• 개발자 도구의 콘솔을 사용하여 자바스크립트 코드에서 발생한 에러를 기록합니다.
• console.error()를 사용하여 명시적으로 에러 메시지를 출력할 수 있습니다.

...
.catch((error) => console.error("Fetch error:", error));

경고창 또는 팝업

• alert() 함수를 사용하여 간단한 경고 메시지를 브라우저에서 표시할 수 있습니다.
• 이 방법은 사용자에게 직접적으로 에러 상황을 알리는 데 유용합니다.
• 혹은 경고 메시지 표시를 위한 UI를 개발하여 활용할 수도 있습니다.

...
.catch((error) => alert('Fetch error: ' + error.message));

오류 페이지 보여주기

• 심각한 오류가 발생했을 경우, 브라우저는 사용자에게 오류 페이지를 보여줄 수 있습니다.
• 오류 페이지의 내용을 서버에서 반환한 HTTP 상태 코드에 따라 다르게 표시합니다.

...
.catch((error) => {
location.href = '/error';
});

 

  → 브라우저에서의 에러 처리는 사용자 경험을 향상시키고, 문제를 원활하게 해결할 수 있도록 도와줍니다. 개발자는 적절한 에러 처리 방법을 선택하여 웹 애플리케이션의 안정성을 높이고 사용자의 UX를 개선할 수 있습니다.

API 플랫폼을 통해 디버깅하기

API 플랫폼을 사용하여 API 요청 및 응답을 디버깅하는 것은 개발 과정에서 매우 중요합니다. 다양한 API 플랫폼에서는 여러가지 기능을 제공하여 개발자가 효율적으로 API를 디버깅할 수 있습니다.

• 간편한 API 요청 생성: 직관적인 UI를 통해 다양한 HTTP 요청을 생성하고 관리할 수 있습니다.
• 실시간 요청 모니터링: 요청과 응답을 실시간으로 모니터링하여 성능 및 상태를 확인할 수 있습니다.
• 풍부한 테스트 환경: Pre-request Scripts와 Tests 기능을 활용하여 자동화된 테스트를 작성할 수 있습니다.
• 다양한 환경 설정: 환경 변수와 동기화 기능을 통해 여러 환경에서의 테스트 및 개발을 용이하게 합니다.
• 강력한 디버깅 및 로깅: 요청과 응답의 디버그 정보를 자동으로 기록하고, 로깅하여 문제 해결을 지원합니다.