에러핸들링- rootlayout에 관하여
11
작성자 없음
안녕하세요. 에러핸들링 강의에서 error.tsx를 (with-searchbar) group 폴더 안에 배치했을때, root layout의 footer의 에러가 나서 화면에 아예 next 오류가 나는 거 같습니다.
이전의 비슷한 질문에서 footer의 fetch 의 cache를 'force-cache'로 설정하였기때문에 오류가 잡히지 않는다라는 글을 본적이 있어서 확인해본 결과, force-cache로 설정해도 next.js 화면 오류로 인해 렌더링이 되지 않는 것을 확인했습니다.
근데 이 Rootlayout 에서 footer를 삭제하면 화면이 뜨고, error.tsx 가 그려지는 것을 확인할 수 있었습니다.
혹시 global-error를 설정하면 동작하지 않을까 하여 해봤지만, next.js 화면 오류만 보여지는 상황입니다.
요약하자면, global-error.tsx를 설정하든 안하든 rootlayout의 footer 에러로 인해 next.js 화면 오류로 덮여지는 상황입니다.
Answer 2
0
안녕하세요 박혜원님 이정환입니다.
아마 force-cache로 변경하시기 전에 캐시 데이터가 삭제되어서 발생하는 문제이지 않을까 싶습니다 ㅠㅠ 이 부분은 error.tsx 파일 실습 동안 만큼만 Footer 컴포넌트를 주석처리하시면 해결하실 수 있습니다!
0
안녕하세요, 인프런 AI 인턴입니다. 박혜원님.
(with-searchbar)/error.tsx는 해당 라우트 그룹 내부에서 발생한 오류를 처리합니다. 반면 Footer가 root layout에서 렌더링되고 있다면, root layout의 오류는 하위 경로의 error.tsx가 처리할 수 없습니다.
이 경우에는 다음과 같이 확인해 보시면 됩니다.
app/global-error.tsx를 생성합니다.
global-error.tsx에는 반드시"use client"를 선언하고,<html>과<body>태그를 포함해야 합니다.
- 개발 모드보다 프로덕션 환경에서 확인하는 것이 정확하므로, 백엔드 서버가 실행 중인 상태에서 빌드한 뒤
npm run start로 실행해 보세요.
- 이후 백엔드 서버를 종료하고 페이지를 새로고침하여
global-error.tsx가 표시되는지 확인합니다.
force-cache를 사용하더라도 캐시가 무효화되었거나 아직 캐시가 생성되지 않은 경우에는Footer의fetch에서 오류가 발생할 수 있습니다.
관련된 지식공유자님의 답변을 아래에서 확인하실 수 있습니다.
error.tsx를 app 폴더 바로 아래에 둬도 footer에서 발생하는 오류는 잡히지 않습니다
root layout에서 발생한 오류를global-error.tsx로 처리하는 방법과, 프로덕션 빌드 후 확인하는 절차가 설명되어 있습니다.
원본 이미지: https://cdn.inflearn.com/public/files/posts/231cce91-cbbb-4521-975d-0df2b2355684/bd7ae1e0-7699-41e1-a9e8-b7a80907e9e4.png포괄적 에러 핸들링 error.tsx이 정상 작동 하지 않습니다 (05:30)
Footer의 오류가app/layout.tsx에서 발생하면(with-searchbar)/error.tsx가 처리하지 못하는 이유와, 캐시 설정에 따라 오류 발생 위치가 달라질 수 있는 내용이 안내되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
88
2
컴포넌트와 레이아웃
0
65
2
@/styles/globals.css'
0
65
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
85
2
next.js 프로젝트
0
80
1
Next.js + Tanstack Query BFF 구조 질문
1
96
2
Next.js 사전렌더링 이해하기 부분
0
93
2
모달 관련 질문
0
103
3
렌더링 관련 질문
0
116
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
106
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
103
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
118
2
npx prisma db push 시 에러가 뜹니다.
0
141
3
vercel 배포를 실패하였습니다.
0
162
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
105
2
getServerSideProps 함수와 SSR의 관계
0
129
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
100
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
153
2
일반적인 nextjs project architecture에 대하여..
0
125
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
110
2
배포 시 오류 발생
0
126
2
백엔드 서버 오류납니다.
0
120
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
123
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
139
1