[자바스크립트] 에러 핸들링

자바스크립트 코드를 실행하다 보면 예상치 못한 오류가 발생할 수 있습니다. 이러한 오류를 적절히 처리하지 않으면 웹 애플리케이션이 멈추거나 예상치 못한 동작을 할 수 있습니다. 따라서 자바스크립트 에러 핸들링은 안정적인 웹 애플리케이션 개발에 필수적인 부분입니다.

왜 에러 핸들링이 중요할까요?

• 사용자 경험 향상: 오류 발생 시 사용자에게 친절한 메시지를 보여주거나, 복구할 수 있는 방법을 제공하여 사용자 경험을 향상시킬 수 있습니다.
• 애플리케이션 안정성: 오류 발생 시에도 애플리케이션이 계속해서 동작하도록 하여 안정성을 높일 수 있습니다.
• 디버깅 용이: 오류 발생 시 정확한 오류 메시지와 위치를 파악하여 디버깅을 효율적으로 수행할 수 있습니다.

자바스크립트 에러 핸들링 방법

1. try...catch 문

가장 일반적으로 사용되는 에러 핸들링 방법입니다. try 블록 안에 실행하고 싶은 코드를 작성하고, catch 블록에서 오류가 발생했을 때 실행할 코드를 작성합니다.

try {
  // 오류가 발생할 수 있는 코드
  let result = x / 0; // 0으로 나누기 오류 발생
  console.log(result); // 이 코드는 실행되지 않음
} catch (error) {
  console.error('Error occurred:', error); // 오류 메시지 출력
} finally {
  console.log('Finally block executed.'); // 항상 실행됨
}

 

• try 블록에서 0으로 나누기 연산을 시도하여 의도적으로 오류를 발생시킵니다.
• catch 블록에서 발생한 오류를 콘솔에 출력합니다.
• finally 블록은 항상 실행되어 "Finally block executed."라는 메시지를 출력합니다.

2. window.onerror

전역적으로 발생하는 모든 JavaScript 오류를 처리하는 이벤트 핸들러입니다.

window.onerror = function(message, source, lineno, colno, error) {
  console.error('Error:', message, 'at', source, lineno, colno, error);
};

3. Promise

비동기 작업에서 발생하는 오류를 처리하는 데 사용됩니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. async/await

Promise를 더욱 간결하게 사용할 수 있도록 해주는 문법입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 데이터 처리
  } catch (error) {
    console.error('Error:', error);
  }
}

에러 객체

catch 블록에서 받는 error 객체는 다음과 같은 속성을 가질 수 있습니다.

• message: 오류 메시지
• name: 오류 이름 (예: ReferenceError, TypeError)
• stack: 스택 추적 (오류가 발생한 코드 위치)

주요 에러 종류

• SyntaxError: 문법 오류
• ReferenceError: 존재하지 않는 변수 참조
• TypeError: 타입 불일치
• RangeError: 유효한 범위를 벗어난 값
• URIError: encodeURI() 등의 함수에서 발생하는 오류

추가적인 에러 핸들링 기법

• Custom Error: 사용자 정의 오류를 생성하여 더욱 구체적인 오류 처리를 할 수 있습니다.
• Error Boundaries (React): React 컴포넌트에서 자식 컴포넌트의 오류를 잡아내고 대체 UI를 보여줄 수 있습니다.

에러 핸들링 시 고려 사항

• 사용자에게 명확한 메시지: 사용자가 이해할 수 있는 간결하고 명확한 오류 메시지를 제공해야 합니다.
• 로그 기록: 오류 발생 시 로그를 남겨 추후 문제 분석에 활용해야 합니다.
• 오류 복구: 가능한 경우 오류를 복구하거나 사용자에게 대안을 제공해야 합니다.
• 성능 고려: 에러 핸들링 로직이 애플리케이션 성능에 영향을 미치지 않도록 주의해야 합니다.

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%98%88%EC%99%B8-%EC%B2%98%EB%A6%AC

📚 자바스크립트의 예외 처리(Exception)

https://velog.io/@cookie004/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81-%EB%B0%A9%EB%B2%95-%EC%86%8C%EA%B0%9C

[번역] 자바스크립트 에러 핸들링 방법

https://ko.javascript.info/try-catch

'try..catch'와 에러 핸들링

https://velog.io/@longroadhome/%EB%AA%A8%EB%8D%98JS-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81

[모던JS: Core] 에러 핸들링