dev-log-monitoring

Monitor Encore.ts and SvelteKit logs to diagnose drift and verify run events.

1|Updated Oct 23, 2025
One-click install
npx skills add https://github.com/nirukk52/ScreenGraph --skill dev-log-monitoring
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dev-log-monitoring
Source: https://github.com/nirukk52/ScreenGraph/tree/main/.claude-skills/dev-log-monitoring_skill
Command: npx skills add https://github.com/nirukk52/ScreenGraph --skill dev-log-monitoring

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides real-time monitoring and analysis of backend (Encore.ts) and frontend (SvelteKit) logs to observe system behavior across services, debug live runs, and verify event streaming during ScreenGraph development.

Core Features & Use Cases

  • Start backend/frontend with log capture
  • Verify health endpoints
  • Navigate using Playwright MCP
  • Inspect frontend console and network for stream activity
  • Analyze complete agent run flow and event timeline

Quick Start

  1. Start backend with logs: cd backend && encore run 2>&1 | tee /tmp/backend-logs.txt &
  2. Start frontend with logs: cd frontend && bun run dev 2>&1 | tee /tmp/frontend-logs.txt &
  3. Verify both services healthy and perform drift detection with Playwright MCP
  4. Open run page and review logs for graph stream events

Frequently Asked Questions about dev-log-monitoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I monitor backend and frontend logs in real-time for end-to-end testing?

Real-time log monitoring captures output from both Encore.ts backend and SvelteKit frontend services by running them with log redirection, then analyzing streams to track event flow, detect drift, and diagnose agent runs. Start each service with log capture (e.g., `encore run 2>&1 | tee /tmp/backend-logs.txt`), verify health endpoints, and inspect logs for graph stream events and performance patterns across services.

Can I use Playwright to automate navigation while monitoring logs for WebSocket streams?

Yes. Playwright MCP integration enables automated navigation of your frontend while you simultaneously inspect console output and network activity for WebSocket stream events. This allows you to trigger user flows, verify real-time event streaming during ScreenGraph runs, and correlate frontend interactions with backend log patterns in a single workflow.

What's the best way to diagnose drift detection failures in ScreenGraph end-to-end tests?

Drift detection diagnostics require analyzing complete agent run flow timelines by cross-referencing backend logs (Encore.ts), frontend logs (SvelteKit), and network streams captured during Playwright-driven navigation. Review logs for stream event gaps, timing mismatches, and service health checks to identify where the observed behavior diverged from expected state.

Do I need to set up health checks before starting log monitoring?

Health check verification is a prerequisite step before meaningful log analysis. Confirm both backend and frontend services are healthy and responding before beginning drift detection or agent run diagnostics, as unhealthy endpoints will produce incomplete or misleading log patterns that obscure the actual issue.

How do I extract and analyze log patterns across Encore.ts and SvelteKit for performance analysis?

Log-pattern extraction involves parsing captured logs from both services to identify timing sequences, event ordering, and cross-service latency. Use real-time log capture during test runs, then review consolidated logs for performance bottlenecks, stream delays, and service interaction issues to produce actionable run diagnostics.

Can log monitoring detect issues with WebSocket event streaming during agent runs?

Yes. Real-time log monitoring inspects frontend console and network activity for WebSocket stream events, allowing you to verify that event streams are being delivered correctly during agent runs. Gaps or delays in logs indicate stream failures or timing issues affecting ScreenGraph behavior.