내가 OpenClaw 에이전트를 위한 실시간 모니터링 대시보드를 만든 방법

Source: Dev.to

모니터 뒤의 스택

OpenClaw용 모니터링 대시보드를 만들기로 결심했을 때 몇 가지 제약 조건이 있었습니다:

• 에이전트와 같은 $10 VPS에서 실행
• 외부 의존성이나 클라우드 서비스 없음
• 폴링 없이 실시간 업데이트

프론트엔드

• Vue 3 + Element Plus + Apache ECharts
• 실시간 데이터를 위한 반응형 컴포넌트
• 저사양 디바이스에서도 차트가 부드럽게 렌더링
• 기본 다크 테마

백엔드

• Express.js + better‑sqlite3
• 설정이 필요 없는 영구 저장을 위한 SQLite
• 브라우저에 업데이트를 푸시하는 Server‑Sent Events (SSE)
• 히스토리 데이터 조회를 위한 REST API

통신

• SSE (Server‑Sent Events)
  • 서버에서 브라우저로 일방향 채널
  • WebSocket 오버헤드 없음 — 배포가 간단
  • SSE가 차단될 경우 우아하게 폴백

SQLite는 단일 서버 모니터링에 적합합니다. 동시 쓰기에 대해 걱정했지만, 대시보드 서버가 하나이고 에이전트 쓰기가 가끔 발생하므로 SQLite의 파일 잠금이 충분히 처리합니다.

SSE는 과소평가됩니다. 대부분 WebSocket을 사용하지만, SSE는 더 간단하고 HTTP/2 위에서 동작하며 자동 재연결됩니다. 모니터링 대시보드에는 올바른 선택입니다.

토큰 계산은 추정치입니다. OpenClaw는 Gateway 이벤트에서 정확한 토큰 수를 제공하지 않습니다. 메시지 내용 길이로 계산하므로 추세 분석에는 충분히 정확하지만 청구용은 아닙니다.

결과

30 초 만에 시작하고 약 50 MB RAM을 사용하는 대시보드. 어떤 OpenClaw 배포와도 함께 사용할 수 있습니다.

GitHub:

OpenClaw를 운영 중이고 현재 상황을 파악하고 싶다면 한 번 시도해 보세요. 설치는 약 5 분 정도 걸립니다.