Communitygithub.com

Canary Watch — 部署後監控

使用這項技能來監控與驗證部署後的 URL,檢查 HTTP 端點、SSE 串流、靜態資源、主控台錯誤及效能回歸,適用於部署、合併或依賴升級之後。煙霧測試 / Canary / 部署後驗證。

Canary Watch — 部署後監控 是什麼?

Canary Watch 是一項專用於部署後監控的 AI 助理技能,可有效地驗證已上線的 URL。它會循環執行多項檢查,直到手動停止或設定的監控時間到期。檢查項目涵蓋 HTTP 狀態碼(是否回傳 200)、主控台中的 JavaScript 錯誤、網路請求失敗(5xx)、LCP/CLS/INP 等核心網頁指標的效能回歸、關鍵 HTML 元素(h1、導航列、頁尾、CTA)是否存在、API 端點延遲是否在 SLA 範圍內、靜態資產(JS/CSS/圖片/字型)是否回傳 2xx/3xx 並帶有預期的內容類型,以及 SSE 事件串流是否能成功連線並收到第一個心跳訊號。支援三種模式:快速單次掃描、在設定的持續時間內每 N 分鐘重複檢查的長時間監控,以及比較兩個環境(例如 staging 與 production)的差異模式。當偵測到臨界問題時(例如 HTTP 非 200、主控台錯誤超過 5 個、LCP 大於 4 秒或 API 回傳 5xx),會立即發出桌面通知和可選的 Slack/Discord 通知。其理想的搭配對象為 `/browser-qa`(用於部署前驗證),也支援以 Git 鉤子或 CI/CD 流程進行自動化。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/everything-claude-code/tree/main/skills/canary-watch

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Canary Watch — 部署後監控 是做什麼的?

使用時機

  • 部署到正式環境或暫存環境後
  • 合併高風險 Pull Request 後
  • 想要驗證修復是否真的解決問題時
  • 在發佈窗口期間進行持續監控
  • 依賴升級之後

運作方式

監控已部署 URL 是否發生回歸。會持續循環執行,直到手動停止或監控視窗到期為止。

監控項目

1. HTTP 狀態 — 頁面是否回傳 200?
2. 主控台錯誤 — 是否出現之前沒有的新錯誤?
3. 網路失敗 — API 呼叫失敗、5xx 回應?
4. 效能 — LCP/CLS/INP 是否相較基線出現回歸?
5. 內容 — 關鍵元素是否消失?(h1、導航列、頁尾、CTA)
6. API 健康 — 關鍵端點是否在 SLA 時間內回應?
7. 靜態資源 — JS、CSS、圖片和字型請求是否回傳 2xx/3xx 且內容類型符合預期?
8. SSE 串流 — event-stream 端點是否能連線並接收到初始事件或心跳?

監控模式

快速檢查(預設):單次執行,回報結果

/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

警示閾值

critical:  # 立即警示
  - HTTP 狀態不等於 200
  - 主控台錯誤數 > 5(僅限新錯誤)
  - LCP > 4 秒
  - API 端點回傳 5xx
  - 靜態資源回傳 4xx/5xx
  - SSE 端點無法連線或收到第一次心跳前即斷線

warning:   # 報告中標記
  - LCP 相較基線增加超過 500 毫秒
  - CLS > 0.1
  - 新的主控台警告
  - 回應時間超過基線的 2 倍
  - 靜態資源內容類型意外改變
  - SSE 心跳延遲超過基線的 2 倍

info:      # 僅記錄
  - 輕微效能變異
  - 新的網路請求(第三方腳本加入?)

通知方式

當觸發臨界閾值時:

  • 桌面通知(macOS/Linux)
  • 可選:Slack/Discord Webhook
  • 記錄至 ~/.claude/canary-watch.log

輸出範例

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

### 狀態:健康 ✓

| 檢查項目 | 結果 | 基線 | 差異 |
|-------|--------|----------|-------|
| HTTP | 200 ✓ | 200 | — |
| 主控台錯誤 | 0 ✓ | 0 | — |
| LCP | 1.8s ✓ | 1.6s | +200ms |
| CLS | 0.01 ✓ | 0.01 | — |
| API /health | 145ms ✓ | 120ms | +25ms |
| 靜態資源 | 42/42 ✓ | 42/42 | — |
| SSE /events | 已連線 ✓ | 已連線 | +80ms 心跳 |

### 未檢測到回歸。部署狀態乾淨。

整合

搭配使用:

  • /browser-qa 進行部署前驗證
  • 鉤子:在 git push 時新增為 PostToolUse 鉤子,部署後自動檢查
  • CI:在 GitHub Actions 中部署步驟後執行

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/claude-api

Anthropic Claude API patterns for Python and TypeScript. Covers Messages API, streaming, tool use, vision, extended thinking, batches, prompt caching, and Claude Agent SDK. Use when building applications with the Claude API or Anthropic SDKs.

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

affaan-m/everything-claude-code

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m/gget

gget CLI and Python workflow for quick genomic database queries, sequence lookup, BLAST-style searches, enrichment checks, and reproducible bioinformatics evidence logs.

affaan-m/literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging.

affaan-m/motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

affaan-m/project-guidelines-example

Example project-specific skill template based on a real production application.

affaan-m/pubmed-database

Direct PubMed and NCBI E-utilities search workflows for biomedical literature, MeSH queries, PMID lookup, citation retrieval, and API-backed literature monitoring.

affaan-m/scholar-evaluation

Structured scholarly-work evaluation for papers, proposals, literature reviews, methods sections, evidence quality, citation support, and research-writing feedback.

affaan-m/uspto-database

USPTO patent and trademark data workflow for official record lookup, PatentSearch queries, TSDR checks, assignment data, and reproducible IP research logs.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

相關技能