Vercel 如何处理错误和日志管理？

Vercel 提供了一套完善的错误处理和日志管理系统，帮助开发者快速识别、调试和解决问题。了解这些功能对于维护生产环境的稳定性至关重要。

日志管理

1. 实时日志

构建日志：

显示构建过程的每一步
包括依赖安装、构建命令执行等
实时更新构建进度
显示构建错误和警告

运行时日志：

Serverless Functions 的执行日志
API Routes 的请求和响应日志
错误堆栈跟踪
性能指标

访问日志：

HTTP 请求日志
响应时间
状态码
请求来源

2. 日志查看方式

通过 Vercel Dashboard：

进入项目页面
选择 "Deployments" 标签
点击特定的部署
查看 "Build Logs" 或 "Function Logs"

通过 Vercel CLI：

bash
# 查看最新部署的日志
vercel logs

# 查看特定部署的日志
vercel logs <deployment-url>

# 实时跟踪日志
vercel logs --follow

# 查看函数日志
vercel logs --filter function

3. 日志过滤和搜索

过滤选项：

按时间范围过滤
按日志级别过滤（Error、Warning、Info）
按函数名称过滤
按请求 ID 过滤

搜索功能：

关键词搜索
正则表达式搜索
组合过滤条件

bash
# 搜索包含特定关键词的日志
vercel logs --grep "error"

# 过滤特定函数的日志
vercel logs --filter "api/hello"

4. 日志导出

导出日志：

支持导出为 JSON 格式
可以导出特定时间范围的日志
用于离线分析和存档

bash
# 导出日志到文件
vercel logs --output logs.json

错误处理

1. 构建错误

常见构建错误：

依赖安装失败：

shell
Error: Cannot find module 'react'

解决方案：

检查 package.json 中的依赖
删除 node_modules 和 package-lock.json
重新安装依赖
检查 Node.js 版本兼容性

构建命令失败：

shell
Error: Build failed with exit code 1

解决方案：

检查构建命令是否正确
查看详细的错误信息
本地重现构建过程
检查环境变量配置

类型错误：

shell
Error: Type 'string' is not assignable to type 'number'

解决方案：

修复 TypeScript 类型错误
运行本地类型检查
使用 --noEmit 选项验证

2. 运行时错误

Serverless Functions 错误：

超时错误：

javascript
Error: Function execution timed out

解决方案：

优化函数执行时间
增加函数超时限制
使用异步处理模式
拆分长时间运行的任务

内存不足错误：

javascript
Error: JavaScript heap out of memory

解决方案：

增加函数内存限制
优化内存使用
使用流式处理
减少数据加载量

未捕获的异常：

javascript
Error: UnhandledPromiseRejectionWarning

解决方案：

添加适当的错误处理
使用 try-catch 块
实现全局错误处理器
记录所有未捕获的异常

3. 部署错误

域名配置错误：

shell
Error: Domain verification failed

解决方案：

检查 DNS 记录配置
等待 DNS 传播
验证域名所有权
检查 SSL 证书状态

环境变量错误：

shell
Error: Missing required environment variable

解决方案：

检查环境变量配置
确保所有必需的变量都已设置
验证变量名称拼写
重新部署项目

错误追踪集成

1. Sentry 集成

安装 Sentry：

bash
npm install @sentry/nextjs
npx @sentry/wizard -i nextjs

配置 Sentry：

javascript
// sentry.client.config.js
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
});

捕获错误：

javascript
try {
  // 你的代码
} catch (error) {
  Sentry.captureException(error);
}

2. 其他错误追踪服务

LogRocket：

会话回放
性能监控
错误追踪

Rollbar：

实时错误报告
错误分组
部署跟踪

Bugsnag：

自动错误报告
错误分析
用户影响分析

性能监控

1. Vercel Analytics

集成 Analytics：

jsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

监控指标：

Web Vitals（LCP、FID、CLS）
页面加载时间
用户行为分析
转化率追踪

2. 自定义性能监控

性能追踪：

javascript
export async function getServerSideProps() {
  const start = Date.now();
  
  try {
    const data = await fetchData();
    const duration = Date.now() - start;
    
    // 记录性能指标
    console.log(`Data fetch duration: ${duration}ms`);
    
    return { props: { data } };
  } catch (error) {
    console.error('Error fetching data:', error);
    return { props: { error: true } };
  }
}

