SourceMap线上调试与Sentry监控

// 原始代码
function calculateTotal(items) {
    const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    if (total > 10000) {
        throw new Error('Total exceeds limit');
    }
    return total;
}

// 压缩后的代码
function a(e){const t=e.reduce((e,t)=>e+t.price*t.quantity,0);if(t>1e4)throw new Error("Total exceeds limit");return t}

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Production",
            "url": "https://your-site.com",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}",
            "resolveSourceMapLocations": [
                "https://your-site.com/**"
            ]
        }
    ]
}

// webpack.config.js
module.exports = {
    devtool: 'hidden-source-map',  // 生成 SourceMap 但不关联
    // ...
};

// vite.config.js
export default defineConfig({
    build: {
        sourcemap: 'hidden',  // 生成 SourceMap 但不关联
    },
});

// Vite
build: { sourcemap: true }

// Webpack
devtool: 'eval-cheap-module-source-map'

// Vite
build: { sourcemap: 'hidden' }  // 生成但不关联

// Webpack
devtool: 'hidden-source-map'  // 生成但不关联

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { sentryVitePlugin } from '@sentry/vite-plugin';

export default defineConfig({
    plugins: [
        vue(),
        sentryVitePlugin({
            org: 'your-org',
            project: 'your-project',
            authToken: process.env.SENTRY_AUTH_TOKEN,

            // SourceMap 配置
            sourcemaps: {
                filesToDeleteAfterUpload: ['dist/**/*.map'],  // 上传后删除
            },

            // Release 配置
            release: {
                name: process.env.SENTRY_RELEASE || '1.0.0',
                create: true,
                finalize: true,
                setCommits: {
                    auto: true,  // 自动关联 Git commits
                },
            },
        }),
    ],

    build: {
        sourcemap: true,  // 必须生成 SourceMap
    },
});

// webpack.config.js
const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');

module.exports = {
    devtool: 'source-map',  // 必须生成 SourceMap

    plugins: [
        sentryWebpackPlugin({
            org: 'your-org',
            project: 'your-project',
            authToken: process.env.SENTRY_AUTH_TOKEN,
            release: { name: process.env.SENTRY_RELEASE },
        }),
    ],
};

// src/main.js（Vue 项目）
import * as Sentry from '@sentry/vue';

Sentry.init({
    dsn: 'https://your-dsn@sentry.io/your-project-id',
    integrations: [
        Sentry.browserTracingIntegration(),  // 性能监控
        Sentry.replayIntegration(),           // Session Replay
    ],
    tracesSampleRate: 0.1,    // 10% 的请求追踪性能
    replaysSessionSampleRate: 0.1,  // 10% 的正常 Session 录制
    replaysOnErrorSampleRate: 1.0,  // 100% 的错误 Session 录制
    release: '1.0.0',         // 对应上传的 SourceMap Release
});

// 创建 Release
const release = process.env.SENTRY_RELEASE || 'my-app-1.0.0';

// Sentry.init 中设置
Sentry.init({
    release,
});

// Sentry Plugin 中设置
sentryVitePlugin({
    release: {
        name: release,
        create: true,     // 自动创建 Release
        finalize: true,   // 自动标记为已部署
        setCommits: {
            auto: true,   // 自动关联 Git commits
        },
    },
});

name: Build and Deploy

on: [push]

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4
            - uses: actions/setup-node@v4
              with:
                  node-version: 22

            - run: npm install

            # 设置环境变量
            - name: Set Sentry Release
              run: echo "SENTRY_RELEASE=${{ github.sha }}" >> $GITHUB_ENV

            - run: npm run build
              env:
                  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
                  SENTRY_RELEASE: ${{ env.SENTRY_RELEASE }}

            - run: npm run deploy

sentryVitePlugin({
    urlPrefix: '~/static/js',  // 线上 JS 的路径前缀
});

Sentry.init({
    integrations: [
        Sentry.replayIntegration({
            maskAllText: true,       // 遮罩敏感文字
            maskAllInputs: true,     // 遮罩输入框
            blockAllMedia: true,     // 阻止媒体元素
        }),
    ],
    replaysSessionSampleRate: 0.1,   // 正常 Session：10%
    replaysOnErrorSampleRate: 1.0,   // 错误 Session：100%
});

Sentry.init({
    integrations: [
        Sentry.browserTracingIntegration(),
    ],
    tracesSampleRate: 0.1,
});

// Sentry 项目设置 → Alerts → Rules
// 示例：当一个 Release 的错误数超过阈值时报警
{
    conditions: [
        { type: 'error-count', value: 10 },  // 10 次报错
        { type: 'release', value: '1.0.0' },  // 特定 Release
    ],
    actions: [
        { type: 'slack', channel: '#alerts' },
    ],
}