故障排查 #

┌─────────────────────────────────────────┐
│        故障排查工具                      │
├─────────────────────────────────────────┤
│  构建日志    →  排查构建失败             │
│  函数日志    →  排查运行时错误           │
│  实时日志    →  实时监控                 │
│  CLI 工具    →  本地调试                 │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│        构建失败原因                      │
├─────────────────────────────────────────┤
│  依赖安装失败                           │
│  构建命令错误                           │
│  内存不足                               │
│  环境变量缺失                           │
│  TypeScript 错误                        │
│  ESLint 错误                            │
└─────────────────────────────────────────┘

Project → Deployments → [Deployment] → Build Logs

[00:00:00.000] Running build in Washington, D.C., USA
[00:00:01.000] Cloning repository...
[00:00:02.000] Cloning completed: 1.234s
[00:00:02.100] Running "vercel build"
[00:00:02.200] Detecting framework...
[00:00:02.300] Framework detected: Next.js
[00:00:02.400] Installing dependencies...
[00:00:15.000] npm install completed
[00:00:15.100] Running "npm run build"
[00:00:45.000] Build failed: Error: ...

npm ERR! ERESOLVE unable to resolve dependency tree

{
  "overrides": {
    "package-name": "version"
  }
}

npm install --legacy-peer-deps

vercel env add NPM_TOKEN

.npmrc
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed

{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=4096' next build"
  }
}

Type error: Property 'x' does not exist on type 'Y'.

{
  "scripts": {
    "build": "next build --no-lint"
  }
}

Error: ESLint configuration is invalid

{
  "scripts": {
    "build": "next build --no-lint"
  }
}

Deployment timed out

{
  "buildCommand": "npm run build",
  "installCommand": "npm ci"
}

dig example.com
dig example.com A
dig www.example.com CNAME

├── DNS 记录是否正确
├── DNS 是否已传播
├── SSL 证书状态
└── 域名是否已验证

SSL certificate provisioning failed

{
  "outputDirectory": "dist"
}

vercel logs [deployment-url]

┌─────────────────────────────────────────┐
│        函数错误类型                      │
├─────────────────────────────────────────┤
│  超时        →  maxDuration 限制        │
│  内存不足    →  memory 限制             │
│  环境变量    →  变量未设置              │
│  依赖缺失    →  包未安装                │
└─────────────────────────────────────────┘

Function execution timed out

export const maxDuration = 60

vercel env ls
vercel env pull .env.local

├── 变量是否添加到正确环境
├── 变量名称是否正确
├── 是否需要重新部署
└── 是否有正确的命名前缀

import { Pool } from 'pg'

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  max: 1,
  ssl: {
    rejectUnauthorized: false
  }
})

Project → Analytics → Web Vitals

export const runtime = 'edge'

export async function GET() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 }
  }).then(r => r.json())
  
  return Response.json(data, {
    headers: {
      'Cache-Control': 's-maxage=60'
    }
  })
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={800}
      height={600}
      priority
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  )
}

vercel dev

vercel logs --follow
vercel logs --output raw

export async function GET() {
  console.log('Debug: Request received')
  console.log('Debug: Headers', JSON.stringify(request.headers))
  
  try {
    const result = await someOperation()
    console.log('Debug: Result', JSON.stringify(result))
    return Response.json(result)
  } catch (error) {
    console.error('Debug: Error', error)
    return Response.json({ error: error.message }, { status: 500 })
  }
}

export async function GET() {
  debugger
  const data = await fetchData()
  return Response.json(data)
}

vercel inspect [deployment-url]

┌─────────────────────────────────────────┐
│        获取帮助途径                      │
├─────────────────────────────────────────┤
│  文档        →  vercel.com/docs         │
│  社区论坛    →  github.com/vercel/vercel/discussions
│  Twitter     →  @vercel                 │
│  支持        →  vercel.com/support      │
└─────────────────────────────────────────┘

Dashboard → Help → Contact Support

github.com/vercel/vercel/issues

┌─────────────────────────────────────────┐
│        故障预防最佳实践                  │
├─────────────────────────────────────────┤
│  ✓ 使用 TypeScript                      │
│  ✓ 配置 ESLint                          │
│  ✓ 编写测试用例                         │
│  ✓ 设置 CI/CD 检查                      │
│  ✓ 监控 Web Vitals                      │
│  ✓ 配置告警通知                         │
│  ✓ 定期更新依赖                         │
│  ✓ 备份重要配置                         │
└─────────────────────────────────────────┘

export async function GET() {
  const health = {
    status: 'ok',
    timestamp: new Date().toISOString(),
    version: process.env.npm_package_version,
  }
  
  return Response.json(health)
}