调试技巧

1. 本地调试

使用 Vercel CLI 本地开发：

bash
# 启动本地开发服务器
vercel dev

# 模拟生产环境
vercel dev --production

本地环境变量：

bash
# 拉取环境变量
vercel env pull .env.local

# 推送环境变量
vercel env push .env.local

2. 远程调试

使用日志调试：

javascript
export default async function handler(req, res) {
  console.log('Request received:', req.method, req.url);
  console.log('Request body:', req.body);
  
  try {
    const result = await processData(req.body);
    console.log('Processing result:', result);
    res.status(200).json(result);
  } catch (error) {
    console.error('Processing error:', error);
    res.status(500).json({ error: error.message });
  }
}

3. 性能分析

使用 Chrome DevTools：

Network 面板分析请求
Performance 面板分析性能
Memory 面板分析内存使用

使用 Lighthouse：

运行性能审计
识别性能瓶颈
获取优化建议

告警和通知

1. 部署失败告警

配置告警：

在 Vercel Dashboard 中设置
通过邮件通知
通过 Slack 通知
通过 Webhook 通知

设置步骤：

进入项目设置
选择 "Notifications"
配置告警规则
设置通知渠道

2. 错误率告警

监控错误率：

设置错误率阈值
配置告警触发条件
定义通知频率

集成第三方服务：

PagerDuty
Opsgenie
VictorOps

3. 性能告警

Web Vitals 告警：

LCP 阈值告警
FID 阈值告警
CLS 阈值告警

自定义性能指标：

API 响应时间
数据库查询时间
函数执行时间

最佳实践

1. 日志记录

结构化日志：

javascript
export default async function handler(req, res) {
  const logData = {
    timestamp: new Date().toISOString(),
    method: req.method,
    url: req.url,
    userId: req.headers['x-user-id'],
  };
  
  console.log(JSON.stringify(logData));
  
  try {
    const result = await processRequest(req);
    console.log(JSON.stringify({ ...logData, status: 'success' }));
    res.status(200).json(result);
  } catch (error) {
    console.error(JSON.stringify({ 
      ...logData, 
      status: 'error',
      error: error.message 
    }));
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

日志级别：

Error：严重错误
Warning：警告信息
Info：一般信息
Debug：调试信息

2. 错误处理

全局错误处理：

javascript
// pages/_error.js
export default function Error({ statusCode }) {
  return (
    <div>
      <h1>Error: {statusCode}</h1>
      <p>Something went wrong</p>
    </div>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

API 错误处理：

javascript
export default async function handler(req, res) {
  try {
    // 验证请求
    if (!req.body) {
      return res.status(400).json({ error: 'Request body is required' });
    }
    
    // 处理请求
    const result = await processRequest(req.body);
    res.status(200).json(result);
  } catch (error) {
    // 记录错误
    console.error('API Error:', error);
    
    // 返回适当的错误响应
    if (error instanceof ValidationError) {
      return res.status(400).json({ error: error.message });
    }
    
    if (error instanceof AuthenticationError) {
      return res.status(401).json({ error: 'Unauthorized' });
    }
    
    // 默认错误响应
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

3. 监控和分析

定期审查日志：

每日检查错误日志
分析错误模式
识别潜在问题
制定改进计划

性能监控：

监控关键指标
设置性能基线
识别性能退化
优化慢速端点

用户反馈：

收集用户错误报告
分析用户行为
改进用户体验
优先处理影响用户的问题

故障排除流程

1. 问题识别

症状识别：

用户报告问题
监控告警触发
日志显示错误
性能指标下降

2. 问题诊断

收集信息：

查看相关日志
检查错误堆栈
分析性能数据
复现问题

3. 问题解决

实施修复：

修复代码
更新配置
优化性能
测试修复

4. 验证和监控

验证修复：

部署修复
测试功能
监控日志
确认问题解决

总结

Vercel 的错误处理和日志管理提供了：

全面的日志记录：构建、运行时、访问日志
强大的错误追踪：集成第三方错误追踪服务
实时监控：性能指标和错误率监控
灵活的告警：多种通知渠道和告警规则
便捷的调试工具：本地和远程调试支持

通过有效利用这些功能，开发者可以快速识别和解决问题，提高应用的稳定性和可靠性。