[Vue.js] onErrorCaptured 훅을 활용한 에러 처리

Vue.js에서는 컴포넌트 트리에서 발생한 에러를 캐치하고 처리할 수 있는 onErrorCaptured 훅을 제공합니다. 이 훅은 하위 컴포넌트의 에러를 캐치하여 부모 컴포넌트에서 전역 에러 처리 로직을 적용할 때 유용합니다. 예를 들어, UI에서 에러를 표시하거나 로그를 수집하는 등의 작업을 수행할 수 있습니다.

아래는 onErrorCaptured 훅을 사용한 Vue 컴포넌트의 예제입니다.

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { onErrorCaptured } from 'vue';

export default {
  components: {
    ChildComponent: () => import('./ChildComponent.vue') // 예제를 위해 동적 임포트
  },
  setup() {
    onErrorCaptured((error, vm, info) => {
      // 에러가 발생했을 때 실행되는 함수
      // 여기에서 에러 처리 로직을 작성할 수 있습니다.
      console.error('에러가 발생했습니다:', error);
      console.error('에러가 발생한 컴포넌트:', vm);
      console.error('에러 정보:', info);
      // UI에서 에러 표시, 로그 수집 등의 작업을 수행할 수 있습니다.
      return false; // true를 반환하면 에러가 상위 컴포넌트로 전파되지 않습니다.
    });
  }
};
</script>

예제 설명

위 예제는 부모 컴포넌트에서 onErrorCaptured 훅을 사용하여 하위 컴포넌트에서 발생한 에러를 캐치하고 처리하는 방법을 보여줍니다.

1. 부모 컴포넌트에서 onErrorCaptured 훅을 사용하여 에러가 발생했을 때 실행되는 함수를 정의합니다. 이 함수는 세 개의 인자를 받습니다.

   • error: 발생한 에러 객체
   • vm: 에러가 발생한 Vue 인스턴스
   • info: 에러에 관한 추가 정보 (컴포넌트 이름, 라이프사이클 훅 등)

2. 함수 내부에서는 에러를 콘솔에 출력하고, 필요한 경우 UI에서 에러를 표시하거나 로그를 수집하는 등의 작업을 수행할 수 있습니다.

3. 마지막으로 return false;를 사용하여 에러가 상위 컴포넌트로 전파되지 않도록 설정할 수 있습니다.

onErrorCaptured 훅을 사용하면 하위 컴포넌트에서 발생한 에러를 캐치하여 효율적으로 처리할 수 있습니다. 이를 통해 애플리케이션의 안정성을 높이고 사용자 경험을 개선할 수 있습니다.