error.tsx 어떻게 뜨는건지 함 볼려고 new Error() 방식이나 강제로 에러뜨게 코드 작성하고 npm run dev 돌린결과물 보니까 콘솔창에 이따구로 뜨네
원래 이렇게 뜨는거임? 좀 간략하게 띄우는 방법 없나?
저렇게 주루룩 뜨니까 에러 테스트도 내가 병신같이 하는것 처럼 보임 ㅋㅋㅋㅋ
-----------------------------------------------------------------------------
작성한 코드
error.tsx
'use client'
export default function DashboardError({
error,
reset
}: {
error: Error & { digest?: string},
reset: () => void
}) {
return (
<div>
Dashboard Error<br />
<button onClick={() => reset()}>새로고침</button>
</div>
)
}
page.tsx
import Link from "next/link";
export default function Dashboard() {
let rand = Math.ceil((Math.random() * 100))
if(rand >= 50) {
throw new Error('에러 발생')
}
return (
<div>
dashboard 페이지<br />
<Link href="/">뒤로가기</Link>
</div>
)
}
흑기
원래 그렇게 뜰리가...
저소음흑축써주세요제발
그냥 dev 상태일때만 저런건지 아님 에러뜰 때 마다 저런식으로 bad request가 뜨는건지 잘 모르겠네;;
vue/nuxt만 쓰다가 저거 써보려니까 왜 저렇게 뜨는지 잘 모르겠다
jLwyFWeKLH
react 오래 했고 지금 당장도 next appdir로 뭐 하나 하고있는데 이런거 첨본다 뭘하는거냐
저소음흑축써주세요제발
코드 추가했는데 app폴더 아래에 dashboard 폴더만들고 그 안에 저런식으로 error이랑 page란 이름을 갖는 .tsx 파일만든거 밖에 없음 ㅋㅋ
jLwyFWeKLH
error.tsx는 React Error Boundary안에다 쳐넣는거라 'use client' 필수임
무슨 에러를 잡고싶은진 모르겠는데 이건 클라이언트 사이드 에러 잡는 페이지
404에러라면 not-found.tsx 맨들어서 써
저소음흑축써주세요제발
아 그래?? 저게 그 뜻이구나...
아니 처음엔 react-dev페이지에서 react 프로젝트 간단하게 만드는 cli 찾아보려했는데 nextjs랑 remix 밖에 안알려주더라고
예전엔 npx create-react인가 뭔가로 react앱 만드는거 있던걸로 기억하는데 저거 말곤 안보이길래 next랑 remix로 바꾼건가 해서 다짜고짜 nextjs로 csr 형태로 만들어보고 있는 중임
jLwyFWeKLH
아 코드 추가했다는 말이 본문에다 추가했다는 말이구나 어 이거는 그냥 예제인데 요상하네 나도 한번 해봐야지
저소음흑축써주세요제발
니가 말한거 보고 page.tsx에다가 'use client'넣으니까 bad request에러 주루룩 뜨는건 없어졌음 ㅋㅋㅋㅋ
jLwyFWeKLH
아 page.tsx가 서버컴포넌트가 되어갖고 그랬구나 그럼 bad request가 되긴 하지
page.tsx가 클라이언트사이드면 에러바운더리가 잡아줄거고 너가 의도한 새로고침버튼도 동작하겠다