CI/CD 관측성은 파이프라인 실행과 개별 단계의 시간, 상태, 오류를 텔레메트리로 남깁니다. 코드 변경에서 배포까지 이어지는 작업의 병목을 비교할 수 있습니다.
데모는 단계별 시간이 채워지다가 테스트 단계가 실패로 바뀌는 과정을 보여줍니다. 민감한 빌드 변수와 토큰이 로그나 스팬 속성에 섞이지 않도록 해야 합니다.
언제 쓰나
파이프라인이 느려지거나 실패하는 단계를 추적할 때 사용합니다.
CI/CD 관측성
CI/CD observability
빌드·테스트·배포 단계를 추적 데이터로 연결해 병목과 실패를 찾습니다.
···
<div class="demo"><div class="title">PIPELINE TRACE</div><div class="scene"><div class="pipe"><div>build <i></i></div><div>test <i></i></div><div>deploy <i></i></div></div><div class="status" id="status">running</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}.pipe{width:95%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pipe div{border:1px solid var(--line);border-radius:5px;padding:7px 4px;text-align:center;min-width:0}.pipe i{display:block;width:15%;height:8px;margin:8px auto 0;background:var(--accent);border-radius:4px;transition:width .4s,background .4s}.pipe .fail i{background:var(--accent-3)}.status{color:var(--accent);font:700 clamp(12px,2.4vmin,15px)/1 ui-monospace,monospace}const steps=[...document.querySelectorAll(".pipe div")];let n=0;function tick(){steps.forEach((s,i)=>{s.querySelector("i").style.width=i<=n?"90%":"15%";s.classList.toggle("fail",n===2&&i===1)});document.getElementById("status").textContent=n===2?"test failed":"running";n=(n+1)%3}tick();setInterval(tick,900)