refactor: replace heavy monitoring with lightweight solution
This commit is contained in:
张翔
@@ -0,0 +1,244 @@
|
||||
# 轻量级监控配置指南
|
||||
|
||||
> **监控策略:** 采用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';
|
||||
# 在<body>标签内添加<Analytics />
|
||||
```
|
||||
|
||||
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端点）
|
||||
|
||||
**下一步:** 按照上述步骤配置监控服务
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user