Notion-Client 7버전 로컬 환경 이슈
오늘은 Notion-Client 라이브러리를 이용한 Notion page 데이터 가져오기 이슈를 해결하였다.
증상은 아래와 같았다.
- Next dev 로컬에서 pageId를 가지고 notion.getPage()함수를 호출 할때 응답이 없음.(에러X, 타임아웃X)
- vercel에 배포를 했을때는 정상적으로 동작함.
결론적으로는 7버전 라이브러리에서 notion 페이지 데이터를 가져오는 getPage() 함수가 변경 되었던 것이 로컬 환경에서 이슈가 있었다.
import { PostViewer } from "@entities/notionReder"; import { NotionAPI } from "notion-client"; export default async function ViewPostPage({ pageId }: { pageId: string }){ const recordMap = await getNotionPageData(pageId); if(!recordMap){ console.error('❌ Notion 데이터 불러오기 실패:', pageId); return ( <div> Error 500, Cannot get PageData....</div> ) } return( <PostViewer recordMap={recordMap}/> ) } export async function getNotionPageData(notionPageId: string) { const notionInstance = new NotionAPI(); try { const response = await notionInstance.getPage(notionPageId); return response; } catch (error) { console.error('[getNotionPageData]', JSON.stringify(error, null, 2)); throw error; } }
라이브러리 소스를 볼 정도의 레벨은 아니여서 정확한 원인은 G맨에게 대충 들었지만 결과적으로 6.13.0 버전으로 다운 그레이드 해서 해결하였고, 오늘은 해결 과정을 나열해 보기로 한다.
여기서 부터는 내가 어떻게 해결했는지 확인하는 과정이다.(feat Github)
1. 문제가 된 함수.
PostViewer는 Notion-Render-x 를 감싸고 있는 entities 계층의 CSR 컴포넌트고
ViewPostPage 컴포넌트는 동적으로 받아온 notion 페이지 ID를 받아 getPage() 함수를 통해
Notion-Render-x에게 recordMap을 전달하는 features 계층 컴포넌트였다.
여기서 문제는 notion.getPage(pageId) 부분이 오류/ 타임아웃 등 아무런 동작이 없이 무한정 대기 상태였다는 것이다.
2. 원인 분석
처음에는 당연히 처음 구성해보는 SSR 컴포넌트와 문제가 있을 것이라 생각하고 해당 Api를 SSR컴포넌트에서 사용하지 못하는지 검색을 해보았다.
Notion-Render-x가 내부 로직에 의해서 CSR에서만 동작할 수 있다고 했던게 생각이나서….
우선은 단순한 디버깅으로 다음을 진행했다.
- PageId를 혹시 동적 라우터로 잘 받지 못하고 있는지.
- 동적 라우터로 넘어온 pageId가 xx-xxx-xxx와 같은 형태가 아닌 다른 형태로 넘어 오는지.
- 호출된 url을 통해 순차적으로 컴포넌트들이 잘 호출되는지.
여기서 정확히 recordMap을 가져오는 getNotionPageData() 함수의
const response = await notionInstance.getPage(notionPageId);
이 부분에 행이 걸린 듯 멈추는 것이 보였다.
타임 아웃이나 500에러가 발생하지 않는 것을 보아 처음에는 에러 처리가 미흡했구나 하여
try..catch문을 적용 하였다.
try { const response = await notionInstance.getPage(notionPageId); return response; } catch (error) { console.error('[getNotionPageData]', JSON.stringify(error, null, 2)); throw error; }
그러나 역시 아무런 반응도 catch에 걸리지도 않아 생각한 건 역시 SSR 컴포넌트와 문제가 있겠구나 생각했다.
그래서 notion-client 인스턴스는 api-Key를 요구하지 않는 라이브러리 임으로 그냥 CSR 컴포넌트로 구성을 해보았는데…
'use client' import { PostViewer } from "@entities/notionReder"; import { NotionAPI } from "notion-client"; export default async function ViewPostPage({ pageId }: { pageId: string }){ const recordMap = await getNotionPageData(pageId); if(!recordMap){ console.error('❌ Notion 데이터 불러오기 실패:', pageId); return ( <div> Error 500, Cannot get PageData....</div> ) } return( <PostViewer recordMap={recordMap}/> ) }
역시 무한루프에 빠진 것 처럼 아무런 행동을 하지 않았다…
3. 삽질의 시작
확실한 건 테스트 겸 notion-render-x에 이미 노션에 있는 글의 페이지 아이디를 하드 코딩 해서 던졌을 때는
매우 잘 동작했던 것을 기억해 코드의 문제라기 보단 외부 요인이 있다고 생각해 최근에 어떤 작업들을 했었나 생각해봤다.
- FSD구조 리팩토링
- Api 라우트에서 SSR 컴포넌트로 직접 호출하게 변경.
FSD구조 리팩토링은 사실상 서버 컴포넌트가 클라이언트 컴포넌트로 바뀐게 없어 패스하고 2번 Next api로 호출하던 getPage를 SSR컴포넌트에서 직접 호출해서 문제인가 확인겸 다시 되돌려봤다.
결과는 해당 api를 브라우저 상 호출을 해도 아무런 반응이 없었다.
마지막 희망으로 GPT한테 물어봤는데 특이한 답변을 받았다.
(결국에는 이 답변 때문에 조금 더 오래 걸리긴 했다.)
(하 또 SSR이 내 발목을.. 하는데…)
설마 하고 바로 vercel에 배포를 하니까 바로 정상 동작을 했었다…..
그렇다면 배포 환경과 내 로컬 개발 라이브 서버가 어떤 런타임 환경이 다르기에 이렇게 발생한 것일까…?
나는 아직 PostViewer의 개발을 끝내지 못해서 꼭 이 이슈를 처리해야 했었다….
결국 GPT랑 구글링으로 별에 별 작업을 다해봤는데
edge 런타임, node 런타임 다 아니였다.. 이대로 프로젝트를 접어야 하는 순간 혹시나 하는 마음에
notion-client 깃 허브에 들어가 봤다.
4. 이래서 근본근본 하는구나…
notion-client 깃 허브의 issue 탭에 들어가니 바로 내 눈을 사로잡는 녀석이 있었다.
지금 문제가 있는 getPage(), getAppPages() 가 7.4 버전에서 무한 루프를 돈다는 이야기가 아니겠는가!
혹시나 해결 방법이 있을까 들어가 봤더니 해당 라이브러리의 동작 과정이 뭔가 바뀌었고 아직 해결을 못했다는 것 같았다. 지금 내가 사용하고 있는 버전은 7.3.0 버전으로 근접 버전이고, 그래서 6버전 다운 그레이드를 시도해 보았다.
그 결과..
바로 귀신같이 잘 열렸다!!
+빌드할때 react-notion-x 의 recordMap 타입도 변경이 필요해서 추가로 react-notion-x 버전도 변경해줘야한다.
"react-notion-x": "6.5.0”
5. 결과
프로젝트를 버려야하나 까지 고민하다가 결국에는 해결해서 너무 다행이라 생각하면서
이래서 외부 라이브러리 또는 내 개발 환경에 대한 꾸준한 관심이 필요한지 절실하게 느꼈다.
생각해보니 엔지니어 할 때도 고객들이 영향도 체크를 꾸준히 했었는데 다 이유가 있는 행동이였던 것이다.
마지막으로 github 이슈에서는 vercel 배포에 대한 내용을 따로 다루지 않아 코맨트를 하나 남겨 놓았다.
7버전 근본적인 원인 해결은 아니지만 나랑 같은 증상으로 고통 받는 초보가 없길 바라면서…. 한 줄 적어 보았다.