메트릭은 요청 수, 오류 수, 지연 시간처럼 반복 측정되는 값을 시계열로 저장합니다. 개별 사건보다 추세와 집계를 빠르게 보는 데 적합합니다.
데모의 막대는 요청량을, 붉은 점은 오류량을 나타내며 시간이 지나며 함께 바뀝니다. 숫자만으로 원인을 확정할 수 없으므로 이상 구간은 로그와 추적으로 이어서 조사합니다.
언제 쓰나
서비스 건강 상태를 감시하고 평소와 다른 추세를 찾을 때 사용합니다.
메트릭
Metrics
시간에 따라 변하는 상태를 숫자로 집계해 추세를 봅니다.
···
<div class="demo"><div class="title">REQUESTS / ERRORS</div><div class="scene"><div class="chart"><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div></div><div class="legend">■ requests <span>● errors</span></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:9px}.chart{width:100%;height:68%;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line)}.bar{width:10%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:3px}.bar i{width:9px;height:9px;border-radius:50%;background:var(--accent-3);transition:transform .5s}.bar b{width:100%;height:25%;background:var(--accent);border-radius:4px 4px 0 0;transition:height .5s}.legend{font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;color:var(--accent)}.legend span{color:var(--accent-3)}const bars=[...document.querySelectorAll(".bar")];let n=0;function tick(){bars.forEach((bar,i)=>{let h=22+((i*17+n*11)%58);bar.querySelector("b").style.height=h+"%";bar.querySelector("i").style.transform="translateY("+(-Math.round(h/5))+"px)"});n++}tick();setInterval(tick,800)