Получайте понятные отчеты о сбоях на панели управления Crashlytics (веб-версия)

Выберите платформу: iOS+ Android Web Flutter Unity


Веб-приложения компилируют, минифицируют и шифруют кодовые названия в рабочей среде, чтобы оптимизировать сетевое пакетирование. Без файлов source map в отчетах о сбоях на панели управления Crashlytics будут показаны минифицированные и обфусцированные трассировки стека.

Чтобы деобфусцировать трассировки стека и показывать исходные названия файлов и номера строк в отчетах об ошибках, используйте команду CLI Firebase для загрузки карт источников (файлы .js.map) в Firebase.

Требования

Прежде чем загружать файлы source map, убедитесь, что у вас установлена версия Firebase CLI 15.35.0 или более поздняя. Узнайте, как установить или обновить Firebase CLI.

Шаг 1. Включите создание файлов source map в сборке фреймворка

Настройте фреймворк или сборщик внешнего интерфейса так, чтобы во время сборки приложения генерировались рабочие исходные файлы (.js.map).

Angular

В Angular необходимо настроить параметр sourceMap в файле рабочей области angular.json или передать флаг переопределения CLI --source-map:

Вариант 1 (рекомендуется). Измените angular.json

Откройте файл angular.json и найдите нужную конфигурацию сборки (например, development или production). Задайте параметр sourceMap в блоке options или configurations:

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

Вариант 2. Переопределение с помощью командной строки

Если файлы source map нужны вам только для однократной проверки сборки или отладки, добавьте флаг --source-map непосредственно в команду сборки Angular CLI:

ng build --configuration production --source-map

Next.js;

Обновите файл next.config.ts (или next.config.js), чтобы включить создание файлов source map для браузера во время сборки рабочей версии. Для этого задайте для параметра productionBrowserSourceMaps значение true:

// 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

После того как фреймворк создаст рабочие пакеты и сгенерирует файлы .js.map, загрузите файлы sourcemap с помощью команды firebase crashlytics:sourcemap:upload:

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

Эта команда рекурсивно ищет все файлы .js.map по указанному пути DIRECTORY (dist или .next) и загружает их в Cloud Storage для сопоставления символов.

Шаг 3. Обработайте файлы исходного кода

Если вы создаете карты исходного кода вместе с объектами веб-приложения, они могут стать доступны для общедоступных запросов браузера, что может привести к утечке исходного кода. Чтобы предотвратить это, не теряя деобфусцированные трассировки стека, вы можете либо настроить веб-сервер так, чтобы он запрещал публичный доступ к файлам .js.map, либо передать флаг --clean в firebase crashlytics:sourcemap:upload, чтобы автоматически удалять файлы .js.map из локального каталога сборки после их загрузки в Firebase.

Автоматизация в конвейере сборки

Чтобы автоматически загружать файлы исходных карт в Crashlytics и удалять локальные файлы .js.map перед развертыванием, обновите скрипт build в файле package.json, чтобы передать флаг --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"
}

Дальнейшие действия

  • Настройка отчетов о сбоях. Узнайте, как создавать отчеты об обработанных исключениях, добавлять специальные ключи к деобфусцированным трассировкам стека и настраивать выборку.