Crashlytics 대시보드에서 읽을 수 있는 비정상 종료 보고서 받기 (웹)

플랫폼 선택: iOS+ Android 웹 Flutter Unity


웹 앱은 프로덕션에서 코드 이름을 컴파일, 축소, 스크램블하여 네트워크 번들링을 최적화합니다. 소스 맵이 없으면 Crashlytics 대시보드의 비정상 종료 보고서에 축소되고 난독화된 스택 트레이스가 표시됩니다.

스택 트레이스의 난독화를 해제하고 Error Reporting에 원본 파일 이름과 줄 번호를 표시하려면 Firebase CLI 명령어를 사용하여 소스 맵(.js.map 파일)을 Firebase에 업로드합니다.

기본 요건

소스 지도를 업로드하기 전에 Firebase CLI v15.35.0 이상이 설치되어 있는지 확인합니다. Firebase CLI를 설치하거나 업데이트하는 방법을 알아보세요.

1단계: 프레임워크 빌드에서 소스 지도 생성 사용 설정

앱 빌드 프로세스 중에 프로덕션 소스(.js.map) 파일을 생성하도록 프런트엔드 프레임워크 또는 번들러를 구성합니다.

Angular

Angular에서는 angular.json 작업공간 파일 내에서 sourceMap 옵션을 구성하거나 --source-map CLI 재정의 플래그를 전달해야 합니다.

옵션 1(권장): angular.json 수정

angular.json 파일을 열고 타겟팅할 특정 빌드 구성(예: development 또는 production)을 찾습니다. 정확한 options 또는 configurations 블록 아래에 sourceMap 매개변수를 설정합니다.

"projects": {
  "APP_NAME": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": true
        },
        "configurations": {
          "production": {
            "sourceMap": {
              "scripts": true,
              "vendor": false
            }
          }
        }
      }
    }
  }
}

옵션 2: 명령줄 재정의

일회성 인증 빌드 또는 디버깅 세션에 소스 맵만 필요한 경우 --source-map 플래그를 Angular CLI 빌드 명령어에 직접 추가합니다.

ng build --configuration production --source-map

Next.js

productionBrowserSourceMaps를 true로 설정하여 프로덕션 빌드 중에 브라우저 소스 맵 생성을 사용 설정하도록 next.config.ts(또는 next.config.js) 파일을 업데이트합니다.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable browser source map emission for Crashlytics stack trace de-obfuscation
  productionBrowserSourceMaps: true,
  // ... rest of your Next.js configuration
};

export default nextConfig;

Next.js는 생성된 클라이언트 번들과 소스 맵 .js.map 파일을 프로젝트 루트의 .next 디렉터리 내에 저장합니다.

React / Vite

React 앱에서 Vite를 빌드 번들러로 사용하는 경우 빌드 옵션 내에서 소스 맵을 내보내도록 vite.config.ts 파일을 업데이트합니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // Emit sourcemap files for Crashlytics upload
    sourcemap: true,
  },
});

Vite는 기본적으로 생성된 출력 번들과 .js.map 파일을 dist 디렉터리 내에 저장합니다.

2단계: Firebase CLI를 사용하여 소스 지도 업로드

프레임워크에서 프로덕션 번들을 빌드하고 .js.map 파일을 생성한 후 firebase crashlytics:sourcemap:upload 명령어를 사용하여 소스 맵을 업로드합니다.

firebase crashlytics:sourcemap:upload \
  --project PROJECT_ID \
  --app FIREBASE_APP_ID \
  --debug DIRECTORY

이 명령어는 제공된 DIRECTORY 경로(dist 또는 .next) 내에서 모든 .js.map 파일을 재귀적으로 검색하고 기호 매핑을 위해 Cloud Storage에 업로드합니다.

3단계: 소스 지도 처리

웹 앱 애셋과 함께 소스 맵을 생성하면 공개 브라우저 요청에 노출되어 원본 소스 코드가 유출될 수 있습니다. 웹 서버에서 .js.map 파일에 대한 공개 액세스를 거부하도록 구성하거나 --clean 플래그를 firebase crashlytics:sourcemap:upload에 전달하여 Firebase에 업로드한 후 로컬 빌드 디렉터리에서 .js.map 파일을 자동으로 삭제하면 난독화 해제된 스택 트레이스를 유지하면서 이 문제를 방지할 수 있습니다.

빌드 파이프라인에서 자동화

소스 맵을 Crashlytics에 자동으로 업로드하고 배포 전에 로컬 .js.map 파일을 삭제하려면 package.json 파일의 build 스크립트를 업데이트하여 --clean 플래그를 firebase crashlytics:sourcemap:upload에 전달합니다.

Angular

"scripts": {
  "build": "ng build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Next.js

"scripts": {
  "build": "next build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug .next"
}

React / Vite

"scripts": {
  "build": "vite build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

다음 단계

  • 비정상 종료 보고서 맞춤설정 - 처리된 예외를 보고하고, 난독화 해제된 스택 트레이스와 함께 커스텀 키를 추가하고, 샘플링을 구성하는 방법을 알아봅니다.