Dashboard Monitoring

Monitor internal dashboards, status pages, or any web application for changes. Lightcone runs a real browser, so it can access pages that require JavaScript, authentication, or are behind a VPN.

Periodic screenshot monitoring

Take screenshots at regular intervals and compare:

monitor.py

import time
from tzafon import Lightcone

client = Lightcone()

def check_dashboard():
    with client.computer.create(kind="browser") as computer:
        computer.navigate("https://status.example.com")
        computer.wait(3)

        # Take a screenshot
        result = computer.screenshot()
        url = computer.get_screenshot_url(result)

        # Extract page content for analysis
        html_result = computer.html()
        content = computer.get_html_content(html_result)

        return url, content

# Check every 5 minutes
while True:
    screenshot_url, content = check_dashboard()

    if "incident" in content.lower() or "degraded" in content.lower():
        print(f"ALERT: Issue detected! Screenshot: {screenshot_url}")
        # Send alert via Slack, email, or PagerDuty
    else:
        print(f"OK: Dashboard looks healthy at {time.strftime('%H:%M')}")

    time.sleep(300)  # Wait 5 minutes

monitor.ts

import Lightcone from "@tzafon/lightcone";

const client = new Lightcone();

async function checkDashboard() {
  const computer = await client.computers.create({ kind: "browser" });
  const id = computer.id!;

  try {
    await client.computers.navigate(id, { url: "https://status.example.com" });
    await new Promise((r) => setTimeout(r, 3000));

    const screenshot = await client.computers.screenshot(id);
    const html = await client.computers.html(id);

    return {
      screenshot: screenshot.result?.screenshot_url as string,
      html: html.result?.html_content as string,
    };
  } finally {
    await client.computers.delete(id);
  }
}

// Check periodically
setInterval(async () => {
  const result = await checkDashboard();
  console.log(`Checked at ${new Date().toISOString()}`);
}, 5 * 60 * 1000);

Monitor behind authentication

Use persistent sessions to stay logged in:

# First: log in and save the session
with client.computer.create(kind="browser", persistent=True) as computer:
    computer.navigate("https://app.example.com/login")
    computer.wait(2)
    computer.click(400, 300)
    computer.type("monitor@example.com")
    computer.click(400, 360)
    computer.type("password123")
    computer.click(400, 420)
    computer.wait(3)
    saved_session = computer.id
    print(f"Session saved: {saved_session}")

# Then: use the saved session for monitoring
def check_authenticated_dashboard():
    with client.computer.create(
        kind="browser",
        environment_id=saved_session,
    ) as computer:
        computer.navigate("https://app.example.com/analytics")
        computer.wait(3)
        result = computer.screenshot()
        return computer.get_screenshot_url(result)

// Log in and save
const session = await client.computers.create({
  kind: "browser",
  persistent: true,
});
await client.computers.navigate(session.id!, { url: "https://app.example.com/login" });
// ... fill login form ...
await client.computers.delete(session.id!);

// Monitor using saved session
async function checkAuthDashboard() {
  const computer = await client.computers.create({
    kind: "browser",
    environment_id: session.id!,
  });
  await client.computers.navigate(computer.id!, {
    url: "https://app.example.com/analytics",
  });
  const result = await client.computers.screenshot(computer.id!);
  await client.computers.delete(computer.id!);
  return result;
}

AI-powered monitoring

Let an agent interpret the dashboard and report findings:

for event in client.agent.tasks.start_stream(
    instruction=(
        "Go to https://status.example.com. "
        "Check if all services are operational. "
        "If any service shows degraded performance or an incident, "
        "report which services are affected and the severity."
    ),
    kind="browser",
    max_steps=10,
):
    print(event)

const stream = await client.agent.tasks.startStream({
  instruction:
    "Go to https://status.example.com. " +
    "Check if all services are operational. " +
    "If any service shows degraded performance or an incident, " +
    "report which services are affected and the severity.",
  kind: "browser",
  max_steps: 10,
});

for await (const event of stream) {
  console.log(event);
}

Common monitoring targets

• Status pages — detect incidents before your users report them
• Analytics dashboards — track KPI changes (revenue drops, traffic spikes)
• Competitor pricing pages — monitor price changes automatically
• Government portals — check for permit approvals, license renewals
• Internal tools — monitor queue depths, error rates, resource usage

For production monitoring, combine Lightcone with a task scheduler like Trigger.dev, cron jobs, or Inngest to run checks on a schedule.

See also

• Web scraping — extract structured data from monitored pages
• Browser tabs — monitor multiple dashboards in parallel
• Computers — persistent sessions and proxy support
• Agent Tasks — AI-powered monitoring with natural language