엑젬플러는 메트릭 집계에 포함된 실제 관측값 하나와 추적 ID 같은 참조를 함께 보관합니다. 지연 분포에서 튀는 점을 발견하면 그 요청의 추적으로 바로 내려갈 수 있습니다.
데모는 그래프의 이상 점을 선택해 해당 추적 카드를 여는 과정을 자동 시연합니다. 모든 관측값에 추적을 붙이는 것은 아니며, 관련 추적이 보존되어 있어야 링크를 따라갈 수 있습니다.
언제 쓰나
메트릭의 이상치를 발견한 뒤 실제 느린 요청을 조사할 때 사용합니다.
예시 추적 연결
Exemplars
집계된 메트릭의 한 관측값을 실제 추적에 연결합니다.
···
<div class="demo"><div class="title">OUTLIER → TRACE</div><div class="scene"><div class="ex-chart"><span></span><span></span><span class="spike"></span><span></span><span></span></div><div class="ex-trace">trace 7f3a · 840 ms</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}.ex-chart{width:90%;height:58%;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line)}.ex-chart span{width:12%;height:28%;border-radius:4px 4px 0 0;background:var(--accent);opacity:.7}.ex-chart span:nth-child(2){height:41%}.ex-chart span:nth-child(4){height:36%}.ex-chart span:nth-child(5){height:25%}.ex-chart .spike{height:86%;background:var(--accent-3);opacity:1;animation:select 2s infinite}.ex-trace{border:1px solid var(--accent-3);border-radius:5px;padding:6px 10px;background:color-mix(in srgb,var(--accent-3) 12%,var(--surface));font:600 clamp(12px,2.4vmin,15px)/1.1 ui-monospace,monospace;animation:reveal 2s infinite}@keyframes select{0%,15%,100%{box-shadow:none}35%,85%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-3) 20%,transparent)}}@keyframes reveal{0%,20%,100%{opacity:.4;transform:translateY(-3px)}40%,85%{opacity:1;transform:translateY(0)}}