이 에러가 떴는데

Question

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가 생겼는데 어떻게 알 수 있을까요?

제로초(조현영) · Answer

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

hyese ch · Answer

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

제로초(조현영) · Answer

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

hyese ch · Answer

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

hyese ch · Answer

이 이 부분인 것 같은데... 원인을 모르겠습니다. 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 이런 식으로만 나오고요 ㅠㅠ

제로초(조현영) · Answer

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

hyese ch · Answer

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;

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

제로초(조현영) · Answer

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

hyese ch · Answer

프론트에는 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 부분 로그를 제외하고는 기록된 것이 없는 혹시 백엔드 서버 에러를 볼 수 있는 방법이 따로 있을까요?

제로초(조현영) · Answer

getServerSideProps에서 loadMyInfo를 제거하면 에러가 발생하지 않나요? 제 생각에는 백엔드 서버에 에러가 기록되었을 것 같습니다.