Personalizar relatórios de erros para Web

Selecionar plataforma: iOS+ Android Web Flutter Unity


No console do Firebase (DevOps e engajamento > painel do Crashlytics), clique em um problema e acesse um relatório de eventos detalhado. É possível personalizar esses relatórios e gerenciar sua coleta de telemetria para entender melhor o que está acontecendo no seu app da Web:

Informar exceções tratadas de forma programática

É possível registrar exceções processadas manualmente usando recordError. Os erros de roteamento e as exceções não capturadas são capturados automaticamente pelos limites de erro do framework.

Veja como acompanhar a prevalência de falhas e os atributos de diagnóstico dos usuários:

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase';

const crashlytics = getCrashlytics(app);

async function submitPaymentForm() {
  try {
    await api.processTransaction();
  } catch (error) {
    // Manually record handled exceptions with diagnostic context
    recordError(crashlytics, error, {
      userTier: 'Premium Gold',
      checkoutStage: 'BillingAddressVerification',
      transactionCode: 'tx_8412_err',
      retryAttempts: 2
    });
    showFallbackBanner(error);
  }
}

Adicionar chaves personalizadas

As chaves de metadados personalizadas ajudam você a entender o estado específico do app ou o fluxo de trabalho do usuário que está causando uma falha.

É possível registrar atividades do usuário, estados de sessão e detalhes de diagnóstico diretamente como atributos personalizados de chave-valor usando o parâmetro de metadados opcional ao chamar recordError:

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

const crashlytics = getCrashlytics(app);

// Pass custom key-value diagnostic metadata within recordError
recordError(crashlytics, error, {
  userTier: 'Premium Gold',
  checkoutStage: 'BillingAddressVerification',
  transactionCode: 'tx_8412_err',
  retryAttempts: 2,
  breadcrumb: 'User opened shopping cart',
  lastAction: 'Click Checkout Button'
});

Esses atributos personalizados são mantidos no relatório de exceções e aparecem na guia Chaves na visualização de problemas do painel do Crashlytics.

Forçar a limpeza de registros de telemetria

Por padrão, o mecanismo de telemetria da Web agrupa os registros em segmentos de memória para preservar a duração da bateria, o desempenho da CPU e a largura de banda da rede. No entanto, para ambientes de execução de curta duração, os registros precisam ser enviados imediatamente antes que o contexto de execução seja destruído.

Use o comando assíncrono flush para enviar imediatamente todos os erros na fila para o back-end:

