Promise.all로 묶었을 때 하나가 실패하면 페이지 전체가 에러가 나요

윤

윤*늘수강생 · 2026.10.16 22:31 · 조회 67

12:05 3-4 서버 컴포넌트로 데이터 가져오기 시청 중 남긴 질문

3-4 강의 12:05 부분처럼 대시보드에서 getUser, getPosts, getStats 세 개를 Promise.all로 한 번에 가져오고 있어요. 그런데 통계 API가 가끔 500을 주면 페이지 전체가 error.tsx 화면으로 바뀝니다.

export default async function Dashboard() {
  const [user, posts, stats] = await Promise.all([
    getUser(), getPosts(), getStats(), // stats만 가끔 실패
  ]);
  return <DashboardView user={user} posts={posts} stats={stats} />;
}

통계 카드 하나만 실패했을 때는 나머지 카드는 그대로 보여 주고, 통계 자리에만 ‘불러오지 못했어요’를 띄우고 싶어요. 어떻게 나누는 게 좋을까요?

답변1

김도윤강사2026.10.17

좋은 질문이에요. Promise.all은 하나라도 실패하면 전체가 실패로 끝나기 때문에, 가장 가까운 error.tsx가 페이지 전체를 대신 그리게 됩니다. 방법은 두 가지예요.

1. 꼭 필요하지 않은 데이터는 Promise.allSettled로 받기

const [user, posts, stats] = await Promise.allSettled([
  getUser(), getPosts(), getStats(),
]);
if (user.status === 'rejected') throw user.reason; // 사용자 정보는 필수
return (
  <DashboardView
    user={user.value}
    posts={posts.status === 'fulfilled' ? posts.value : []}
    stats={stats.status === 'fulfilled' ? stats.value : null} // null이면 안내 문구
  />
);

2. 통계 카드를 별도 서버 컴포넌트로 떼어 Suspense와 에러 경계로 감싸기 — 카드가 느리거나 실패해도 나머지 화면은 먼저 보입니다. 2-4 ‘로딩·에러 UI’에서 만든 경계를 카드 단위로 쓰는 것과 같아요.

먼저 필수 데이터(사용자)와 선택 데이터(통계)를 나눠 보시면 어떤 방법이 맞는지 정하기 쉬워요.

정

정*은2026.10.17

저도 같은 문제였는데 1번 방법으로 해결했어요. rejected일 때 reason을 에러 추적 도구로 보내 두면 원인 찾기도 편해요.

윤

윤*늘2026.10.17

감사합니다! 통계 카드는 2번 방법으로 떼어 내 볼게요.

답변과 댓글은 수강생과 강사만 남길 수 있어요.로그인