로그는 특정 시점에 무슨 일이 일어났는지를 남기는 이벤트 기록입니다. 요청 ID, 심각도, 작업 이름을 함께 적으면 장애가 생겼을 때 사건의 순서를 복원할 수 있습니다.
데모에서는 로그 줄이 계속 들어오고 오류 필터를 켜면 관련 줄만 남습니다. 로그에는 비밀번호와 토큰 같은 비밀값을 넣지 말고, 수집량과 보존 기간도 운영 비용에 맞게 정해야 합니다.
언제 쓰나
특정 요청이나 장애의 사건 순서를 되짚을 때 사용합니다.
로그
Logs
사건이 발생한 시각과 문맥을 개별 기록으로 남깁니다.
···
<div class="demo"><div class="title">EVENT LOG</div><div class="scene"><div class="list"><div class="line">12:01 info · request in</div><div class="line">12:02 info · cache hit</div><div class="line error">12:03 error · timeout</div><div class="line">12:04 info · retry</div></div><div class="filter">ERROR FILTER <b id="state">OFF</b></div></div></div>.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:8px}.list{width:100%;display:grid;gap:5px}.line{padding:5px 8px;border-left:3px solid var(--accent);background:var(--bg);font:500 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;white-space:nowrap;overflow:hidden}.error{border-color:var(--accent-3);color:var(--accent-3)}.filter{align-self:flex-end;font:700 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace}.filter b{color:var(--accent)}.demo.filtered .line:not(.error){border-color:var(--line);color:var(--muted);background:var(--surface)}.line{transition:background .3s,border-color .3s,color .3s}let on=false;function tick(){on=!on;document.querySelector(".demo").classList.toggle("filtered",on);document.getElementById("state").textContent=on?"ON":"OFF"}setInterval(tick,1300);document.querySelector(".demo").addEventListener("pointerdown",tick)