이름이 SourceMapDevToolPlugin인 기본 제공 webpack 플러그인을 사용하여 소스 맵을 생성할 수 있습니다.

webpack.config.js 파일의 구성 예시 참조:

// ...
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      noSources: false,
      filename: '[file].map'
    }),
    // ...
  ],
  optimization: {
    minimize: true,
    // ...
  },
  // ...
};

참고: TypeScript를 사용하는 경우, tsconfig.json 파일에서 compilerOptions.sourceMap을 true로 설정하세요.

Parcel은 사용자가 빌드 명령 parcel build <entry file>을 실행할 때 기본적으로 소스 맵을 생성합니다.

vite.config.js 파일에서 build.sourcemap 옵션을 구성하여 소스 맵을 생성할 수 있습니다.

구성 예시 참조:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    sourcemap: true, // generates .js.map files
    minify: 'terser', // or 'esbuild'
  }
})

참고: TypeScript를 사용하는 경우, tsconfig.json 파일에서 compilerOptions.sourceMap을 true로 설정하세요.

Debug ID는 번들 URL, 서비스 또는 릴리스 버전에 의존하지 않고 JavaScript 번들을 해당 소스 맵에 연결합니다.

다음 업로드 방법 중 하나를 선택하세요.

Datadog 빌드 플러그인

Datadog 빌드 플러그인은 빌드 중에 Debug ID를 주입하고 소스 맵을 직접 업로드할 수 있습니다. datadog-ci를 별도로 설치하거나 실행할 필요가 없습니다.

Debug ID 지원을 위해서는 Datadog Build Plugin 버전 3.3.0 이상이 필요합니다.

빌드 플러그인에서 Debug ID 주입 및 소스 맵 업로드를 활성화하세요.

datadogWebpackPlugin({
  auth: {
    apiKey: process.env.DATADOG_API_KEY,
    site: 'datadoghq.com',
  },
  sourcemaps: {
    debugId: true,
    upload: true,
  },
});

플러그인은 해당 JavaScript 번들에 주입된 Debug ID와 함께 각 소스 맵을 업로드합니다.

이 예시는 webpack을 사용합니다. 다른 지원되는 번들러에 대한 설치 및 구성 지침은 Datadog 빌드 플러그인을 참조하세요.

datadog-ci

Debug ID 지원을 위해서는 @datadog/datadog-ci 버전 5.24.0 이상이 필요합니다.

1. package.json 파일에 @datadog/datadog-ci를 추가합니다(최신 버전을 사용 중이어야 함).

2. 전용 Datadog API 키를 만든 다음 이를 이름이 DD_API_KEY인 환경 변수 형식으로 내보냅니다.

3. US1이 아닌 다른 사이트의 경우, Datadog 사이트로 DD_SITE를 내보내어 CLI를 구성합니다.

4. 빌드 후 Debug ID를 주입합니다.

   datadog-ci sourcemaps inject /path/to/dist
   

5. 소스 맵 및 해당 JavaScript 번들을 업로드합니다.

   datadog-ci sourcemaps upload /path/to/dist --debug-id
   

--service, --release-version 또는 --minified-path-prefix을 --debug-id와 함께 전달하지 마세요.

inject 명령은 JavaScript 번들과 소스 맵을 제자리에서 수정합니다. 빌드 후, 그리고 SRI 해시, 압축된 자산, 서명 또는 체크섬 매니페스트와 같은 바이트 의존적 아티팩트를 생성하기 전에 실행하세요. 업로드한 것과 동일한 수정된 아티팩트를 배포하세요.

서비스 및 버전을 사용하여 소스 맵을 업로드하려면 CI 파이프라인에 datadog-ci sourcemaps upload 명령을 실행하는 단계를 추가하세요. 이렇게 하면 dist 디렉터리 및 하위 디렉터리를 스캔하여 소스 맵과 관련 축소된 파일을 자동으로 업로드합니다.

CLI는 CI의 성능 오버헤드를 최소화하기 위해 단기간에(일반적으로 몇 초) 필요한 최대 개수의 소스 맵을 업로드하도록 최적화되어 있습니다.

참고: 소스 맵을 다시 업로드하더라도 버전이 변경되지 않은 경우 기존의 것을 재정의하지 않습니다.

--service 및 --release-version 파라미터가 Error Tracking 이벤트, RUM 이벤트 및 브라우저 로그의 service 및 version 태그와 일치해야 합니다. 이러한 태그를 설정하는 방법에 대한 자세한 내용은 브라우저 SDK 초기화 설명서 또는 브라우저 로그 수집 설명서를 참조하세요.

예시 dist 디렉터리에 대하여 명령을 실행하면 Datadog은 사용자의 서버 또는 CDN이 https://hostname.com/static/js/javascript.364758.min.js 및 https://hostname.com/static/js/subdirectory/javascript.464388.min.js에서 JavaScript 파일을 전송할 것으로 예상합니다.

확장자가 .js.map인 소스 맵만 스택 트레이스의 축소를 해제하는 데 올바로 작동합니다. .mjs.map과 같이 다른 확장자가 붙은 소스 맵은 수락은 되지만 스택 트레이스의 축소를 해제하지 않습니다.