错误监控与 Sentry

import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/browser';

const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
const APP_VERSION = import.meta.env.VITE_APP_VERSION;
const ENVIRONMENT = import.meta.env.MODE;

export function initSentry(): void {
  if (!SENTRY_DSN) {
    console.warn('[Sentry] DSN not configured, skipping initialization');
    return; // 本地开发或未配置环境直接跳过，不报错中断
  }

  Sentry.init({
    dsn: SENTRY_DSN,
    release: `fandex-web@${APP_VERSION}`,
    environment: ENVIRONMENT,
    tracesSampleRate: ENVIRONMENT === 'production' ? 0.1 : 1.0,
    replaysSessionSampleRate: ENVIRONMENT === 'production' ? 0.01 : 0.1,
    replaysOnErrorSampleRate: 1.0,
    integrations: [
      new BrowserTracing(),
      Sentry.replayIntegration({
        maskAllText: true,      // 录屏时遮蔽文本：防止用户输入进平台
        blockAllMedia: false,
      }),
      Sentry.offlineIntegration(), // 离线缓存，恢复网络后补报
    ],
    ignoreErrors: [
      'ResizeObserver loop limit exceeded', // 浏览器噪声，无业务意义
      'Network request failed',
      'Failed to fetch',
    ],
    denyUrls: [
      /chrome-extension:\/\//,  // 用户装的浏览器插件抛的错不是你的锅
      /extensions\//,
    ],
    beforeSend(event) {
      if (event.user?.email?.endsWith('@test.com')) {
        return null; // 测试账号的错误直接丢弃
      }
      return event;
    },
  });

  Sentry.setTag('app.version', APP_VERSION);
  Sentry.setTag('runtime.environment', ENVIRONMENT);
}

Sentry.init({
  dsn: '...',
  // 反模式：所有信号一律 100%
  // tracesSampleRate: 1.0,
  // replaysSessionSampleRate: 1.0,

  // 正确：分层采样
  tracesSampleRate: (samplingContext) => {
    if (samplingContext.transactionContext.name.includes('checkout')) {
      return 1.0;           // 结账路径 100%：业务关键，多贵都要
    }
    if (samplingContext.parentSampled) {
      return 1.0;           // 父事务已采样则跟随
    }
    return 0.01;            // 普通路径 1%
  },
  replaysSessionSampleRate: 0.01, // 普通会话录屏 1%
  replaysOnErrorSampleRate: 1.0,  // 出错会话 100%：错误现场必录
});

# .github/workflows/deploy.yml
- name: Build & Upload Source Maps
  run: |
    npm run build
    npx sentry-cli sourcemaps upload --release=fandex-web@${{ github.sha }} dist/
    rm -rf dist/**/*.map

Sentry.init({
  dsn: '...',
  release: `fandex-web@${APP_VERSION}`, // 错误与代码版本绑定
});

await cli.releases.setCommits(release, {
  repo: 'fandex/web',
  commit: process.env.GIT_SHA!,
  previousCommit: process.env.PREVIOUS_GIT_SHA,
});

Sentry.addBreadcrumb({
  category: 'ui',
  message: 'Clicked checkout button',
  level: 'info',
});

// globalErrorHandler.ts
import * as Sentry from '@sentry/react';

export function setupGlobalErrorHandlers(): void {
  // 1. 未处理的同步错误
  window.addEventListener('error', (event) => {
    if (event.message === 'Script error.') {
      Sentry.captureMessage('Cross-origin script error', 'error');
      return; // 跨域脚本拿不到细节，单独标记
    }
    Sentry.captureException(event.error, {
      contexts: {
        default: { filename: event.filename, lineno: event.lineno, colno: event.colno },
      },
    });
  });

  // 2. 未处理的 Promise rejection
  window.addEventListener('unhandledrejection', (event) => {
    const error = event.reason instanceof Error
      ? event.reason
      : new Error(`Unhandled rejection: ${JSON.stringify(event.reason)}`);
    Sentry.captureException(error, { tags: { type: 'unhandledrejection' } });
  });

  // 3. 资源加载失败（img/script/link）——用捕获阶段才能收到
  window.addEventListener('error', (event) => {
    const target = event.target as HTMLElement;
    if (target && ['IMG', 'SCRIPT', 'LINK'].includes(target.tagName)) {
      Sentry.captureMessage(
        `Resource load failed: ${(target as HTMLImageElement).src ?? (target as HTMLLinkElement).href}`,
        'warning',
      );
    }
  }, true);
}

import { useCallback, useState } from 'react';
import * as Sentry from '@sentry/react';

