react/vite/Sentry환경에서 Sourcemap 유출 방지하기

[whdmldus1116]

TypeScript+Vite+Sentry

---

vite.config.ts 파일에
export default defineConfig(~~~~~
const isProduction = process.env.BUILD_APP_TYPE === 'production';
return {~~~
plugins: [
react(),
isProduction &&
sentryVitePlugin({
org: 'slimdealz',
project: 'slimdealz',
authToken: process.env.VITE_SENTRY_AUTH_TOKEN, // 여기서 변경
sourcemaps: {
assets: './dist/',
filesToDeleteAfterUpload: '/*.map'
}
})
].filter(Boolean), // 플러그인 리스트에서 false 값을 제거
build: {
outDir: 'dist',
sourcemap: isProduction // 프로덕션 빌드에서만 sourcemap 생성
},
코드 추가

---

vite 인경우 기본 설정방법

npx @sentry/wizard@latest -i sourcemaps 으로 기본설정 완료후

vite-env.d.ts 파일 생성하여
interface ImportMentaEnv {
readonly VITE_SENTRY_AUTH_TOKEN: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
위의코드 생성.

index.tsx 파일에

Sentry.init({
dsn: import.meta.env.SENTRY_AUTH_TOKEN,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.browserProfilingIntegration(),
Sentry.replayIntegration()
],
// Tracing
tracesSampleRate: 1.0, // Capture 100% of the transactions
// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ['localhost', /^https://yourserver.io/api/],
// Set profilesSampleRate to 1.0 to profile every transaction.
// Since profilesSampleRate is relative to tracesSampleRate,
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
// results in 25% of transactions being profiled (0.5*0.5=0.25)
profilesSampleRate: 1.0,
// Session Replay
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});
코드 추가. 및
.env파일에 환경변수 설정 추가 및
BUILD_APP_TYPE=production vite build
추가하여 production분기

typescript인경우
tsconfig.json에
"compilerOptions": {

    "types": ["vite/client"],
  },
  코드 추가

[ej31]

마크다운 문법만 수정해서 다시 올립니다.

• 다른건 안건드렸어요 🤡 @whdmldus1116

---

TypeScript+Vite+Sentry

vite.config.ts 파일에

export default defineConfig(~~~~~
  const isProduction = process.env.BUILD_APP_TYPE === 'production';
  return {~~~ 
  plugins: [
      react(),
      isProduction &&
        sentryVitePlugin({
          org: 'slimdealz',
          project: 'slimdealz',
          authToken: process.env.VITE_SENTRY_AUTH_TOKEN, // 여기서 변경
          sourcemaps: {
            assets: './dist/**',
            filesToDeleteAfterUpload: '**/*.map'
          }
        })
    ].filter(Boolean), // 플러그인 리스트에서 false 값을 제거
    build: {
      outDir: 'dist',
      sourcemap: isProduction // 프로덕션 빌드에서만 sourcemap 생성
    },

코드 추가

---

vite 인경우 기본 설정방법

npx @sentry/wizard@latest -i sourcemaps         으로 기본설정 완료후 

vite-env.d.ts 파일 생성하여

interface ImportMentaEnv {
  readonly VITE_SENTRY_AUTH_TOKEN: string;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

위의코드 생성.

index.tsx 파일에

Sentry.init({
  dsn: import.meta.env.SENTRY_AUTH_TOKEN,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.browserProfilingIntegration(),
    Sentry.replayIntegration()
  ],
  // Tracing
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
  // Set profilesSampleRate to 1.0 to profile every transaction.
  // Since profilesSampleRate is relative to tracesSampleRate,
  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
  // results in 25% of transactions being profiled (0.5*0.5=0.25)
  profilesSampleRate: 1.0,
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

코드 추가. 및
.env파일에 환경변수 설정 추가 및

BUILD_APP_TYPE=production vite build 

추가하여 production분기

typescript인경우
tsconfig.json에

"compilerOptions": {
~~~~~~
    "types": ["vite/client"],
  },

코드 추가