From 1988b53388ec4fc3052a3a45482b3ef842ab183c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Tue, 10 Mar 2026 17:36:37 +0800 Subject: [PATCH] feat: configure lightweight monitoring (Sentry, UptimeRobot, Analytics) --- docs/MONITORING_LIGHTWEIGHT.md | 300 ++++++++++----------------------- sentry.client.config.ts | 18 +- sentry.server.config.ts | 10 +- src/app/layout.tsx | 2 + 4 files changed, 115 insertions(+), 215 deletions(-) diff --git a/docs/MONITORING_LIGHTWEIGHT.md b/docs/MONITORING_LIGHTWEIGHT.md index 6625f1b..1f627a0 100644 --- a/docs/MONITORING_LIGHTWEIGHT.md +++ b/docs/MONITORING_LIGHTWEIGHT.md @@ -1,244 +1,124 @@ # 轻量级监控配置指南 -> **监控策略:** 采用SaaS服务，零部署成本，低维护负担 -> **适用场景:** 商业网站，中小型应用 +> **配置时间:** 2026-03-10 +> **监控类型:** 错误监控、性能监控、可用性监控 -## 监控方案概述 +## 监控服务概览 -### 1. 错误监控：Sentry -**作用:** 实时错误追踪和性能监控 -**成本:** 免费版每月5000错误 -**集成难度:** 简单（5分钟） +### 1. Sentry - 错误监控与追踪 -### 2. 可用性监控：UptimeRobot -**作用:** 网站可用性和响应时间监控 -**成本:** 免费版5个监控点 -**集成难度:** 无需代码（在线配置） +**配置文件:** +- `sentry.client.config.ts` - 客户端配置 +- `sentry.server.config.ts` - 服务端配置 -### 3. 性能监控：Next.js Analytics -**作用:** Core Web Vitals和用户体验指标 -**成本:** 免费 -**集成难度:** 简单（3分钟） - -### 4. 日志监控：简单日志文件 -**作用:** 应用日志和错误日志 -**成本:** 免费 -**集成难度:** 无（Next.js内置） - ---- - -## 配置步骤 - -### Step 1: 配置Sentry错误监控 - -#### 1.1 安装Sentry SDK - -Run: +**环境变量:** ```bash -npm install @sentry/nextjs +NEXT_PUBLIC_SENTRY_DSN=https://your-dsn@sentry.io/project-id ``` -#### 1.2 初始化Sentry +**功能:** +- 实时错误捕获和报告 +- 性能追踪（tracesSampleRate: 1.0） +- 会话回放（replaysSessionSampleRate: 0.1） +- 错误时回放（replaysOnErrorSampleRate: 1.0） -Run: -```bash -npx @sentry/wizard@latest -i nextjs -``` +**访问地址:** +- Dashboard: https://sentry.io/ -Expected: Sentry wizard引导完成配置 +**配置说明:** +- 开发环境不发送错误（beforeSend过滤） +- 生产环境完整监控 +- 所有文本和媒体已脱敏处理 -#### 1.3 验证Sentry配置 +### 2. Next.js Analytics - 性能监控 -Run: -```bash -cat sentry.client.config.ts | grep -A 3 "Sentry.init" -``` +**配置:** +- 已集成到 `src/app/layout.tsx` +- 使用 `` 组件 -Expected: 显示Sentry初始化配置 +**功能:** +- Web Vitals 监控 +- 页面浏览量统计 +- 用户行为分析 -#### 1.4 测试Sentry集成 +**访问地址:** +- Dashboard: https://vercel.com/analytics -Run: -```bash -# 在浏览器中访问网站 -# 打开浏览器控制台 -# 执行: throw new Error('Test error'); -# 检查Sentry Dashboard是否收到错误 -``` +### 3. UptimeRobot - 可用性监控 -Expected: Sentry Dashboard显示测试错误 +**监控配置:** +- 主站点监控: https://www.novalon.cn +- 健康检查监控: https://www.novalon.cn/api/health +- 检查间隔: 5分钟 +- 告警通知: 邮箱、手机号 ---- +**访问地址:** +- Dashboard: https://uptimerobot.com/dashboard -### Step 2: 配置UptimeRobot可用性监控 +**告警规则:** +- 站点不可用时立即告警 +- 响应时间 > 5s 时告警 +- SSL证书即将过期时告警 -#### 2.1 注册UptimeRobot账号 +## 监控指标 -访问: https://uptimerobot.com/register +### 错误率目标 +- P0 错误: < 0.1% +- P1 错误: < 1% +- P2 错误: < 5% -#### 2.2 添加监控 +### 性能目标 +- 首页加载时间: < 2s +- 页面交互延迟: < 100ms +- P95 响应时间: < 500ms -配置: -- **Monitor Type:** HTTP(s) -- **URL:** https://www.novalon.cn -- **Monitoring Interval:** 5 minutes -- **Alert Contacts:** 添加邮箱和手机号 +### 可用性目标 +- 月度可用性: > 99.9% +- 年度可用性: > 99.5% -#### 2.3 验证监控 +## 告警通知 -Run: -```bash -# 等待5-10分钟 -# 访问UptimeRobot Dashboard -# 检查监控状态是否为"Up" -``` +### 告警级别 +- **P0 (紧急):** 立即通知（电话 + 短信 + 邮件） +- **P1 (重要):** 5分钟内通知（短信 + 邮件） +- **P2 (一般):** 30分钟内通知（邮件） -Expected: 监控状态显示为"Up" +### 告警场景 +- 站点不可用 +- 错误率超过阈值 +- 性能指标下降 +- 安全事件 ---- +## 监控验证 -### Step 3: 配置Next.js Analytics +### 日常检查 +1. 每日检查 Sentry 错误报告 +2. 每日检查 UptimeRobot 可用性 +3. 每周检查 Analytics 性能趋势 -#### 3.1 安装Analytics +### 上线前检查 +- [ ] Sentry 配置正确 +- [ ] Analytics 数据正常 +- [ ] UptimeRobot 监控已启用 +- [ ] 告警通知已配置 -Run: -```bash -npm install @vercel/analytics -``` +## 故障响应 -Expected: 安装成功 +### 响应时间 +- P0 故障: 15分钟内响应 +- P1 故障: 30分钟内响应 +- P2 故障: 2小时内响应 -#### 3.2 添加Analytics组件 +### 处理流程 +1. 接收告警 +2. 确认问题 +3. 评估影响 +4. 执行修复或回滚 +5. 验证恢复 +6. 复盘分析 -Run: -```bash -# 在src/app/layout.tsx中添加 -# import { Analytics } from '@vercel/analytics/react'; -# 在标签内添加 -``` +## 联系人 -Expected: Analytics组件已添加 - -#### 3.3 验证Analytics - -Run: -```bash -# 访问网站 -# 等待5分钟 -# 访问Vercel Dashboard > Analytics -# 查看Web Vitals数据 -``` - -Expected: 显示Core Web Vitals数据 - ---- - -### Step 4: 配置简单健康检查 - -#### 4.1 创建健康检查API - -Run: -```bash -# 文件已存在: src/app/api/health/route.ts -# 验证健康检查端点 -curl http://localhost:3000/api/health -``` - -Expected: 返回健康状态JSON - -#### 4.2 配置UptimeRobot监控健康检查 - -在UptimeRobot中添加第二个监控: -- **Monitor Type:** HTTP(s) -- **URL:** https://www.novalon.cn/api/health -- **Monitoring Interval:** 5 minutes -- **Alert Contacts:** 同主站点监控 - -Expected: 健康检查监控已添加 - ---- - -## 监控仪表板 - -### Sentry Dashboard -- URL: https://sentry.io/ -- 用途: 查看错误、性能、用户会话 -- 关键指标: 错误率、错误趋势、受影响用户 - -### UptimeRobot Dashboard -- URL: https://uptimerobot.com/dashboard -- 用途: 查看网站可用性、响应时间 -- 关键指标: 正常运行时间、平均响应时间 - -### Next.js Analytics Dashboard -- URL: https://vercel.com/analytics -- 用途: 查看Core Web Vitals、页面加载 -- 关键指标: LCP、FID、CLS - ---- - -## 告警配置 - -### Sentry告警 -- **告警类型:** 新错误、错误率上升、性能下降 -- **通知方式:** 邮件、Slack、短信 -- **响应时间:** 实时 - -### UptimeRobot告警 -- **告警类型:** 网站宕机、响应时间过长 -- **通知方式:** 邮件、短信、Webhook -- **响应时间:** 5分钟内 - ---- - -## 成本对比 - -| 监控工具 | 免费版 | 付费版 | 推荐版本 | -|---------|--------|--------|---------| -| Sentry | 5000错误/月 | $26/月起 | 免费版 | -| UptimeRobot | 5个监控点 | $7/月起 | 免费版 | -| Next.js Analytics | 免费 | 免费 | 免费 | -| **总计** | **$0** | **$33/月起** | **$0** | - ---- - -## 维护指南 - -### 日常维护 -- [ ] 每周检查Sentry错误趋势 -- [ ] 每周检查UptimeRobot正常运行时间 -- [ ] 每月检查Next.js Analytics性能指标 - -### 问题处理 -1. **Sentry收到错误** - - 查看错误详情和堆栈 - - 修复错误并部署 - - 验证错误不再出现 - -2. **UptimeRobot告警** - - 立即检查网站状态 - - 查看服务器日志 - - 必要时执行回滚 - -3. **Analytics性能下降** - - 查看Core Web Vitals数据 - - 优化页面加载性能 - - 验证性能改善 - ---- - -## 总结 - -**优势:** -- ✅ 零部署成本 -- ✅ 低维护负担 -- ✅ 实时告警 -- ✅ 适合商业网站 - -**监控覆盖:** -- ✅ 错误监控（Sentry） -- ✅ 可用性监控（UptimeRobot） -- ✅ 性能监控（Next.js Analytics） -- ✅ 健康检查（API端点） - -**下一步:** 按照上述步骤配置监控服务 +- 技术负责人: [待填写] +- 运维负责人: [待填写] +- 监控负责人: [待填写] diff --git a/sentry.client.config.ts b/sentry.client.config.ts index 35e45a7..d24f89f 100644 --- a/sentry.client.config.ts +++ b/sentry.client.config.ts @@ -1,9 +1,21 @@ -import * as Sentry from '@sentry/nextjs'; +import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, - environment: process.env.NODE_ENV, - tracesSampleRate: 0.1, + tracesSampleRate: 1.0, replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, + integrations: [ + Sentry.replayIntegration({ + maskAllText: true, + blockAllMedia: true, + }), + ], + environment: process.env.NODE_ENV, + beforeSend(event) { + if (process.env.NODE_ENV === "development") { + return null; + } + return event; + }, }); diff --git a/sentry.server.config.ts b/sentry.server.config.ts index aa2bb6c..17373f9 100644 --- a/sentry.server.config.ts +++ b/sentry.server.config.ts @@ -1,7 +1,13 @@ -import * as Sentry from '@sentry/nextjs'; +import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, + tracesSampleRate: 1.0, environment: process.env.NODE_ENV, - tracesSampleRate: 0.1, + beforeSend(event) { + if (process.env.NODE_ENV === "development") { + return null; + } + return event; + }, }); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9756669..1e4bcc4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import { ThemeProvider } from "@/contexts/theme-context"; import { WebVitals } from "@/components/analytics/web-vitals"; import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics"; +import { Analytics } from "@vercel/analytics/react"; import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data"; import { MobileTabBar } from "@/components/layout/mobile-tab-bar"; import { ErrorBoundary } from "@/components/ui/error-boundary"; @@ -150,6 +151,7 @@ export default function RootLayout({ + );