막힌다는 신고를 따라가다 반대 방향 결함을 찾았다 — 캘린더 버그 3중 원인 추적기
체크아웃 날짜가 선택되지 않는다는 신고 하나를 따라가다, 같은 코드에서 정반대 방향의 결함까지 발견했다. 판매 불가 날짜가 포함된 예약이 조용히 통과하고 있었다. 세 겹으로 얽힌 원인을 하나씩 걷어낸 과정.
#트러블슈팅
9개의 글
Could not find the module in the React Client Manifest — 서버 액션이 반환한 클라이언트 컴포넌트가 프로덕션에서만 터질 때
admin 미리보기가 dev에선 멀쩡한데 프로덕션 빌드에서만 죽었다. 서버 액션이 반환하는 클라이언트 컴포넌트가 라우트 매니페스트에서 통째로 빠지던 문제를, 격리 재현과 빌드 산출물 검증으로 잡은 과정.
figure cannot be a descendant of p — MDX 이미지 hydration 에러를 rehype로 해결
단독 줄 이미지를 remark가 <p>로 감싸며 생긴 hydration 오류를, 자체 rehype 플러그인으로 블록/인라인을 구분해 해결한 과정.
next-mdx-remote에서 컴포넌트 props가 사라질 때
JSX 표현식으로 넘긴 props가 조용히 사라지는 이유와, blockJS를 끄지 않고 해결한 과정.
createContext is not a function — 서버 컴포넌트에서 shadcn Button이 빌드를 깨뜨릴 때
Radix Slot이 use client 없이 top-level에서 createContext를 호출해 서버 컴포넌트 빌드가 깨진 문제를, variants를 별도 파일로 분리해 해결한 과정.
배포된 토큰의 알파값이 사라져 있었다
Figma 스펙과 대조하다 발견한 디자인 토큰 알파값 유실 버그. Tokens Studio의 hex/alpha 분리 필드가 원인이었고, 전수조사와 렌더값 검증으로 마무리한 과정.
재현 안 되는 버그를 쫓다가 CI 게이트 부재를 발견했다
동료가 제보한 타입 에러를 재현하려다 전혀 다른 에러를 만났고, 그 과정에서 저장소에 typecheck 스크립트 자체가 없었다는 사실을 발견한 이야기.
토큰 시스템을 만들어놓고 아무도 안 쓰고 있었다 — Tailwind 임의값을 걷어낸 이야기
디자인 토큰 파이프라인을 갖춘 컴포넌트 라이브러리인데, 정작 컴포넌트 코드에는 Tailwind 임의값(`[16px]` 같은 대괄호 문법)이 100개 넘게 박혀 있었다. 전수조사로 토큰화 가능한 값과 예외로 남겨야 하는 값을 가른 과정.
썸네일을 저장할 때마다 가운데 선이 하나 생겼다 — html2canvas 캔버스 좌표 결함
브라우저에서 만든 썸네일을 PNG로 저장하면 이미지 정중앙에 원치 않는 가로선이 렌더링됐다. 도구의 핵심 산출물이 손상되는 결함을, 증상을 가리는 대신 캔버스 렌더 좌표라는 근본 원인까지 따라가 고친 과정.