소진율 경보

Burn-rate alert

오류 예산이 소비되는 속도로 경보를 판단합니다.

···
html
<div class="demo"><div class="title">MULTI-WINDOW BURN</div><div class="scene"><div class="burn-lines"><div>5 min <i></i><b id="short">2×</b></div><div>1 hour <i></i><b id="long">1×</b></div></div><div class="burn-status" id="burn-status">within budget</div></div></div>
css
.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}.burn-lines{width:95%;display:grid;gap:10px}.burn-lines div{display:flex;align-items:center;gap:7px;white-space:nowrap;font:600 clamp(12px,2.4vmin,15px)/1.1 ui-monospace,monospace}.burn-lines i{height:11px;width:28%;border-radius:6px;background:var(--accent);transition:width .4s,background .4s}.burn-lines b{min-width:22px}.burn-status{padding:5px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:clamp(12px,2.4vmin,15px)}.scene.alert .burn-lines i{background:var(--accent-3)}.scene.alert .burn-status{border-color:var(--accent-3);color:var(--accent-3)}
js
let n=0;function draw(){const alert=n%3===2;document.querySelector(".scene").classList.toggle("alert",alert);document.querySelectorAll(".burn-lines i").forEach((bar,i)=>bar.style.width=(alert?i?78:92:i?32:55)+"%");document.getElementById("short").textContent=alert?"14×":"2×";document.getElementById("long").textContent=alert?"7×":"1×";document.getElementById("burn-status").textContent=alert?"ALERT · both windows high":"within budget";n++}draw();setInterval(draw,800)

소진율은 현재 실패율을 SLO가 허용하는 실패율과 비교한 값입니다. 짧은 시간창과 긴 시간창을 함께 보면 급격한 장애를 찾으면서 순간 잡음을 덜 수 있습니다.

데모의 두 시간창이 모두 임계선을 넘을 때만 경보가 켜집니다. 시간창과 임계값은 SLO 기간 및 대응 목표에 맞춰 정해야 하며, 한 순간의 실패 수만으로 경보를 만들면 과민해질 수 있습니다.

언제 쓰나

SLO 오류 예산을 빠르게 쓰는 장애를 조기에 감지할 때 사용합니다.

페이지로 열기 ↗