브라우저 증거 수집판

Next.js 오류는 패널을 나눠 보면 원인이 좁아진다

런타임 오류, 요청 실패, 저장 상태, 긴 작업을 한 화면에서 분리해 보면 추측 대신 재현 가능한 증거가 남는다.

http://localhost:3000/dashboard/settings
재현 중
콘솔

첫 렌더와 실행 오류

신호hydration mismatch 흔한 원인날짜, 랜덤값, 브라우저 전용 API 다음 행동서버와 클라이언트 첫 출력 비교

경고의 컴포넌트 스택을 먼저 고정하면 수정 범위가 작아진다.

네트워크

요청 경로와 캐시

신호status, waterfall 흔한 원인잘못된 URL, 헤더, 재검증 정책 다음 행동request id와 서버 로그 연결

disable cache와 hard reload를 비교하면 브라우저 캐시 영향을 뺄 수 있다.

저장소

인증과 브라우저 상태

신호cookie, storage, SW 흔한 원인SameSite, Secure, domain 불일치 다음 행동실제 저장된 값과 응답 헤더 대조

로그인은 성공했는데 화면만 실패하면 이 패널이 빠른 단서가 된다.

성능

긴 작업과 화면 흔들림

신호long task, layout shift 흔한 원인큰 번들, 무거운 effect, 동기 계산 다음 행동interaction 녹화 후 원인 함수 확인

느리다는 인상을 trace로 바꾸면 병목 위치를 대화하기 쉽다.

증거 연결
재현 URL 콘솔 스택 요청 상세 저장 상태 성능 trace

보고할 때는 화면 캡처보다 이 다섯 조각을 같이 남기면 원인 추적이 훨씬 빨라진다.

패널을 한 번에 많이 보지 않는다

콘솔에서 시작해 신호가 요청인지 상태인지 성능인지 갈라 탄다.

수정 전후를 같은 조건으로 비교한다

캐시, 로그인 계정, URL, viewport가 달라지면 증거가 흐려진다.