[24.03.06 / TASK-133] Feature - 서버 오류 핸들링 페이지 퍼블리싱 #21
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Walkthrough이 변경사항은 여러 컴포넌트 및 유틸리티에서 오류 처리와 쿼리 클라이언트 사용 방식을 수정합니다. 주요 내용으로는 API 요청 모듈에서 403 대신 401 상태코드를 처리하도록 변경되고, 로그인 및 로그아웃 관련 컴포넌트에서 쿼리 클라이언트 사용 방식이 업데이트됩니다. 또한 쿼리의 가비지 컬렉션 시간 조정, 사용자 리다이렉션을 위한 새로운 revalidate 함수 도입, 오류 표시에 쓰이는 HTML 템플릿 추가, 그리고 Sentry 관련 의존성 추가가 포함되어 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant H as 헤더 컴포넌트
participant R as revalidate()
participant QC as QueryClient
participant Router as 라우터
U->>H: 로그아웃 버튼 클릭
H->>H: 로그아웃 뮤테이션 트리거
H->>R: 비동기 revalidate() 호출
R->>R: '/'에 대한 revalidatePath 실행
R->>Router: '/'로 리다이렉션 수행
H->>QC: 쿼리 캐시 삭제
H->>Router: 라우터 경로 대체('/')
sequenceDiagram
participant U as 사용자
participant API as API 인스턴스
participant B as 브라우저
U->>API: API 요청 전송
API-->>API: 응답 상태(401) 확인
API->>B: location이 존재할 경우 '/'로 리다이렉트
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 0
🧹 Nitpick comments (2)
src/app/error/page.tsx (2)
8-8: Image 컴포넌트의 속성을 최신 Next.js 권장사항에 맞게 수정하세요.Next.js 13 이상에서는
layout="fill"대신fill={true}를 사용하는 것이 권장됩니다.- <Image layout="fill" src={'/favicon.png'} alt="" /> + <Image fill src={'/favicon.png'} alt="Velog Dashboard 로고" />
16-18: 더 구체적인 에러 메시지나 사용자 안내 추가를 고려해보세요.현재는 일반적인 에러 메시지만 표시하고 있습니다. 사용자에게 새로고침을 시도하거나 홈으로 돌아갈 수 있는 버튼 등을 제공하면 더 나은 사용자 경험을 제공할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/apis/instance.request.ts(1 hunks)src/app/(with-tracker)/(login)/Content.tsx(1 hunks)src/app/error/page.tsx(1 hunks)src/components/auth-required/header/index.tsx(2 hunks)src/components/auth-required/main/Section/index.tsx(1 hunks)src/utils/queryUtil.ts(1 hunks)src/utils/revalidateUtil.ts(1 hunks)
🔇 Additional comments (11)
src/utils/queryUtil.ts (1)
6-6: GC_TIME 값 변경에 대한 영향 고려가 필요합니다.GC_TIME 값이 1초에서 20분으로 크게 증가되었습니다. 이는 쿼리 캐시가 메모리에 유지되는 시간을 대폭 늘리는 변경사항입니다.
이 변경으로 사용자 경험이 개선될 수 있지만(데이터 재요청 감소), 장시간 사용 시 메모리 사용량이 증가할 수 있습니다. 해당 값이 애플리케이션의 성능 요구사항에 적합한지 확인해 보세요.
src/app/(with-tracker)/(login)/Content.tsx (1)
6-6: 로그인 성공 후 쿼리 캐시 초기화 로직이 제거되었습니다.useQueryClient import와 client.clear() 호출이 제거되었습니다. 이전 코드에서는 로그인 성공 후 캐시를 초기화했지만, 현재는 그 로직이 없습니다.
이 변경사항이 의도적인지 확인하고, 다른 부분(예: header의 logout 함수)과의 일관성이 유지되는지 검토해보세요. 로그인 시점에 캐시를 유지하는 것이 애플리케이션의 데이터 흐름 관점에서 정확한지 확인이 필요합니다.
src/app/error/page.tsx (1)
1-22: 에러 페이지 구현이 잘 되었습니다.에러 처리 페이지가 깔끔하게 구현되었습니다. 디자인이 애플리케이션의 전체적인 스타일과 일관성 있게 유지되고 있으며, 반응형 디자인도 적절히 적용되어 있습니다.
src/components/auth-required/header/index.tsx (3)
12-13: revalidate 유틸리티 추가가 적절합니다.revalidate 유틸리티를 가져와서 로그아웃 처리 과정에 적용한 것은 좋은 접근입니다.
42-46: 비동기 처리 개선이 잘 되었습니다.로그아웃 시 revalidate 함수를 비동기로 처리하고, 완료 후 캐시 클리어 및 리다이렉트를 수행하도록 개선한 점이 좋습니다. 이는 로그아웃 과정에서 데이터 상태 관리를 더 안정적으로 만듭니다.
52-55: 쿼리 최적화가 잘 구현되었습니다.enabled 속성을 사용하여 캐시된 데이터가 있을 때만 쿼리를 실행하도록 최적화한 것은 좋은 접근법입니다. 코드 주석도 명확하게 작성되어 이해하기 쉽습니다.
src/apis/instance.request.ts (1)
78-78: 상태 코드 검증 변경이 적절합니다.401(Unauthorized) 상태 코드로 변경하여 인증 관련 오류를 더 명확하게 처리하고 있습니다. 이전에는 403(Forbidden)을 체크하고 있었으나, 인증 실패 시 401이 더 의미적으로 정확합니다.
src/utils/revalidateUtil.ts (1)
1-9: 'use server' 지시문과 revalidate 함수 구현이 적절합니다.서버 컴포넌트에서 사용하기 위한 'use server' 지시문과 함께 경로 재검증 및 리다이렉션 로직이 잘 구현되어 있습니다. 이 함수는 인증 관련 작업 후 페이지를 새로고침하는 데 유용하게 사용될 것입니다.
src/components/auth-required/main/Section/index.tsx (3)
9-9: useQueryClient에서 getQueryClient로의 변경이 적절합니다.리액트 훅 대신 유틸리티 함수를 사용하여 쿼리 클라이언트에 접근하도록 변경되었습니다.
15-17: 사용자 이름 유효성 검사 누락 가능성이 있습니다.이전 코드에서는 username이 없을 경우 에러를 던지는 유효성 검사가 있었을 것으로 추정되나, 현재 구현에서는 이 검사가 제거되었습니다. username이 undefined일 경우 후속 코드에서 문제가 발생할 수 있습니다.
username이 undefined인 경우에 대한 처리를 추가하는 것이 좋을 것 같습니다. 다음과 같은 방식으로 구현할 수 있습니다:
const username = ( getQueryClient().getQueryData([PATHS.ME]) as Partial<UserDto> )?.username; + if (!username) { + // 적절한 에러 처리 또는 기본값 설정 + console.error('사용자 이름을 찾을 수 없습니다.'); + } const url = `${env.VELOG_URL}/@${username}/${p.slug}`;
19-19: URL 구성 로직이 개선되었습니다.URL 생성 로직이 간소화되어 가독성이 향상되었습니다.
There was a problem hiding this comment.
에고 너무 고생많으셨고 너무 좋아요
허나 기준님도 아시다시피 SSG 로 해당 페이지를 뽑아서 L7 LB 역할해주는 서버에 따로 배포하는 로직은 굉장히 굳이 있어야 하나? 싶은 방법이에요~
next 서버 runtime 에서 status 판단 후 해당 페이지를 렌더링해주는 로직에는 동의해요
저희 기존 배포는 CD 가 docker hub 에 image 를 올려주고
서버에 따로 붙어서 해당 image 를 다시 pull 해서 각 서버 instance 에서 직접 build 하는 방식이라서요
허나 이렇게 ssg 가 끼는 순간 이미지를 "만드는 로직" 에도 해당 ssg 러닝이 필요하며
그리고 해당 static file 만 L7 LB 서버에 따로 업로드하는 로직히 핊요하며
nginx 에는 또 reload 를 해줘야 해요
=======
그래서 자체적으로 next 에서 뱉는 4xx 5xx 는 그대로 가되
L7 LB 역할을 하는 서버에는 단순 html 만 올릴거에요
그래서 "next 라는 것과 완벽하게 무관한" static file 이 필요해요
이해했습니다~ |
|
@six-standard 해당 PR 은 그래서 어떻게 하는게 좋을까요? 기준님이 마지막 결론 내려주세요 :) |
그냥 단순 HTML 파일로 새로 만들어서 프로젝트 root 경로에 추가해두면 될 것 같다고 생각합니다! |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
package.json (1)
18-18: 새로운 Sentry 의존성 추가 확인
추가된"@sentry/core": "^9.4.0"는 에러 트래킹 및 성능 모니터링을 강화하기 위한 의도로 보입니다. 다만, 이미"@sentry/nextjs": "^8.47.0"가 포함되어 있으므로, 두 패키지가 서로 중복되거나 충돌하는 이슈가 발생하지 않는지 확인 부탁드립니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
error.html(1 hunks)package.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- error.html
좋습니다! 그렇게 가시죠! 그런 다음에 해당 PR 종결하시죠!! |
파일 추가했습니다! |
원래 사용되던 NGINX 기본 오류 페이지 대신 사용할 커스텀 오류 페이지를 퍼블리싱하였습니다.
NextJS SSG를 사용하였으며, 빌드 후
/server/app경로에서 생성되는 error.html 파일을 이용하면 됩니다.Summary by CodeRabbit