강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

hyese ch님의 프로필 이미지
hyese ch

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

SSR시 쿠키 공유하기

이 에러가 떴는데

작성

·

5.9K

0

Error: Error serializing `.initialState.user.loadMyInfoError` returned from `getServerSideProps` in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
그러니까 /의(가장 최초에 렌더링되는 index.js) getServerSideProps부분에서 '.initialState.user.loadMyInfoError'를 직렬화하는 동안 에러가 생겼다는 의미 같은데... undefined는 JSON으로 serialize 될 수 없고 그러니 차라리 null을 사용하던가 아니면 이 값을 생략하라는 이야기로 이해했습니다.
어디에서 undefined가 생겼는데 어떻게 알 수 있을까요?

답변 10

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

response는 보통 있는데요. console.dir(error) 해보면 정확한 구조를 알 수 있습니다.

0

hyese ch님의 프로필 이미지
hyese ch
질문자

네ㅠㅠ name으로 할 때만 작동이 되는데 error 아래에 name도 있고 response도 있는 구조 아닌가요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

error.response가  undefined인건데요. 서버에서 에러가 났을 때 응답을 안 보내나요? 

0

hyese ch님의 프로필 이미지
hyese ch
질문자

해결했습니다!! 액션 디스패치시 error: error.response.data 말고 error.name으로 했더니 해결이 되는데 왜 그러는 걸까요?

0

hyese ch님의 프로필 이미지
hyese ch
질문자

이 이 부분인 것 같은데... 원인을 모르겠습니다. log를 찍어보아도

The above error occurred in task loadMyInfo

    created by takeLatest(LOAD_MY_INFO_REQUEST, loadMyInfo)

    created by watchLoadMyInfo

    created by userSaga

    created by rootSage

Tasks cancelled due to error:

askSaga

TypeError: Cannot read property 'data' of undefined

    at loadMyInfo (webpack-internal:///./sagas/user.js:27:27

이런 식으로만 나오고요 ㅠㅠ

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

둘의 데이터가 undefined가 들어간 느낌인데요. 백엔드 서버쪽에서 저 두 라우터에 해당하는 곳에서 return하는 데이터 값을 console.log해보세요.

0

hyese ch님의 프로필 이미지
hyese ch
질문자

export const getServerSideProps = wrapper.getServerSideProps(
async (context) => {
// Cookie
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = cookie;
// context.store.dispatch({
// type: LOAD_MY_INFO_REQUEST,
// });
// context.store.dispatch({
// type: LOAD_ASKS_REQUEST,
// });
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
},
);

export default Home;
이렇게 둘 다 없애야 에러가 안 납니다...ㅠㅠ

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

아, 백엔드 서버 로그 말고 프론트 서버 로그를 보셔야겠네요. 어디까지 지웠을 때 에러가 안 나나 확인해보세요.

0

hyese ch님의 프로필 이미지
hyese ch
질문자

프론트에는

xport const getServerSideProps = wrapper.getServerSideProps(
async (context) => {
// Cookie
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = cookie;
context.store.dispatch({
type: LOAD_MY_INFO_REQUEST,
});
context.store.dispatch({
type: LOAD_ASKS_REQUEST,
});
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
},
);
이렇게 작성했는데 위의 loadMyInfo 부분을 지워도 아래쪽에서
같은 에러가 다시 발생합니다.
서버쪽에 기록된 에러는 DB sequealize 부분 로그를 제외하고는
기록된 것이 없는 혹시 백엔드 서버 에러를 볼 수 있는 방법이
따로 있을까요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

getServerSideProps에서 loadMyInfo를 제거하면 에러가 발생하지 않나요?

제 생각에는 백엔드 서버에 에러가 기록되었을 것 같습니다.

hyese ch님의 프로필 이미지
hyese ch

작성한 질문수

질문하기