topic★★★★★난이도 · 약 15분
관측성 — 로그·메트릭·알림의 바이브코더 최소 세팅
Sentry + Vercel Analytics + 구조화 로그 — 배포 후에도 무슨 일이 벌어지는지 보는 최소 3종 세트.
#관측성#Sentry#pino#Vercel Analytics#알림
왜 배우는가
배포 성공이 끝이 아니다. "사용자가 오류 났대요"에 답하려면 에러·성능·로그가 자동 수집되고 있어야 한다. ch26 깊이 가기 전에 우선 꽂아둘 3개.
바이브코더가 배포 직후 세팅해야 할 관측 3종.
| 도구 | 잡아내는 것 | 무료 한도 | 세팅 난이도 |
|---|---|---|---|
| Sentry | 런타임 에러·스택·사용자 맥락 | 개인 프로젝트 충분 | ⭐ (10분) |
| Vercel Analytics | 페이지 성능·Core Web Vitals·방문수 | 기본 내장 | ⭐ (토글) |
| 구조화 로그(pino/winston) → Logtail/Axiom | 사용자·요청별 이벤트 | 월 1GB | ⭐⭐ (환경변수 1개) |
typescript
// ① Sentry (Next.js 기준 10분 세팅)
// npx @sentry/wizard@latest -i nextjs
// 이후 자동으로 app/error.tsx·middleware·sentry.*.config.ts 생성
// ② 구조화 로그 (pino)
import pino from "pino";
export const log = pino({ level: process.env.LOG_LEVEL ?? "info" });
log.info({ userId, path: req.url }, "API hit");
log.error({ err }, "DB save failed");
// ③ Vercel Analytics
// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
export default function Layout({ children }) {
return <html><body>{children}<Analytics /></body></html>;
}이 3개만 꽂아둬도 "에러 → 알림 → 스택 → 수정" 루프가 자동으로 돌아간다. 유료로 갈 필요 없음.
알림 3가지 황금 규칙. ① 에러율 급증 (예: 5분간 5xx >1%) ② 지연 급등 (p95 >1초) ③ 크리티컬 경로 실패 (결제·로그인). 이 3가지 외 알림은 초반엔 끈다 — 노이즈는 알림 무시의 시작.
로그 레벨은 5단계: `trace / debug / info / warn / error`. 프로덕션은 보통 `info` 이상만 수집. `console.log`만 쓰지 말고 레벨을 의식적으로 구분하면 필터·알림 설계가 쉬워진다.
사용자가 직접 문의 전에 Claude가 먼저 알게 하라. Sentry → Slack 웹훅 연결. 새 에러 유형이 뜨면 Claude Code에게 "이 스택 트레이스 원인 찾고 수정 PR 만들어줘" 요청 자동화 가능. ch26 관측성 심화로 이어진다.
실기 드릴 1문항
edit실기 드릴 · 단답형
JS 앱의 런타임 에러를 자동 수집·스택 저장·알림까지 한 번에 해주는 바이브코더 표준 도구는?