Receber relatórios de erros legíveis no painel do Crashlytics (Web)

Selecionar plataforma: iOS+ Android Web Flutter Unity


Os apps da Web compilam, minificam e embaralham codinomes na produção para otimizar o agrupamento de rede. Sem os mapas de origem, os relatórios de erros no painel do Crashlytics mostram stack traces minificados e ofuscados.

Para desofuscar os stack traces e exibir os nomes de arquivos e números de linha originais nos relatórios do Error Reporting, use o comando da CLI Firebase para fazer upload dos mapas de origem (arquivos .js.map) para o Firebase.

Pré-requisitos

Antes de fazer upload de mapas de origem, verifique se você tem a CLI do Firebase v15.35.0 ou mais recente instalada. Saiba como instalar ou atualizar a CLI Firebase.

Etapa 1: ativar a geração de mapas de origem no build do framework

Configure o framework de front-end ou o bundler para gerar arquivos de origem de produção (.js.map) durante o processo de build do app:

Angular

No Angular, é preciso configurar a opção sourceMap no arquivo do espaço de trabalho angular.json ou transmitir a flag de substituição da CLI --source-map:

Opção 1 (recomendada): modificar angular.json

Abra o arquivo angular.json e localize a configuração do build específica que você quer segmentar (como development ou production). Defina o parâmetro sourceMap no bloco options ou configurations exato:

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

Opção 2: substituição da linha de comando

Se você só precisa de mapas de origem para uma sessão de depuração ou um build de verificação único, adicione a flag --source-map diretamente ao comando de build da CLI do Angular:

ng build --configuration production --source-map

Next.js

Atualize o arquivo next.config.ts (ou next.config.js) para ativar a geração de mapas de origem do navegador durante os builds de produção, definindo productionBrowserSourceMaps como 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;

O Next.js armazena pacotes de cliente gerados e arquivos .js.map de mapa de origem no diretório .next na raiz do projeto.

React / Vite

Se o app React usa o Vite como bundler de build, atualize o arquivo vite.config.ts para emitir mapas de origem nas opções de build:

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

O Vite armazena pacotes de saída gerados e arquivos .js.map dentro do diretório dist por padrão.

Etapa 2: fazer upload de mapas de origem usando a CLI Firebase

Depois que o framework criar os pacotes de produção e gerar arquivos .js.map, faça upload dos mapas de origem usando o comando firebase crashlytics:sourcemap:upload:

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

Esse comando pesquisa recursivamente todos os arquivos .js.map no caminho DIRECTORY fornecido (dist ou .next) e faz o upload deles para o Cloud Storage para mapeamento de símbolos.

Etapa 3: processar mapas de origem

Gerar mapas de origem junto com os recursos do seu app da Web pode expô-los a solicitações públicas do navegador, o que pode causar o vazamento do código-fonte original. Para evitar isso sem perder os stack traces desofuscados, configure seu servidor da Web para negar o acesso público aos arquivos .js.map ou transmita a flag --clean para firebase crashlytics:sourcemap:upload para excluir automaticamente os arquivos .js.map do diretório de build local depois de fazer upload deles para o Firebase.

Automatizar no pipeline de build

Para fazer upload automático de mapas de origem para o Crashlytics e excluir os arquivos .js.map locais antes da implantação, atualize o script build no arquivo package.json para transmitir a flag --clean para 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óximas etapas

  • Personalizar relatórios de erros: saiba como informar exceções processadas, adicionar chaves personalizadas para acompanhar os stack traces desofuscados e configurar a amostragem.