novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: configure lightweight monitoring (Sentry, UptimeRobot, Analytics)

Browse Source
This commit is contained in:
张翔
2026-03-10 17:36:37 +08:00
parent dbba1123b9
commit 1988b53388
4 changed files with 115 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/MONITORING_LIGHTWEIGHT.md
+90 -210
View File
@@ -1,244 +1,124 @@
# 轻量级监控配置指南 # 轻量级监控配置指南
> **监控策略:** 采用SaaS服务，零部署成本，低维护负担 > **配置时间:** 2026-03-10
> **适用场景:** 商业网站，中小型应用 > **监控类型:** 错误监控、性能监控、可用性监控
## 监控方案概述 ## 监控服务概览
### 1. 错误监控：Sentry ### 1. Sentry - 错误监控与追踪
**作用:** 实时错误追踪和性能监控
**成本:** 免费版每月5000错误
**集成难度:** 简单（5分钟）
### 2. 可用性监控：UptimeRobot **配置文件:**
**作用:** 网站可用性和响应时间监控 - `sentry.client.config.ts` - 客户端配置
**成本:** 免费版5个监控点 - `sentry.server.config.ts` - 服务端配置
**集成难度:** 无需代码（在线配置）
### 3. 性能监控：Next.js Analytics **环境变量:**
**作用:** Core Web Vitals和用户体验指标
**成本:** 免费
**集成难度:** 简单（3分钟）
### 4. 日志监控：简单日志文件
**作用:** 应用日志和错误日志
**成本:** 免费
**集成难度:** 无（Next.js内置）
---
## 配置步骤
### Step 1: 配置Sentry错误监控
#### 1.1 安装Sentry SDK
Run:
```bash ```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 - Dashboard: https://sentry.io/
npx @sentry/wizard@latest -i nextjs
```
Expected: Sentry wizard引导完成配置 **配置说明:**
- 开发环境不发送错误（beforeSend过滤）
- 生产环境完整监控
- 所有文本和媒体已脱敏处理
#### 1.3 验证Sentry配置 ### 2. Next.js Analytics - 性能监控
Run: **配置:**
```bash - 已集成到 `src/app/layout.tsx`
cat sentry.client.config.ts | grep -A 3 "Sentry.init" - 使用 `<Analytics />` 组件
```
Expected: 显示Sentry初始化配置 **功能:**
- Web Vitals 监控
- 页面浏览量统计
- 用户行为分析
#### 1.4 测试Sentry集成 **访问地址:**
- Dashboard: https://vercel.com/analytics
Run: ### 3. UptimeRobot - 可用性监控
```bash
# 在浏览器中访问网站
# 打开浏览器控制台
# 执行: throw new Error('Test error');
# 检查Sentry Dashboard是否收到错误
```
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) - 月度可用性: > 99.9%
- **URL:** https://www.novalon.cn - 年度可用性: > 99.5%
- **Monitoring Interval:** 5 minutes
- **Alert Contacts:** 添加邮箱和手机号
#### 2.3 验证监控 ## 告警通知
Run: ### 告警级别
```bash - **P0 (紧急):** 立即通知（电话 + 短信 + 邮件）
# 等待5-10分钟 - **P1 (重要):** 5分钟内通知（短信 + 邮件）
# 访问UptimeRobot Dashboard - **P2 (一般):** 30分钟内通知（邮件）
# 检查监控状态是否为"Up"
```
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';
# 在<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端点）
**下一步:** 按照上述步骤配置监控服务
sentry.client.config.ts
+15 -3
View File
@@ -1,9 +1,21 @@
import * as Sentry from '@sentry/nextjs'; import * as Sentry from "@sentry/nextjs";
Sentry.init({ Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
environment: process.env.NODE_ENV, tracesSampleRate: 1.0,
tracesSampleRate: 0.1,
replaysSessionSampleRate: 0.1, replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0, 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;
},
}); });
sentry.server.config.ts
+8 -2
View File
@@ -1,7 +1,13 @@
import * as Sentry from '@sentry/nextjs'; import * as Sentry from "@sentry/nextjs";
Sentry.init({ Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
tracesSampleRate: 1.0,
environment: process.env.NODE_ENV, environment: process.env.NODE_ENV,
tracesSampleRate: 0.1, beforeSend(event) {
if (process.env.NODE_ENV === "development") {
return null;
}
return event;
},
}); });
src/app/layout.tsx
+2
View File
@@ -4,6 +4,7 @@ import "./globals.css";
import { ThemeProvider } from "@/contexts/theme-context"; import { ThemeProvider } from "@/contexts/theme-context";
import { WebVitals } from "@/components/analytics/web-vitals"; import { WebVitals } from "@/components/analytics/web-vitals";
import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics"; import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
import { Analytics } from "@vercel/analytics/react";
import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data"; import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
import { MobileTabBar } from "@/components/layout/mobile-tab-bar"; import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
import { ErrorBoundary } from "@/components/ui/error-boundary"; import { ErrorBoundary } from "@/components/ui/error-boundary";
@@ -150,6 +151,7 @@ export default function RootLayout({
</ThemeProvider> </ThemeProvider>
</SessionProvider> </SessionProvider>
<MobileTabBar /> <MobileTabBar />
<Analytics />
</body> </body>
</html> </html>
); );