병렬 API 호출에서 디버깅과 성능을 모두 잡는 방법: Promise.allSettled 적용

[sgoldenbird]

🐞 문제 상황 (Problem Description)

두 개의 비동기 API (getDashboardDetail, getMemberList)를 병렬로 호출하기 위해 Promise.all()을 사용했지만,
하나라도 실패하면 전체가 reject되고, 가장 먼저 실패한 에러 하나만 전달되어 어떤 API가 실패했는지 정확히 확인하기 어려웠다.

---

💻 환경 정보 (Environment)

• 브라우저: Chrome 138
• 프론트엔드 프레임워크: React 19, Vite 사용
• 배포 환경: Vercel
• API 서버: 외부 REST API (수정 불가)

---

🔍 발생 원인 분석 (Investigation)

• Promise.all()은 첫 번째 reject된 Promise의 에러만 반환함
• 콘솔에는 에러 메시지 하나만 찍히기 때문에 어떤 API가 실패했는지 명확히 알 수 없음
• 병렬 호출이기 때문에 실패 지점을 디버깅하기 어려움
• try...catch에서 받은 error가 getDashboardDetail의 것인지, getMemberList의 것인지 구분 불가

---

🛠 시도해본 해결 방법 (Attempts)

방법 1: await로 순차 실행

try {
  console.log('Fetching dashboard detail...');
  const dashboardDetail = await getDashboardDetail(dashboardId);

  console.log('Fetching member list...');
  const memberListResponse = await getMemberList({ dashboardId, size: 4 });

  return { dashboardDetail, memberListResponse };
} catch (error) {
  console.error('🩺Failed to load dashboard data:', error);
}

• 장점: 에러가 발생한 위치가 명확히 드러나 디버깅 쉬움
• 단점: 순차 실행이므로 응답 시간이 느림 (병렬 실행 아님)

방법 2: Promise.allSettled() 사용 (채택)

try {
  const results = await Promise.allSettled([
    getDashboardDetail(dashboardId),
    getMemberList({ dashboardId, size: 4 }),
  ]);

  const rejected = results.filter((r) => r.status === 'rejected');

  if (rejected.length > 0) {
    rejected.forEach((r) => console.error('🩺 API call failed:', r.reason));
    throw rejected[0].reason;
  }

  const dashboardDetail = (results[0] as PromiseFulfilledResult<Dashboard>).value;
  const memberListResponse = (results[1] as PromiseFulfilledResult<MemberListData>).value;

  return { dashboardDetail, memberListResponse };
} catch (error: unknown) {
  console.error('🩺 Failed to process API calls:', error);
  if (error instanceof Response) throw error;
  throw new Response(DEV_ERRORS.API.FETCH_FAILED, { status: 500 });
}

• 장점:

  • 병렬 실행으로 빠른 로딩 속도 유지
  • 실패한 API를 개별적으로 식별 가능
  • 성공한 결과도 함께 다룰 수 있음 (에러 무관하게)

• ⚠ 단점: 처리 코드가 다소 복잡해짐

---

✅ 최종 해결 방법 (Final Solution)

Promise.allSettled()을 사용하여 모든 API 요청을 병렬로 수행

• 요청 결과 중 실패한 항목이 있어도 전체 요청 흐름을 중단하지 않음
• 실패한 요청은 reason을 통해 개별 확인하고, 가장 먼저 실패한 에러를 throw
• 콘솔에 모든 실패 사유를 로깅하여 디버깅

---

💡 알게 된 점 (Lessons Learned)

• Promise.all()은 간단하지만 에러 디버깅에는 불리한 구조
• Promise.allSettled()은 성능(병렬성)과 에러 가시성을 모두 확보할 수 있는 더 나은 대안
• 단순히 작동하는 코드보다, 운영 중 발생할 수 있는 예외 상황을 구조적으로 처리하는 설계가 중요
• 향후 병렬 API 호출 시 allSettled + 필터링 패턴을 우선 고려할 것