在Day28中，我們成功利用VercelAISDK的generateObject與ZodSchema實作了AI技能學習路線圖(Roadmap)一鍵自動生成。

今天（Day29），我們將為VibePulse架設最堅固的品質防護網PlaywrightE2E自動化測試與Sentry即時錯誤監控

在產品即將進入最終發布階段前，我們必須確保：

關鍵使用者流程(CriticalUserJourneys,CUJ)：包含登入、技能CRUD、練習打卡、AI教練對話等流程皆能透過E2E腳本自動驗證。

生產環境Exceptions捕捉：線上任何未預期的RuntimeError或API異常皆能即時通報至Sentry，附帶完整的StackTrace與脈絡。

實戰步驟1：配置Playwright並撰寫E2E測試腳本
A.安裝與初始化Playwright

npm init playwright@latest

選擇使用TypeScript，將測試檔放置於e2e/資料夾。
B.設定playwright.config.ts

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: {
    command: 'npm run build && npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

C.撰寫核心流程測試(e2e/skills.spec.ts)
測試關鍵流程：新增技能、進行打卡與觸發AI教練抽屜：

// e2e/skills.spec.ts
import { test, expect } from '@playwright/test';

test.describe('VibePulse 核心技能流程 E2E 測試', () => {
  test('使用者應能成功進入儀表板並開啟技能頁面', async ({ page }) => {
    // 1. 進入儀表板
    await page.goto('/zh-TW/dashboard');
    await expect(page.getByRole('heading', { name: /全站數據儀表板/i })).toBeVisible();

    // 2. 切換至技能頁面
    await page.click('text=技能圖譜');
    await expect(page).toHaveURL(/\/zh-TW\/skills/);

    // 3. 測試開啟 AI 教練抽屜
    const coachBtn = page.getByRole('button', { name: /諮詢 AI 學習教練/i });
    if (await coachBtn.isVisible()) {
      await coachBtn.click();
      await expect(page.getByText('AI 技能學習教練')).toBeVisible();
    }
  });
});

執行測試指令：

npx playwright test

實戰步驟2：整合Sentry全端錯誤監控
A.安裝SentryNext.jsSDK

npx @sentry/wizard@latest -i nextjs

Wizard將會自動生成sentry.client.config.ts、sentry.server.config.ts與sentry.edge.config.ts。
B.配置sentry.client.config.ts

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

C.在APIRoutes中手動捕獲異常並回傳SentryID
在app/api/ai/coach/route.ts或資料庫API中加入SentryExceptionCapture：

// app/api/ai/coach/route.ts (簡化範例)
import * as Sentry from '@sentry/nextjs';

export async function POST(req: Request) {
  try {
    // 正常處理邏輯...
  } catch (error) {
    // 主動推送 Exception 至 Sentry 儀表板
    const eventId = Sentry.captureException(error);
    
    return new Response(
      JSON.stringify({ error: 'AI 教練服務暫時不可用', sentryId: eventId }),
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

實戰步驟3：整合GitHubActions自動化CI測試
在.github/workflows/e2e.yml設定每次PullRequest時自動執行Playwright：

# .github/workflows/e2e.yml
name: Playwright E2E Tests

on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 18
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        DATABASE_URL: ${{ secrets.DATABASE_URL }}

今天我們完成了VibePulse生產環境前夕最後一道防線：

PlaywrightE2E測試：建立真實瀏覽器自動化測試，防範跨頁面與互動邏輯的Regressions。

Sentry全端錯誤追蹤：完整監控Client/ServerSide運行時未捕獲的Exception，並提供SessionReplay協助除錯。

CI/CD自動化防線：透過GitHubActions確保每次程式碼變更通過E2E測試才可合併。