# 轻量级监控配置指南 > **监控策略:** 采用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: ```bash npm install @sentry/nextjs ``` #### 1.2 初始化Sentry Run: ```bash npx @sentry/wizard@latest -i nextjs ``` Expected: Sentry wizard引导完成配置 #### 1.3 验证Sentry配置 Run: ```bash cat sentry.client.config.ts | grep -A 3 "Sentry.init" ``` Expected: 显示Sentry初始化配置 #### 1.4 测试Sentry集成 Run: ```bash # 在浏览器中访问网站 # 打开浏览器控制台 # 执行: 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: ```bash # 等待5-10分钟 # 访问UptimeRobot Dashboard # 检查监控状态是否为"Up" ``` Expected: 监控状态显示为"Up" --- ### Step 3: 配置Next.js Analytics #### 3.1 安装Analytics Run: ```bash npm install @vercel/analytics ``` Expected: 安装成功 #### 3.2 添加Analytics组件 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端点） **下一步:** 按照上述步骤配置监控服务