feature: error page, not-found 페이지 구현 #245
Conversation
Walkthrough이 변경사항은 앱 전반의 에러 처리 방식을 개선하고, 통일된 에러 페이지 및 에러 바운더리 컴포넌트를 도입합니다. 기존에는 각 컴포넌트나 함수에서 에러 발생 시 직접 메시지를 렌더링하거나 콘솔에 로그를 남겼으나, 이제 대부분의 경우 에러를 throw하여 상위에서 처리하도록 변경되었습니다. 또한, 에러 페이지와 에러 아이콘 컴포넌트가 새롭게 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AppComponent
participant ErrorBoundary
participant ErrorPage
User->>AppComponent: 페이지 접근/동작
AppComponent->>AppComponent: 에러 발생 (throw Error)
AppComponent->>ErrorBoundary: 에러 전파
ErrorBoundary->>ErrorPage: 에러 감지 후 에러 페이지 렌더링
ErrorPage->>User: 에러 안내 및 홈으로 이동 버튼 제공
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
♻️ Duplicate comments (3)
apps/web/app/(with-layout)/product-detail/[productId]/apis/index.ts (2)
89-89: 동일한 에러 처리 패턴 적용.위의 다른 함수들과 동일한 패턴으로 변경되었습니다. 일관성을 위해 파일 내 모든 함수에 동일한 패턴을 적용하는 것을 고려해 보세요.
103-103: 에러 처리 표준화 완료 필요.
getUserUploadedVideoList함수도 동일한 패턴으로 변경되었습니다. 파일 내 모든 함수의 에러 처리 방식을 통일하여 일관성을 유지해 주세요.apps/web/app/(with-layout)/(home)/utils/getReviewItems.ts (1)
26-28: getImageReviews 함수의 동작 변경
getImageReviews함수도 동일한 동작 변경이 적용되었습니다. 호출 코드에서 에러 처리를 적절히 하고 있는지 확인이 필요합니다.
🧹 Nitpick comments (8)
apps/web/app/(with-layout)/product-detail/[productId]/apis/index.ts (1)
74-74: 에러 컨텍스트 정보 손실.구체적인 에러 메시지를 제거하면 디버깅이 어려워질 수 있습니다. 중앙화된 에러 처리를 위해 의도적인 변경이라면, 최소한 에러 유형을 구분할 수 있는 방법을 고려해 보세요.
apps/web/app/not-found.tsx (2)
1-1: 'use client' 지시어 필요성 검토ErrorPage 컴포넌트에서 useRouter를 사용하므로 'use client' 지시어가 필요합니다. 하지만 not-found.tsx는 Next.js의 특별한 파일로, 서버 컴포넌트로 구현 가능한지 검토해보시기 바랍니다.
만약 서버 컴포넌트로 구현 가능하다면:
-'use client'; - -import ErrorPage from 'components/error-page/error-page'; +import Link from 'next/link'; +import { SvgError } from 'design-system/src/icons/fill/components/Error'; +import { Button } from 'design-system';그리고 ErrorPage 컴포넌트의 내용을 직접 구현하여 서버 컴포넌트로 유지할 수 있습니다.
8-8: 404 상황에 맞는 메시지 커스터마이징 고려현재 ErrorPage는 일반적인 에러 메시지를 표시합니다. 404 상황에 더 적합한 메시지로 커스터마이징하는 것을 고려해보시기 바랍니다.
ErrorPage에 props를 추가하여 메시지를 커스터마이징할 수 있습니다:
- <ErrorPage /> + <ErrorPage + title="ページが見つかりません" + message="お探しのページが存在しないか、移動した可能性があります。" + />apps/web/app/(with-layout)/product-detail/[productId]/page.tsx (2)
2-2: 미사용 import 제거 필요
notFoundimport가 더 이상 사용되지 않으므로 제거해야 합니다.- import { notFound } from 'next/navigation';
22-22: TODO 주석 해결 필요에러 핸들링 로직이 아직 완성되지 않았음을 나타내는 TODO 주석이 있습니다. 구체적인 에러 처리 로직 구현이 필요합니다.
apps/web/components/error-page/error-page.tsx (1)
14-16: 다국어 지원 고려에러 메시지가 일본어로 하드코딩되어 있습니다. 앱의 다국어 지원 정책에 따라 i18n 라이브러리 사용을 고려해보세요.
apps/web/components/error-boundary.tsx (1)
10-12: State 인터페이스의 error 속성 활용을 고려해보세요.State에 error 속성이 정의되어 있지만 render에서 사용되지 않고 있습니다. 향후 더 상세한 에러 정보를 ErrorPage에 전달할 계획이 있다면 유용할 것입니다.
필요시 다음과 같이 error 정보를 ErrorPage에 전달할 수 있습니다:
render() { if (this.state.hasError) { return ( <div className="flex w-full items-center justify-center"> - <ErrorPage /> + <ErrorPage error={this.state.error} /> </div> ); } return this.props.children; }apps/web/app/review-modal/[reviewId]/video/page.client.tsx (1)
61-61: 에러 메시지의 구체성을 고려해보세요.현재 모든 에러 케이스에서
new Error()를 사용하고 있습니다. 디버깅과 로깅을 위해 더 구체적인 에러 메시지를 포함하는 것을 고려해보세요.예를 들어:
if (listError || !reviewsListResponse?.data) { - throw new Error(); + throw new Error('Failed to load video reviews'); } if (currentIndex === -1) { - throw new Error(); + throw new Error('Review not found'); } if (!detail) { - throw new Error(); + throw new Error('Review details not available'); }Also applies to: 71-71, 104-104
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/design-system/src/icons/fill/svg/error.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
apps/web/app/(with-layout)/(home)/components/home-section-youtube.tsx(1 hunks)apps/web/app/(with-layout)/(home)/utils/getReviewItems.ts(2 hunks)apps/web/app/(with-layout)/(home)/utils/getUserStatus.ts(1 hunks)apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/presignedUrlApi.ts(1 hunks)apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/reviewApi.ts(1 hunks)apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/useReviewInput.ts(1 hunks)apps/web/app/(with-layout)/product-detail/[productId]/apis/index.ts(4 hunks)apps/web/app/(with-layout)/product-detail/[productId]/page.tsx(1 hunks)apps/web/app/api/apiRequest.ts(1 hunks)apps/web/app/error.tsx(1 hunks)apps/web/app/not-found.tsx(1 hunks)apps/web/app/review-modal/[reviewId]/image/page.client.tsx(2 hunks)apps/web/app/review-modal/[reviewId]/video/page.client.tsx(3 hunks)apps/web/components/error-boundary.tsx(1 hunks)apps/web/components/error-page/error-page.tsx(1 hunks)apps/web/hooks/use-product-api.ts(0 hunks)packages/design-system/src/icons/fill/components/Error.tsx(1 hunks)packages/design-system/src/icons/fill/components/index.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/hooks/use-product-api.ts
🧰 Additional context used
🧬 Code Graph Analysis (6)
apps/web/app/error.tsx (1)
apps/web/components/error-page/error-page.tsx (1)
ErrorPage(7-31)
apps/web/components/error-page/error-page.tsx (1)
packages/design-system/src/icons/fill/components/Error.tsx (1)
SvgError(6-10)
packages/design-system/src/icons/fill/components/Error.tsx (1)
packages/design-system/src/icons/fill/components/index.tsx (1)
SvgError(16-16)
apps/web/app/not-found.tsx (1)
apps/web/components/error-page/error-page.tsx (1)
ErrorPage(7-31)
apps/web/app/api/apiRequest.ts (1)
apps/web/app/error.tsx (1)
error(5-11)
apps/web/components/error-boundary.tsx (2)
apps/web/app/error.tsx (1)
error(5-11)apps/web/components/error-page/error-page.tsx (1)
ErrorPage(7-31)
🔇 Additional comments (17)
packages/design-system/src/icons/fill/components/index.tsx (1)
16-16: 새 에러 아이콘 내보내기가 올바르게 추가되었습니다.다른 아이콘 내보내기와 일관된 패턴을 따르고 있으며, 알파벳 순서도 적절히 유지되었습니다.
apps/web/app/error.tsx (2)
5-5: 컴포넌트 명명 규칙 확인 필요.함수명이 소문자
error로 되어 있는데, 일반적으로 React 컴포넌트는 대문자로 시작해야 합니다. Next.js의 특별한 에러 페이지 규칙인지 확인해 주세요.
7-9: 레이아웃 구현이 적절합니다.전체 화면 높이를 사용하여 에러 페이지를 중앙에 배치하는 flexbox 레이아웃이 올바르게 구현되었습니다.
apps/web/app/(with-layout)/(home)/utils/getUserStatus.ts (1)
8-8: getUserStatus 예외 던지기로 변경됨 — 호출부 예외 처리 검토 필요
getUserStatus가 더 이상false를 반환하지 않고, 엑세스 토큰이 없을 때throw new Error()를 던집니다.- 영향을 받는 호출 위치:
• apps/web/app/review-modal/[reviewId]/video/page.tsx (6줄)
• apps/web/app/review-modal/[reviewId]/image/page.tsx (6줄)
• apps/web/app/(with-layout)/page.tsx (15줄)
• apps/web/app/(with-layout)/product-detail/[productId]/page.tsx (12줄)위 모든 위치에서
await getUserStatus()호출을 감싸고 있는try/catch또는 상위 컴포넌트 에러 처리 로직이 있는지 확인해 주세요.apps/web/app/not-found.tsx (1)
1-11: 404 페이지 구현 완료not-found 페이지 구현이 깔끔하게 완료되었습니다. 중앙 집중식 에러 처리 패턴을 잘 따르고 있습니다.
apps/web/components/error-page/error-page.tsx (1)
7-31: 에러 페이지 구현 잘 되었습니다
- 디자인 시스템 컴포넌트를 적절히 활용
- 사용자 친화적인 에러 메시지와 홈 이동 버튼 제공
- 적절한 스타일링과 레이아웃 구성
apps/web/app/review-modal/[reviewId]/image/page.client.tsx (1)
104-104: 에러 처리 통일화 완료에러 발생 시 일관된 방식으로 처리하도록 변경된 것이 좋습니다.
packages/design-system/src/icons/fill/components/Error.tsx (1)
1-10: 아이콘 컴포넌트 잘 구현되었습니다
- TypeScript 인터페이스가 적절히 정의됨
- 크기와 색상에 대한 합리적인 기본값 제공
- SVG 구조와 마스크 사용이 올바름
- 추가 props 전달로 유연성 확보
- 디자인 시스템 패턴을 잘 따름
apps/web/components/error-boundary.tsx (6)
1-4: 클라이언트 컴포넌트 지시문과 임포트가 올바르게 구성되었습니다.'use client' 지시문과 필요한 모듈들이 적절하게 임포트되었습니다.
6-13: 타입 인터페이스가 잘 정의되었습니다.Props와 State 인터페이스가 명확하게 정의되어 있어 타입 안정성을 제공합니다.
15-19: 생성자가 올바르게 구현되었습니다.상태 초기화가 적절하게 이루어졌습니다.
21-23: getDerivedStateFromError가 올바르게 구현되었습니다.React 에러 바운더리의 표준 패턴을 따르고 있습니다.
25-27: componentDidCatch에서 에러 로깅이 적절합니다.에러 정보를 콘솔에 기록하는 것이 디버깅에 도움이 됩니다.
29-39: render 메서드가 올바르게 구현되었습니다.에러 상태에 따라 ErrorPage 또는 자식 컴포넌트를 적절히 렌더링합니다.
apps/web/app/review-modal/[reviewId]/video/page.client.tsx (3)
60-62: 에러 처리 방식이 새로운 패턴에 맞게 변경되었습니다.리뷰 목록 로딩 실패 시 사용자 정의 에러 메시지 대신 일반적인 Error를 throw하도록 변경되었습니다. 이는 ErrorBoundary와 함께 사용할 때 일관된 에러 UI를 제공하는 좋은 접근방식입니다.
70-72: 현재 리뷰 ID 찾기 실패 시 에러 처리가 개선되었습니다.리뷰 ID를 찾을 수 없는 경우의 에러 처리가 새로운 패턴에 맞게 변경되었습니다.
103-105: 리뷰 세부 정보 누락 시 에러 처리가 일관되게 변경되었습니다.리뷰 세부 정보가 없는 경우의 에러 처리가 다른 에러 케이스들과 일관되게 변경되었습니다.
|
|
||
| if (!response.data) { | ||
| throw new Error('상품 상세 정보를 가져올 수 없습니다.'); | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
파일 내 에러 처리 방식의 일관성 부족.
getReviewList 함수에서 에러 메시지를 제거했지만, 같은 파일의 getProductDetail(라인 29)과 getYoutubeList(라인 44) 함수는 여전히 구체적인 에러 메시지를 사용하고 있습니다. 파일 내에서 일관된 에러 처리 방식을 적용해 주세요.
🤖 Prompt for AI Agents
In apps/web/app/(with-layout)/product-detail/[productId]/apis/index.ts at line
59, the error thrown in getReviewList lacks a specific message, unlike
getProductDetail at line 29 and getYoutubeList at line 44 which use detailed
error messages. To maintain consistency, update the throw statement in
getReviewList to include a clear and descriptive error message similar to the
other functions.
| } | ||
| } catch (error) { | ||
| console.error(`${fileType} 파일 ${index + 1} 업로드 에러:`, error); | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
파일 업로드 에러 처리 방식 재고 필요.
파일 업로드 실패 시 구체적인 에러 정보(파일 타입, 인덱스)를 잃게 되어 디버깅이 어려워집니다. 또한 Promise.all과 함께 사용될 때 하나의 파일 업로드 실패가 전체 업로드 작업을 중단시킬 수 있습니다. 파일 업로드와 같은 부분적 실패가 가능한 작업에서는 기존의 로깅 방식이 더 적절할 수 있습니다.
다음과 같은 대안을 고려해 보세요:
} catch (error) {
- throw new Error();
+ console.error(`${fileType} 파일 ${index + 1} 업로드 실패:`, error);
+ // 또는 부분적 실패를 허용하는 방식으로 처리
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| throw new Error(); | |
| } catch (error) { | |
| - throw new Error(); | |
| + console.error(`${fileType} 파일 ${index + 1} 업로드 실패:`, error); | |
| + // 또는 부분적 실패를 허용하는 방식으로 처리 | |
| } |
🤖 Prompt for AI Agents
In
apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/presignedUrlApi.ts
at line 53, the current error handling throws a generic error without details,
causing loss of specific file upload error info and stopping all uploads on one
failure. Modify the code to catch individual file upload errors, log detailed
info including file type and index, and allow other uploads to continue by
handling errors per file instead of throwing a single error that halts
Promise.all.
| } catch (error) { | ||
| console.error('리뷰 작성 실패:', error); | ||
| throw new Error(); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 컨텍스트 보존을 위한 개선 제안
현재 구현에서는 원본 에러 정보가 손실되어 디버깅이 어려울 수 있습니다. 에러 전파 패턴을 유지하면서도 유용한 정보를 보존하는 것이 좋겠습니다.
다음과 같이 개선할 수 있습니다:
} catch (error) {
- throw new Error();
+ throw new Error('리뷰 제출 중 오류가 발생했습니다', { cause: error });
}또는 원본 에러를 그대로 전파:
} catch (error) {
- throw new Error();
+ throw error;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (error) { | |
| console.error('리뷰 작성 실패:', error); | |
| throw new Error(); | |
| } | |
| } catch (error) { | |
| - throw new Error(); | |
| + throw new Error('리뷰 제출 중 오류가 발생했습니다', { cause: error }); | |
| } |
🤖 Prompt for AI Agents
In
apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/useReviewInput.ts
around lines 139 to 141, the catch block throws a new generic error without
preserving the original error context, which hinders debugging. To fix this,
modify the catch block to either rethrow the original error or create a new
error that includes the original error message or stack trace, ensuring the
original error information is preserved and propagated.
| onError: () => { | ||
| throw new Error(); | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
TanStack Query 에러 처리 개선
onError 콜백에서 에러 객체를 받지만 활용하지 않고 있습니다. 에러 정보를 보존하여 디버깅에 도움이 되도록 개선해주세요.
- onError: () => {
- throw new Error();
+ onError: (error) => {
+ throw new Error('리뷰 제출 실패', { cause: error });
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onError: () => { | |
| throw new Error(); | |
| }, | |
| onError: (error) => { | |
| throw new Error('리뷰 제출 실패', { cause: error }); | |
| }, |
🤖 Prompt for AI Agents
In
apps/web/app/(with-layout)/product-detail/[productId]/@modal/(.)write-review/hooks/reviewApi.ts
around lines 31 to 33, the onError callback throws a generic error without using
the error object provided. Modify the onError function to accept the error
parameter and log or handle this error information to preserve details for
debugging instead of throwing a new empty error.
| } catch { | ||
| // TODO: 에러 핸들링 로직 추가 | ||
| notFound(); | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 처리 일관성 확보
새로운 에러 처리 패턴을 적용한 것은 좋습니다. 그러나 26-28번 줄의 수동 에러 처리도 동일한 패턴으로 통일하는 것을 고려해보세요.
if (!productDetailData) {
- return <div>상품 정보를 찾을 수 없습니다.</div>;
+ throw new Error();
}🤖 Prompt for AI Agents
In apps/web/app/(with-layout)/product-detail/[productId]/page.tsx at line 23,
the error is thrown manually without using the new consistent error handling
pattern applied in lines 26-28. Replace the manual throw with the standardized
error handling approach used elsewhere in the file to ensure consistency across
all error handling code.
| } | ||
| if (listError || !reviewsListResponse?.data) { | ||
| return <div>리뷰 목록을 불러올 수 없습니다.</div>; | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 처리 패턴 일관성 개선
새로운 에러 처리 패턴을 적용한 것은 좋습니다. 하지만 같은 파일 내에서 일관되지 않은 에러 처리가 있습니다.
71번 줄과 98번 줄도 동일한 패턴으로 통일하는 것을 고려해보세요:
if (currentIndex === -1) {
- return <div>리뷰를 찾을 수 없습니다.</div>;
+ throw new Error();
} if (!review) {
- throw new Error('리뷰 데이터가 없습니다.');
+ throw new Error();
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| throw new Error(); | |
| // … around line 71 … | |
| if (currentIndex === -1) { | |
| throw new Error(); | |
| } | |
| // … later, around line 98 … | |
| if (!review) { | |
| throw new Error(); | |
| } |
🤖 Prompt for AI Agents
In apps/web/app/review-modal/[reviewId]/image/page.client.tsx at line 61, the
error handling uses a plain throw new Error() which is inconsistent with the
improved error handling pattern used elsewhere in the file (lines 71 and 98).
Update the error throwing at line 61 to follow the same structured error
handling pattern as lines 71 and 98 to maintain consistency across the file.
| } catch (error) { | ||
| console.error(error); | ||
| throw error; | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
일관되지 않은 에러 처리
responseInterceptor 함수에서는 여전히 상세한 에러 처리를 하고 있는 반면, 여기서는 일반적인 에러를 던지고 있습니다. 에러 처리 방식을 일관되게 통일하는 것이 좋겠습니다.
🤖 Prompt for AI Agents
In apps/web/app/api/apiRequest.ts at line 78, the code throws a generic error
without details, which is inconsistent with the detailed error handling in the
responseInterceptor function. Update this line to throw an error with a
descriptive message or include relevant error details to maintain consistent and
informative error handling throughout the code.
| error: error, | ||
| }); | ||
| throw error; | ||
| throw new Error(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 정보 손실 우려
응답이 실패할 때 상세한 에러 정보(상태 코드, 메시지 등)가 모두 사라집니다. 디버깅과 모니터링이 어려워질 수 있습니다.
최소한 에러 타입이나 상태 코드 정보는 보존하는 것을 고려해보세요:
- throw new Error();
+ throw new Error(`API request failed: ${response.status}`);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| throw new Error(); | |
| - throw new Error(); | |
| + throw new Error(`API request failed: ${response.status}`); |
🤖 Prompt for AI Agents
In apps/web/app/api/apiRequest.ts at line 73, the current code throws a generic
error without preserving any detailed error information such as status code or
message. To fix this, modify the error throwing to include or wrap the original
error details, ensuring that the error type and status code are preserved for
better debugging and monitoring.
| } catch (error) { | ||
| console.error(error); | ||
| throw error; | ||
| throw new Error(); | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
원본 에러 정보 보존 필요
catch 블록에서 원본 에러 정보를 완전히 버리고 있습니다. 최소한 에러 타입이나 메시지 정보는 보존하여 디버깅에 도움이 되도록 해야 합니다.
🏁 Script executed:
#!/bin/bash
# 프로덕션 환경에서 에러 로깅이나 모니터링 시스템이 있는지 확인
rg -A 5 -B 5 "error|Error" --type ts --type tsx | head -20Length of output: 88
🏁 Script executed:
#!/bin/bash
# apiRequest.ts 파일 위치 및 에러 핸들링 부분 확인
file=$(fd apiRequest.ts)
echo "파일 경로: $file"
# catch 블록 주변 코드 출력 (70~90행)
sed -n '70,90p' "$file"
echo "로그/모니터링 관련 키워드 검색:"
rg -nE "console\.(log|error)|logger|Sentry" "$file" || echo "로그 관련 코드 없음"Length of output: 881
원본 에러 정보 및 로깅 추가 필요
catch 블록에서 기존 에러를 완전히 버리고 있어, 디버깅이 어려워집니다. 최소한 에러 메시지를 보존하고(또는 에러를 그대로 재전파) 콘솔 또는 로깅 시스템으로 출력하도록 수정하세요.
- 파일:
apps/web/app/api/apiRequest.ts - 위치: 77–79행 (catch 블록)
제안 변경 예시:
} catch (error) {
- throw new Error();
+ // 원본 에러 메시지 보존 및 로깅
+ console.error('[apiRequest] Error:', error);
+ throw new Error(`API 요청 실패: ${error instanceof Error ? error.message : String(error)}`);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (error) { | |
| console.error(error); | |
| throw error; | |
| throw new Error(); | |
| } | |
| } catch (error) { | |
| // 원본 에러 메시지 보존 및 로깅 | |
| console.error('[apiRequest] Error:', error); | |
| throw new Error(`API 요청 실패: ${error instanceof Error ? error.message : String(error)}`); | |
| } |
🤖 Prompt for AI Agents
In apps/web/app/api/apiRequest.ts around lines 77 to 79, the catch block
currently throws a new generic error without preserving the original error
details, which hinders debugging. Modify the catch block to either rethrow the
original error or create a new error that includes the original error message.
Additionally, add logging or console output of the original error to ensure the
error information is captured for troubleshooting.
Summary
Tasks
To Reviewer
Screenshot
Summary by CodeRabbit
New Features
버그 수정
기타 변경