> 웹 프론트엔드 > JS 튜토리얼 > 당신은 오류 처리를 잘못하고 있습니다!

당신은 오류 처리를 잘못하고 있습니다!

Susan Sarandon
풀어 주다: 2024-12-06 11:05:12
원래의
935명이 탐색했습니다.

You’re Doing Error-Handling Wrong!

오류 처리를 잘못하고 있습니다: 예측 가능하고 표준화된 응답의 사례

서론: 자기 주장이 강한 입장

JavaScript의 오류 처리는 강력한 의견을 불러일으키는 주제입니다. 저는 제 의견을 공유하려고 왔습니다. 전통적인 try-catch 접근 방식은 투박하고 불편하며 구식입니다. 가동 시간 및 인프라 모니터링을 위한 SaaS 솔루션인 Garmingo Status를 구축한 Garmingo에서는 try-catch 블록에서 벗어났습니다. 대신 우리는 비동기 작업에 대해 예측 가능하고 표준화된 응답을 제공하는 TypeScript 기반 접근 방식을 채택했습니다.

이 기사에서는 이 패러다임이 개발자 생산성의 판도를 바꿀 것이라고 믿는 이유와 코드베이스를 단순화하는 데 어떻게 도움이 되었는지 설명합니다. 독선적인 견해이기는 하지만, 자신의 프로젝트에서 오류를 처리하는 방법을 다시 생각해 보는 데 영감을 주기를 바랍니다.

try-catch의 문제

현실을 직시하자면: JavaScript의 오류 처리는 지저분해질 수 있습니다. 전통적인 try-catch 블록에는 다양한 과제가 있습니다.

  1. 상세: 모든 비동기 함수 호출을 try-catch로 래핑하면 불필요한 상용구가 추가됩니다. 코드가 복잡해지고 가독성이 떨어집니다.
  2. 일관되지 않은 오류 개체: JavaScript 오류 개체는 구조와 내용이 크게 다를 수 있습니다. 표준화 없이 이러한 오류를 처리하는 것은 추측 게임을 하는 것처럼 느껴질 때가 많습니다.
  3. 중첩 논리 지옥: 실패할 수 있는 여러 작업을 처리할 때 중첩된 try-catch 블록은 코드를 읽을 수 없는 엉망으로 만듭니다.

다음은 이러한 문제를 강조하는 간단한 예입니다.

try {
  const user = await fetchUser();
  try {
    const account = await fetchAccount(user.id);
    console.log(account);
  } catch (accountError) {
    console.error('Error fetching account:', accountError);
  }
} catch (userError) {
  console.error('Error fetching user:', userError);
}
로그인 후 복사
로그인 후 복사

결과는? 읽기, 디버그, 유지 관리가 더 어려운 코드입니다.

TypeScript 유형 응답 패러다임을 입력하세요

Garmingo Status에서는 모든 비동기 작업에 대해 표준화된 응답 구조를 선호하여 try-catch를 버렸습니다. 작동 방식은 다음과 같습니다.

구조

모든 비동기 함수는 사전 정의된 통합 유형을 사용하여 Promise를 반환합니다.

Promise<
  | { success: false; error: string }
  | { success: true; result: T }
>;
로그인 후 복사

이 접근 방식은 다음을 보장합니다.

  • 작업이 실패하면 결과는 항상 {성공: false, 오류: 문자열 }입니다.
  • 성공하면 {성공: true, 결과: T }입니다.
  • 성공이 참이면 결과 개체가 있고 오류 개체는 없으며 그 반대의 경우도 마찬가지입니다. 실패한 응답에 대해서는 결과를 사용할 수도 없습니다.

다음은 위와 동일한 예이며 다음 패턴으로 다시 작성되었습니다.

const userResponse = await fetchUser();

if (!userResponse.success) {
  console.error('Error fetching user:', userResponse.error);
  return;
}

const accountResponse = await fetchAccount(userResponse.result.id);

if (!accountResponse.success) {
  console.error('Error fetching account:', accountResponse.error);
  return;
}

console.log(accountResponse.result);
로그인 후 복사