import { recordError, flush, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase';

const crashlytics = getCrashlytics(app);

async function handleApplicationCrash(error: Error) {
  // Capture the error with immediate priority
  recordError(crashlytics, error, { priority: 'IMMEDIATE' });

  // Force an immediate upload before the process terminates or reloads
  await flush(crashlytics);

  // Safe to terminate or refresh the current execution context
  window.location.reload();
}

Configurar a taxa de amostragem

Se você amostrar uma proporção das sessões do usuário para controlar o volume e o custo da telemetria, poderá configurar a amostragem usando qualquer uma das seguintes opções:

Opção 1 (recomendada): configurar a taxa de amostragem no console do Firebase

  1. No console do Firebase, acesse o painel DevOps e engajamento > Crashlytics.

  2. Selecione seu app da Web no seletor suspenso na parte de cima da página.

  3. Clique em Configurar amostragem no canto superior direito do painel.

  4. Defina a porcentagem da Taxa de amostragem (entre 0% e 100%) para controlar a porcentagem de eventos e sessões coletados dos clientes.

Opção 2: definir a taxa de amostragem usando a API Admin do Firebase Telemetry

Use a API Admin do Firebase Telemetry (firebasetelemetryadmin.googleapis.com/v1alpha) para gerenciar as configurações de coleta de telemetria dos seus apps do Firebase.

  1. Configure as seguintes variáveis obrigatórias no terminal:

    PROJECT_ID="PROJECT_ID"
    LOCATION="LOCATION"  # for example, global
    APP_ID="FIREBASE_APP_ID"  # for example, 1:1234567890:web:abcdef123456
    TOKEN=$(gcloud auth application-default print-access-token)
    
  2. Encontre seu CONFIG_NAME e configure-o como uma variável no terminal:

    As configurações de telemetria são gerenciadas usando um recurso Config. Portanto, é necessário encontrar o CONFIG_NAME específico para seu app da Web.

    1. Liste as configurações no projeto e filtre por FIREBASE_APP_ID. As flags curl -G e --data-urlencode garantem que a string de filtro AIP-160 seja codificada corretamente em URL:

      curl -G \
        -H "Authorization: Bearer $TOKEN" \
        --data-urlencode "filter=app_id=\"${APP_ID}\"" \
        "https://firebasetelemetryadmin.googleapis.com/v1alpha/projects/${PROJECT_ID}/locations/${LOCATION}/configs"
      
    2. Na resposta JSON, localize o campo name do seu app (projects/PROJECT_ID/locations/LOCATION/configs/<CONFIG_ID>) e defina-o como a variável CONFIG_NAME:

      CONFIG_NAME="CONFIG_NAME"
      
  3. Defina a taxa de amostragem:

    Para ajustar a taxa de amostragem, use o método PATCH para atualizar o campo sampling_rate. É preciso especificar updateMask=sampling_rate nos parâmetros de consulta. A taxa de amostragem é um valor duplo que representa a porcentagem de sessões a serem coletadas (por exemplo, 0.25 para 25%):

    # Example: Set sampling rate to 25%
    curl -X PATCH \
      -H "Authorization: Bearer $TOKEN" \
      -H "Content-Type: application/json" \
      -d "{
        \"sampling_rate\": 0.25,
        \"app_id\": \"${APP_ID}\"
      }" \
      "https://firebasetelemetryadmin.googleapis.com/v1alpha/${CONFIG_NAME}?updateMask=sampling_rate"
    

Desativar ou ativar a coleta de telemetria

Por padrão, a coleta de telemetria é ativada quando você configura o Crashlytics para seu app da Web. Se você precisar desativar ou reativar a coleta de telemetria dinamicamente após instalar o SDK do Crashlytics, gerencie os endpoints de coleta usando a API Firebase Telemetry Admin (firebasetelemetryadmin.googleapis.com/v1alpha).

Antes de desativar ou ativar a telemetria, é preciso definir as seguintes variáveis:

  1. Configure as seguintes variáveis obrigatórias no terminal:

    PROJECT_ID="PROJECT_ID"
    LOCATION="LOCATION"  # for example, global
    APP_ID="FIREBASE_APP_ID"  # for example, 1:1234567890:web:abcdef123456
    TOKEN=$(gcloud auth application-default print-access-token)
    
  2. Encontre seu CONFIG_NAME e configure-o como uma variável no terminal:

    As configurações de telemetria são gerenciadas usando um recurso Config. Portanto, é necessário encontrar o CONFIG_NAME específico para seu app da Web.

    1. Liste as configurações no projeto e filtre por FIREBASE_APP_ID. As flags curl -G e --data-urlencode garantem que a string de filtro AIP-160 seja codificada corretamente em URL:

      curl -G \
        -H "Authorization: Bearer $TOKEN" \
        --data-urlencode "filter=app_id=\"${APP_ID}\"" \
        "https://firebasetelemetryadmin.googleapis.com/v1alpha/projects/${PROJECT_ID}/locations/${LOCATION}/configs"
      
    2. Na resposta JSON, localize o campo name do seu app (projects/PROJECT_ID/locations/LOCATION/configs/<CONFIG_ID>) e defina-o como a variável CONFIG_NAME:

      CONFIG_NAME="CONFIG_NAME"
      

Desativar a coleta de telemetria

Use o método personalizado :disable para desativar a coleta de telemetria:

curl -X POST \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{}' \
  "https://firebasetelemetryadmin.googleapis.com/v1alpha/${CONFIG_NAME}:disable"

Reativar a coleta de telemetria

Para reativar a coleta de telemetria, chame o método :enable:

curl -X POST \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{}' \
  "https://firebasetelemetryadmin.googleapis.com/v1alpha/${CONFIG_NAME}:enable"