export function useErrorHandler() {
  const [error, setError] = useState<Error | null>(null);

  const handleError = useCallback((err: unknown, context?: Record<string, unknown>) => {
    const normalizedError = err instanceof Error ? err : new Error(String(err));
    Sentry.captureException(normalizedError, { extra: context }); // 先上报
    setError(normalizedError);                                     // 再进渲染路径
  }, []);

  const resetError = useCallback(() => setError(null), []);
  return { error, isError: error !== null, resetError, handleError };
}

// 使用：上传失败既被记录，又能触发上层边界降级
function AsyncButton({ onClick }: { onClick: () => Promise<void> }) {
  const { handleError, isError } = useErrorHandler();

  if (isError) {
    throw new Error('异步操作失败，交由上层边界降级'); // 转入渲染期，交给上层 Error Boundary
  }
  return (
    <button
      onClick={async () => {
        try {
          await onClick();
        } catch (e) {
          handleError(e, { action: 'async-button' });
        }
      }}
    >
      提交
    </button>
  );
}

import * as Sentry from '@sentry/react';
import { createBrowserRouter, RouterProvider } from 'react-router';

const SentryErrorBoundary = Sentry.ErrorBoundary;

const router = createBrowserRouter([
  {
    path: '/dashboard',
    element: (
      <SentryErrorBoundary fallback={<ErrorFallback />} showDialog>
        <Dashboard />
      </SentryErrorBoundary>
    ),
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

// app/error.tsx
'use client';

import { useEffect } from 'react';
import * as Sentry from '@sentry/react';

export default function Error({ error, reset }: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    Sentry.captureException(error); // App Router 的路由错误不走组件边界，在这里上报
  }, [error]);

  return (
    <div>
      <h2>出错了</h2>
      <p>{error.message}</p>
      {error.digest && <p>Error ID: {error.digest}</p>}
      <button onClick={reset}>重试</button>
    </div>
  );
}

// next.config.ts
import { withSentryConfig } from '@sentry/nextjs';

export default withSentryConfig(
  {
    reactStrictMode: true,
  },
  {
    org: 'fandex',
    project: 'web',
    silent: !process.env.CI,
    reactComponentAnnotation: { enabled: true },
    widenClientFileUpload: true,
    disableLogger: true,
  },
);

// vite.config.ts
export default defineConfig(({ mode }) => ({
  build: {
    sourcemap: mode === 'production' ? 'hidden' : true,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'sentry': ['@sentry/react'],
        },
      },
    },
  },
}));

# sentry-alerts.yml
rules:
  - name: 高错误率告警
    conditions:
      - event.level == "error"
      - event.frequency > 10/min
    actions:
      - notify: { channel: slack, target: '#frontend-alerts' }
      - notify: { channel: pagerduty, service_key: '${PAGERDUTY_SERVICE_KEY}' }
    cooldown: 30min

  - name: 新错误告警
    conditions:
      - event.is_new == true
      - event.level in ["error", "fatal"]
    actions:
      - notify: { channel: slack, target: '#frontend-errors' }
    cooldown: 5min

  - name: Release 回归
    conditions:
      - event.is_regression == true
      - event.release == "latest"
    actions:
      - notify: { channel: slack, target: '#release-alerts' }

# 验证 Source Map 上传
npx sentry-cli sourcemaps list --release=fandex-web@1.2.3

# 验证事件接收
npx sentry-cli issues list --query=is:unresolved

# 验证 Source Map 上传
npx sentry-cli sourcemaps list --release=fandex-web@1.2.3

# 验证错误反解
npx sentry-cli issues list --query=is:unresolved

// SLO 定义
const SLO = {
  // 错误率 SLO：99.9% 请求无错误
  errorRate: 0.001,
  // INP SLO：P95 < 200ms
  inpP95: 200,
  // LCP SLO：P95 < 2.5s
  lcpP95: 2500,
};

// 监控仪表盘
function SLODashboard() {
  const errorRate = useSentryMetric('error_rate', '1h');
  const inp = useSentryMetric('inp_p95', '1h');
  const lcp = useSentryMetric('lcp_p95', '1h');

  return (
    <div>
      <MetricCard
        name="Error Rate"
        value={errorRate}
        target={`< ${SLO.errorRate * 100}%`}
        status={errorRate <= SLO.errorRate ? 'healthy' : 'breach'}
      />
      <MetricCard
        name="INP P95"
        value={`${inp}ms`}
        target={`< ${SLO.inpP95}ms`}
        status={inp <= SLO.inpP95 ? 'healthy' : 'breach'}
      />
    </div>
  );
}