张翔
245 lines
4.8 KiB
Markdown
245 lines
4.8 KiB
Markdown
# 轻量级监控配置指南
|
||
|
||
> **监控策略:** 采用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端点）
|
||
|
||
**下一步:** 按照上述步骤配置监控服务
|