보시다시피 앱의 기본 로직에 중첩이 도입되지 않습니다. 오류 처리를 위해 이러한 작은 검사를 추가할 뿐이지만 기본 흐름은 중단 없이 그대로 유지되며 처음에 오류 처리가 필요하지 않았던 것처럼 계속될 수 있습니다.

예측 가능하고 표준화된 오류 처리의 장점

1. 예측 가능성

가장 큰 이점은 무엇을 기대할지 정확히 알 수 있다는 것입니다. 작업이 성공하든 실패하든 구조는 일관됩니다. 이는 오류 개체에서 흔히 발생하는 모호성을 제거합니다.

2. 사용 편의성

깊이 중첩된 try-catch 블록의 시대는 지났습니다. 형식화된 접근 방식을 사용하면 코드 흐름을 중단하지 않고 오류를 인라인으로 처리할 수 있습니다.

3. 가독성 향상

구조화된 접근 방식을 통해 코드를 더 깔끔하고 따라하기 쉽게 만들 수 있습니다. 각 작업은 성공 및 실패 시나리오에서 발생하는 상황을 명확하게 정의합니다.

4. 향상된 유형 안전성

TypeScript의 정적 분석을 통해 오류 처리를 잊지 않도록 보장합니다. 실수로 성공 확인을 생략한 경우 TypeScript 컴파일러가 이를 플래그로 표시합니다.

균형 잡힌 관점

단점이 없는 접근 방식은 없습니다. 형식화된 응답 패러다임에서는 성공할 것이라고 확신하는 경우에도 모든 작업의 ​​성공 상태를 명시적으로 확인해야 합니다. 이는 오류 처리를 완전히 피할 수 있는 기존 접근 방식에 비해 약간의 오버헤드를 추가합니다(비록 사용자의 책임은 있지만).

그러나 이 "단점"도 장점 중 하나입니다. 잠재적인 실패에 대해 비판적으로 생각하게 하여 더욱 견고한 코드를 생성합니다.

Garmingo Status에서 이를 사용하는 방법

Garmingo에서는 이러한 접근 방식을 통해 비동기식 유틸리티와 라이브러리를 구축하는 방식을 변화시켰습니다. 모든 API 호출과 데이터베이스 쿼리는 표준화된 응답 구조를 준수하여 코드베이스 전반에 걸쳐 일관성을 보장합니다.
실제로 프로젝트 전체에서 재사용되고 실패할 수 있는 모든 단일 비동기 함수는 이 접근 방식을 사용합니다.
결과는? 더욱 원활하고 훨씬 빠른 개발 환경을 제공하고 심야 디버깅 세션이 줄어듭니다.

예를 들어 가져오기 함수는 다음과 같습니다.

try {
  const user = await fetchUser();
  try {
    const account = await fetchAccount(user.id);
    console.log(account);
  } catch (accountError) {
    console.error('Error fetching account:', accountError);
  }
} catch (userError) {
  console.error('Error fetching user:', userError);
}
로그인 후 복사
로그인 후 복사

이러한 예측 가능성은 우리 팀의 판도를 바꾸는 요소가 되었으며, 이를 통해 우리는 오류 처리 논리를 풀기보다는 기능 구축에 집중할 수 있게 되었습니다.

결론

전통적인 try-catch 블록이 그 자리를 차지하지만 현대 JavaScript 개발, 특히 TypeScript가 많은 코드베이스에서는 가치보다 문제가 더 많은 경우가 많습니다. 입력된 응답 패러다임을 채택하면 예측 가능성, 가독성 및 마음의 평화를 얻을 수 있습니다.

Garmingo에서는 이러한 접근 방식이 어떻게 개발을 단순화하고 Garmingo Status와 같은 세련된 제품을 제공하는 능력을 향상시키는지 직접 확인했습니다. 모든 사람에게 해당되는 것은 아니지만 더 많은 개발자가 고려해야 할 접근 방식이라고 믿습니다.

그럼 오류 처리를 다시 생각해 볼 준비가 되셨나요? 여러분의 생각을 알려주세요!

위 내용은 당신은 오류 처리를 잘못하고 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