张翔
4.8 KiB
4.8 KiB
轻量级监控配置指南
监控策略: 采用SaaS服务，零部署成本，低维护负担 适用场景: 商业网站，中小型应用
监控方案概述
1. 错误监控：Sentry
作用: 实时错误追踪和性能监控 成本: 免费版每月5000错误 集成难度: 简单（5分钟）
2. 可用性监控：UptimeRobot
作用: 网站可用性和响应时间监控 成本: 免费版5个监控点 集成难度: 无需代码（在线配置）
3. 性能监控：Next.js Analytics
作用: Core Web Vitals和用户体验指标 成本: 免费 集成难度: 简单（3分钟）
4. 日志监控：简单日志文件
作用: 应用日志和错误日志 成本: 免费 集成难度: 无（Next.js内置）
配置步骤
Step 1: 配置Sentry错误监控
1.1 安装Sentry SDK
Run:
npm install @sentry/nextjs
1.2 初始化Sentry
Run:
npx @sentry/wizard@latest -i nextjs
Expected: Sentry wizard引导完成配置
1.3 验证Sentry配置
Run:
cat sentry.client.config.ts | grep -A 3 "Sentry.init"
Expected: 显示Sentry初始化配置
1.4 测试Sentry集成
Run:
# 在浏览器中访问网站
# 打开浏览器控制台
# 执行: throw new Error('Test error');
# 检查Sentry Dashboard是否收到错误
Expected: Sentry Dashboard显示测试错误
Step 2: 配置UptimeRobot可用性监控
2.1 注册UptimeRobot账号
访问: https://uptimerobot.com/register
2.2 添加监控
配置:
- Monitor Type: HTTP(s)
- URL: https://www.novalon.cn
- Monitoring Interval: 5 minutes
- Alert Contacts: 添加邮箱和手机号
2.3 验证监控
Run:
# 等待5-10分钟
# 访问UptimeRobot Dashboard
# 检查监控状态是否为"Up"
Expected: 监控状态显示为"Up"
Step 3: 配置Next.js Analytics
3.1 安装Analytics
Run:
npm install @vercel/analytics
Expected: 安装成功
3.2 添加Analytics组件
Run:
# 在src/app/layout.tsx中添加
# import { Analytics } from '@vercel/analytics/react';
# 在<body>标签内添加<Analytics />
Expected: Analytics组件已添加
3.3 验证Analytics
Run:
# 访问网站
# 等待5分钟
# 访问Vercel Dashboard > Analytics
# 查看Web Vitals数据
Expected: 显示Core Web Vitals数据
Step 4: 配置简单健康检查
4.1 创建健康检查API
Run:
# 文件已存在: 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性能指标
问题处理
-
Sentry收到错误
- 查看错误详情和堆栈
- 修复错误并部署
- 验证错误不再出现
-
UptimeRobot告警
- 立即检查网站状态
- 查看服务器日志
- 必要时执行回滚
-
Analytics性能下降
- 查看Core Web Vitals数据
- 优化页面加载性能
- 验证性能改善
总结
优势:
- ✅ 零部署成本
- ✅ 低维护负担
- ✅ 实时告警
- ✅ 适合商业网站
监控覆盖:
- ✅ 错误监控（Sentry）
- ✅ 可用性监控（UptimeRobot）
- ✅ 性能监控（Next.js Analytics）
- ✅ 健康检查（API端点）
下一步: 按照上述步骤配置监控服务