0Pricing
Vue Academy · 강의

전역 오류를 위한 app.config.errorHandler

전역 오류 처리기, Sentry/Datadog 로깅, 환경에 따른 오류 표시를 구현합니다.

전역 오류를 위한 app.config.errorHandler은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

전역 오류 처리기

Vue는 app 어디에서든 발생했지만 로컬에서 처리되지 않은 오류를 잡는 단일 함수인 app.config.errorHandler를 제공합니다. 이는 최후의 방어선입니다.

처리기의 매개변수 형식

onErrorCaptured와 동일한 세 가지 인수를 받습니다. 오류, 구성 요소 인스턴스, 정보 문자열입니다.

app.config.errorHandler = (err, instance, info) => {
  // global handling
};

설정하기

마운트하기 전에 시작 file에서 app 인스턴스에 설정하세요.

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(err, info);
};
app.mount("#app");

처리되지 않은 오류 잡기

전체 app에서 구성 요소 렌더링, 수명 주기 훅, 감시자, 이벤트 처리기에서 발생하는 오류를 잡습니다. 로컬 onErrorCaptured 훅을 지나 전파된 오류도 포함됩니다.

프로덕션에서 Sentry로 보고하기

프로덕션에서는 Sentry와 같은 오류 모니터링 서비스로 오류를 전달하여 사용자가 겪은 오류를 파악하세요.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(err, { extra: { info } });
  }
};

개발 중 상세 기록

개발 중에는 콘솔에 더 풍부한 세부 정보를 기록하여 빠르게 디버깅하세요.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.DEV) {
    console.group("Vue error");
    console.error(err);
    console.log("info:", info, "instance:", instance);
    console.groupEnd();
  }
};

환경에 따른 분기

견고한 처리기는 하나의 함수에서 두 가지를 모두 수행합니다. 프로덕션에서는 보고하고 개발 중에는 자세히 기록합니다.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) Sentry.captureException(err);
  else console.error("[Vue]", err, info);
};

비동기 오류

전역 처리기는 비동기 수명 주기 훅과 감시자 내부에서 발생한 오류도 잡습니다. Vue 외부에서 처리되지 않은 원시 프로미스 거부를 처리하려면 window 리스너도 추가하세요.

window.addEventListener("unhandledrejection", (e) => {
  Sentry.captureException(e.reason);
});

경계와의 관계

로컬 경계와 onErrorCaptured는 오류가 발생한 위치 가까이에서 오류를 처리하고 가둡니다. 전역 처리기는 빠져나간 모든 오류를 위한 안전망입니다. 두 가지를 함께 사용하세요.

조용히 무시하지 마세요

오류를 숨기는 빈 처리기는 피하세요. 최소한 항상 기록하거나 보고해야 합니다. 조용한 오류는 버그를 보이지 않게 만들고 추적하기 매우 어렵게 합니다.

맥락 추가하기

현재 경로, 사용자 식별자 또는 app 버전으로 보고 내용을 보강하면 프로덕션 오류를 더 빠르게 분류하고 해결할 수 있습니다.

Sentry.captureException(err, {
  tags: { info },
  user: { id: currentUserId }
});

빠른 확인

app.config.errorHandler는 무엇을 처리하나요?

복습

app.config.errorHandler = (err, instance, info) => {}는 전역에서 모든 오류를 잡는 처리기입니다. 프로덕션에서는 Sentry에 보고하고, 개발 중에는 자세히 기록하며, 로컬 경계와 함께 사용하여 계층적이고 복원력 있는 오류 처리를 구현합니다.

자주 묻는 질문

“전역 오류를 위한 app.config.errorHandler” 강의는 무료인가요?

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

“전역 오류를 위한 app.config.errorHandler”에서 뭘 배우나요?

전역 오류 처리기, Sentry/Datadog 로깅, 환경에 따른 오류 표시를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

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

“전역 오류를 위한 app.config.errorHandler” 강의는 얼마나 걸리나요?

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

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

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

이 강의의 모든 강의

  1. onErrorCaptured 생명주기 훅
  2. 오류 경계 컴포넌트
  3. 전역 오류를 위한 app.config.errorHandler
  4. 컴포저블의 비동기 오류 처리
← Vue Academy(으)로 돌아가기