跳到主要内容

前端质量保障体系

场景​

项目频繁出现线上 bug，如何建立一套完整的前端质量保障体系？

方案设计​

质量保障分层模型​

1. 测试策略（测试金字塔）​

层级工具覆盖范围运行时机
单元测试Vitest/Jest工具函数、Hooks每次提交
组件测试Testing LibraryUI 组件每次提交
集成测试MSW + Testing Library页面级PR 合并
E2E 测试Playwright核心流程发布前
测试覆盖率目标
// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      thresholds: {
        // 核心模块要求更高
        'src/utils/**': { branches: 90, functions: 90 },
        'src/hooks/**': { branches: 80, functions: 80 },
        // 全局最低
        global: { branches: 60, functions: 60 },
      },
    },
  },
});

2. CI 流水线​

.github/workflows/ci.yml (简化)
name: CI
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint        # ESLint + 类型检查
      - run: pnpm test        # 单元测试
      - run: pnpm build       # 构建检查
      # 产物大小检查
      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

3. 线上监控​

error-monitoring.ts
// 全局错误捕获
window.addEventListener('error', (event) => {
  reportError({
    type: 'js_error',
    message: event.message,
    stack: event.error?.stack,
    url: location.href,
  });
});

window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'promise_rejection',
    message: String(event.reason),
    url: location.href,
  });
});

4. 质量度量指标​

指标目标衡量方式
线上错误率< 0.1%Sentry 错误数/PV
测试覆盖率> 70%CI 报告
构建成功率> 98%CI 统计
Code Review 通过率首次通过 > 80%Git 统计
P0 Bug 数0Bug 系统
平均修复时间< 4 小时告警到修复

常见面试问题​

Q1: 你在项目中是如何保证代码质量的？​

答案：

从 4 个阶段保证：

  1. 编码时：TypeScript + ESLint 实时检查
  2. 提交时：Husky + lint-staged 预检查 + 必须 Code Review
  3. 构建时：CI 运行测试 + 类型检查 + Bundle 体积检查
  4. 上线后：Sentry 错误监控 + 性能监控 + 告警通知

Q2: 如何推动团队写单元测试？​

答案：

  1. 降低门槛：提供测试模板和公共 Mock，让写测试变简单
  2. 从工具函数开始：纯函数最容易测试，先养成习惯
  3. CI 门禁：覆盖率低于阈值不允许合并
  4. Code Review：新功能必须配套测试
  5. 正向激励：统计各人/各模块覆盖率，内部分享优秀案例

相关链接​