Obtén informes de fallas legibles en el panel de Crashlytics (Web)

Seleccionar plataforma: iOS+ Android Web Flutter Unity


Las apps web compilan, reducen y codifican los nombres internos en producción para optimizar la agrupación de redes. Sin mapas de origen, los informes de fallas en el panel de Crashlytics muestran seguimientos de pila reducidos y ofuscados.

Para desofuscar los seguimientos de pila y mostrar los nombres de archivo y los números de línea originales en tus informes de Error Reporting, usa el comando de la CLI de Firebase para subir tus mapas de origen (archivos .js.map) a Firebase.

Requisitos previos

Antes de subir mapas de origen, asegúrate de tener instalada la versión 15.35.0 o posterior de la CLI de Firebase. Obtén más información para instalar o actualizar la CLI de Firebase.

Paso 1: Habilita la generación de mapas de origen en la compilación de tu framework

Configura tu framework o agrupador de frontend para generar archivos de origen de producción (.js.map) durante el proceso de compilación de tu app:

Angular

En Angular, debes configurar la opción sourceMap dentro de tu archivo de espacio de trabajo angular.json o pasar la marca de anulación de la CLI --source-map:

Opción 1 (recomendada): Modifica angular.json

Abre tu archivo angular.json y busca la configuración de compilación específica a la que quieres orientar (como development o production). Establece el parámetro sourceMap en el bloque options o configurations exacto:

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

Opción 2: Anulación de la línea de comandos

Si solo necesitas mapas de origen para una compilación de verificación única o una sesión de depuración, agrega la marca --source-map directamente al comando de compilación de la CLI de Angular:

ng build --configuration production --source-map

Next.js

Actualiza tu archivo next.config.ts (o next.config.js) para habilitar la generación de mapas de origen del navegador durante las compilaciones de producción. Para ello, establece productionBrowserSourceMaps en 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 almacena los paquetes de cliente generados y los archivos .js.map de mapa de origen dentro del directorio .next en la raíz de tu proyecto.

React / Vite

Si tu app de React usa Vite como empaquetador de compilación, actualiza tu archivo vite.config.ts para que emita mapas de origen dentro de sus opciones de compilación:

// 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,
  },
});

De forma predeterminada, Vite almacena los paquetes de salida generados y los archivos .js.map dentro del directorio dist.

Paso 2: Sube mapas de origen con la CLI de Firebase

Después de que tu framework haya compilado tus paquetes de producción y generado los archivos .js.map, sube los mapas de origen con el comando firebase crashlytics:sourcemap:upload:

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

Este comando busca de forma recurrente todos los archivos .js.map dentro de la ruta de acceso DIRECTORY proporcionada (dist o .next) y los sube a Cloud Storage para la asignación de símbolos.

Paso 3: Controla los mapas de origen

Generar mapas de fuentes junto con los recursos de aplicación de tu app web puede exponerlos a solicitudes públicas del navegador, lo que podría provocar que se filtre tu código fuente original. Puedes evitar esto sin perder los seguimientos de pila desofuscados. Para ello, configura tu servidor web para que rechace el acceso público a los archivos .js.map o pasa la marca --clean a firebase crashlytics:sourcemap:upload para borrar automáticamente los archivos .js.map de tu directorio de compilación local después de subirlos a Firebase.

Automatiza en tu canalización de compilación

Para subir automáticamente mapas de origen a Crashlytics y borrar los archivos .js.map locales antes de la implementación, actualiza la secuencia de comandos build en el archivo package.json para pasar la marca --clean a 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"
}

Próximos pasos

  • Personaliza los informes de fallas: Obtén información para informar excepciones controladas, agregar claves personalizadas que acompañen tus seguimientos de pila desofuscados y configurar el muestreo.