Back to Details

canary-watch

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Canary Watch — Post-Deploy Monitoring

Canary Watch — 部署后监控

When to Use

使用场景

  • After deploying to production or staging
  • After merging a risky PR
  • When you want to verify a fix actually fixed it
  • Continuous monitoring during a launch window
  • After dependency upgrades
  • 部署到生产环境或预发布环境后
  • 合并高风险PR后
  • 想要验证修复是否真正生效时
  • 发布窗口期内的持续监控
  • 依赖升级后

How It Works

工作原理

Monitors a deployed URL for regressions. Runs in a loop until stopped or until the watch window expires.
监控已部署的URL是否出现退化情况。循环运行直到停止或监控窗口过期。

What It Watches

监控内容

1. HTTP Status — is the page returning 200?
2. Console Errors — new errors that weren't there before?
3. Network Failures — failed API calls, 5xx responses?
4. Performance — LCP/CLS/INP regression vs baseline?
5. Content — did key elements disappear? (h1, nav, footer, CTA)
6. API Health — are critical endpoints responding within SLA?
7. Static Assets — are JS, CSS, image, and font requests returning 2xx/3xx with expected content types?
8. SSE Streams — do event-stream endpoints connect and receive an initial event or heartbeat?
1. HTTP状态码 — 页面是否返回200？
2. 控制台错误 — 是否出现之前没有的新错误？
3. 网络失败 — 是否有API调用失败、5xx响应？
4. 性能指标 — LCP/CLS/INP是否比基线出现退化？
5. 页面内容 — 关键元素（h1、导航栏、页脚、CTA）是否消失？
6. API健康状态 — 核心端点是否在SLA范围内响应？
7. 静态资源 — JS、CSS、图片和字体请求是否返回2xx/3xx状态码且内容类型符合预期？
8. SSE流 — 事件流端点是否能连接并接收初始事件或心跳？

Watch Modes

监控模式

Quick check (default): single pass, report results
/canary-watch https://myapp.com
Sustained watch: check every N minutes for M hours
/canary-watch https://myapp.com --interval 5m --duration 2h
Diff mode: compare staging vs production
/canary-watch --compare https://staging.myapp.com https://myapp.com
快速检查（默认）：单次检查，生成报告
/canary-watch https://myapp.com
持续监控：每N分钟检查一次，持续M小时
/canary-watch https://myapp.com --interval 5m --duration 2h
对比模式：对比预发布环境与生产环境
/canary-watch --compare https://staging.myapp.com https://myapp.com

Alert Thresholds

告警阈值

yaml
critical:  # immediate alert
  - HTTP status != 200
  - Console error count > 5 (new errors only)
  - LCP > 4s
  - API endpoint returns 5xx
  - Static asset returns 4xx/5xx
  - SSE endpoint cannot connect or drops before first heartbeat

warning:   # flag in report
  - LCP increased > 500ms from baseline
  - CLS > 0.1
  - New console warnings
  - Response time > 2x baseline
  - Static asset content type changed unexpectedly
  - SSE heartbeat latency > 2x baseline

info:      # log only
  - Minor performance variance
  - New network requests (third-party scripts added?)
yaml
critical:  # 立即告警
  - HTTP status != 200
  - Console error count > 5 (new errors only)
  - LCP > 4s
  - API endpoint returns 5xx
  - Static asset returns 4xx/5xx
  - SSE endpoint cannot connect or drops before first heartbeat

warning:   # 报告中标记
  - LCP increased > 500ms from baseline
  - CLS > 0.1
  - New console warnings
  - Response time > 2x baseline
  - Static asset content type changed unexpectedly
  - SSE heartbeat latency > 2x baseline

info:      # 仅记录日志
  - Minor performance variance
  - New network requests (third-party scripts added?)

Notifications

通知方式

When a critical threshold is crossed:
  • Desktop notification (macOS/Linux)
  • Optional: Slack/Discord webhook
  • Log to 
    ~/.claude/canary-watch.log
当触发严重阈值时：
  • 桌面通知（macOS/Linux）
  • 可选：Slack/Discord webhook
  • 记录到 
    ~/.claude/canary-watch.log

Output

输出示例

markdown
undefined
markdown
undefined

Canary Report — myapp.com — 2026-03-23 03:15 PST

Canary Report — myapp.com — 2026-03-23 03:15 PST

Status: HEALTHY ✓

Status: HEALTHY ✓

CheckResultBaselineDelta
HTTP200 ✓200—
Console errors0 ✓0—
LCP1.8s ✓1.6s+200ms
CLS0.01 ✓0.01—
API /health145ms ✓120ms+25ms
Static assets42/42 ✓42/42—
SSE /eventsconnected ✓connected+80ms heartbeat
检查项结果基线差值
HTTP200 ✓200—
Console errors0 ✓0—
LCP1.8s ✓1.6s+200ms
CLS0.01 ✓0.01—
API /health145ms ✓120ms+25ms
Static assets42/42 ✓42/42—
SSE /eventsconnected ✓connected+80ms heartbeat

No regressions detected. Deploy is clean.

未检测到退化情况。部署结果正常。

undefined
undefined

Integration

集成方式

Pair with:
  • /browser-qa
    for pre-deploy verification
  • Hooks: add as a PostToolUse hook on 
    git push
    to auto-check after deploys
  • CI: run in GitHub Actions after deploy step
可与以下工具搭配使用：
  • /browser-qa
    用于部署前验证
  • 钩子：添加为
    git push
    的PostToolUse钩子，部署后自动检查
  • CI：在GitHub Actions的部署步骤后运行