Ferramenta Analisador de Falhas

Use a ferramenta Analisador de falhas para analisar e diagnosticar rapidamente falhas do seu aplicativo Web em produção. Na ferramenta Analisador de falhas , você pode inserir um rastreamento de pilha JavaScript coletado na produção e, em seguida, ter seus mapas de origem aplicados para desminificar o rastreamento de pilha para que você possa depurar mais rapidamente. A ferramenta Analisador de Falhas permite que você use um rastreamento de pilha JavaScript minificado e trabalhe rapidamente para determinar quais linhas de código causaram o erro.

Quando um aplicativo Web falha ou trava inesperadamente, isso pode resultar em perda de dados e uma experiência ruim para os usuários. Coletar informações sobre as falhas que os usuários experimentam é útil para diagnosticar e corrigir a causa raiz das falhas. No entanto, o código que está sendo executado em produção geralmente é minificado, o que faz com que os rastreamentos de pilha JavaScript que são registrados em falhas também sejam minificados. A ferramenta Analisador de Falhas ajuda a mapear rastreamentos de pilha reduzidos coletados na produção de volta para o código-fonte original, para que você possa identificar rapidamente a causa raiz das falhas.

Aqui está um exemplo de um rastreamento de pilha minificado que você pode coletar do seu aplicativo Web em produção:

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Os nomes de variáveis e funções geralmente são abreviados, como a variável t acima. As URLs de script geralmente apontam para um arquivo de pacote de linha única criado, como o prod.bundle.js arquivo acima.

Em comparação, aqui está um exemplo de um rastreamento de pilha não minificado, com nomes de variável e função originais, e nomes de arquivo de origem e números de linha originais:

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

Há duas etapas para analisar rastreamentos de pilha de produção minificados na ferramenta Analisador de falhas :

1. Primeiro, você coleta rastreamentos de pilha especialmente formatados do seu aplicativo Web em produção.

   Há muitas maneiras de coletar rastreamentos de pilha dos navegadores que os usuários estão usando. A seção Coletar rastreamentos de pilha na produção, abaixo, fornece exemplos e recomendações. Ele também explica como formatar os rastreamentos de pilha para que eles possam ser analisados na ferramenta Analisador de falhas .

2. Em seguida, você analisa os rastreamentos de pilha na ferramenta Analisador de falhas .

   A seção Analisar rastreamentos de pilha na ferramenta Analisador de falhas, abaixo, explica como primeiro tornar os mapas de origem acessíveis no DevTools e, em seguida, como usar a ferramenta Analisador de falhas para analisar os rastreamentos de pilha.

Coletar rastreamentos de pilha na produção

A ferramenta Analisador de falhas não coleta rastreamentos de pilha para você. Primeiro, você deve coletar rastreamentos de pilha de seu aplicativo Web usando as ferramentas e os serviços disponíveis para você. Aqui estão algumas maneiras de coletar rastreamentos de pilha na produção:

• Recomendamos o uso de um sistema de telemetria, como o Application Insights do Azure Monitor, que pode capturar informações sobre erros não tratados do seu código JavaScript.

• Você também pode escrever código JavaScript para capturar erros não tratados em seu aplicativo Web. O exemplo a seguir mostra como usar o window.onerror manipulador de eventos para capturar erros não tratados em um aplicativo Web:

  window.onerror = function (message, source, line, column, error) {
    // Get the stack trace from the error object.
    const stackTrace = error.stack;
  
    // Send the stack trace to your telemetry system.
    // Code not shown.
  };
  

Formatar rastreamentos de pilha para a ferramenta Analisador de falhas

Coletar rastreamentos de pilha em produção não é suficiente. A ferramenta Analisador de falhas precisa de rastreamentos de pilha para incluir uma seção chamada Módulos de origem.

Aqui está um exemplo de um rastreamento de pilha que inclui a seção Módulos de origem :

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

A seção Módulos de origem inclui as URLs dos arquivos JavaScript envolvidos no rastreamento de pilha e um hash do conteúdo de cada arquivo. O hash é uma cadeia de caracteres hexadecimais de 64 caracteres que corresponde ao hash SHA-256 do script que está sendo executado. Esse é um hash byte por byte do conteúdo de cada arquivo JavaScript. As URLs e os hashes possibilitam que a ferramenta Analisador de Falhas recupere posteriormente os mapas de origem que foram usados para cancelar o mínimo do rastreamento de pilha.

Para adicionar a seção Módulos de origem aos rastreamentos de pilha de erros, use a biblioteca de Suporte do Analisador de Falhas do DevTools do Edge em seu aplicativo Web, da seguinte maneira:

1. Adicione a biblioteca de suporte ao Analisador de Falhas do DevTools do Edge em seu projeto usando o npm:

   npm install @microsoft/edge-devtools-crash-analyzer-support
   

2. Importe a biblioteca em seu código JavaScript e, em seguida, chame a installErrorStackModuleAnnotations função:

   import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';
   
   installErrorStackModuleAnnotations(Error);
   

Analisar rastreamentos de pilha na ferramenta Analisador de falhas

A ferramenta Analisador de Falhas no DevTools desativa os rastreamentos de pilha especialmente formatados que você coletou dos usuários em produção. Se os mapas de origem também contiverem o código-fonte original, a ferramenta Analisador de falhas mostrará os nomes de arquivo originais e os nomes de função que compõem o rastreamento de pilha.

Tornar os mapas de origem acessíveis no DevTools

A ferramenta Analisador de Falhas usa as informações do módulo de origem que estão no rastreamento de pilha para recuperar os mapas de origem que correspondem aos arquivos de script no rastreamento de pilha. Isso significa que primeiro você precisa tornar seus mapas de origem acessíveis no DevTools.

A ferramenta Analisador de falhas funcionará melhor se os mapas de origem forem armazenados com segurança usando o Servidor de Símbolos do Azure Artifacts. Isso ocorre porque o DevTools pode recuperar mapas de origem do Servidor de Símbolos de Artefatos do Azure sob demanda ao analisar seu erro. Confira Depurar com segurança o código original publicando mapas de origem no servidor de símbolos do Azure Artifacts.

Se você não estiver usando o Servidor de Símbolos de Artefatos do Azure, ainda poderá usar a ferramenta Analisador de falhas, verificando se os mapas de origem que correspondem ao rastreamento de pilha estão acessíveis ao DevTools. Por exemplo, se você carregou mapas de origem antes usando o comentário, o //# sourceMappingURL= DevTools armazena em cache os mapas de origem para reutilização posterior. Para saber mais, consulte Mapas de origem no DevTools em Mapear o código processado para o código-fonte original, para depuração.

O DevTools não armazena mapas de origem em cache quando o nome de domínio é localhost. Isso significa que, se você não estiver usando o Servidor de Símbolos de Artefatos do Azure, a ferramenta Analisador de Falhas só funcionará para rastreamentos de pilha coletados de ambientes de produção, não de ambientes de desenvolvimento locais que usam o localhost domínio.

Abrir a ferramenta Analisador de Falhas

A ferramenta de análise de falhas é uma ferramenta de Visualização Rápida; por padrão, ele é aberto no painel Visualização Rápida , para que você possa usá-lo junto com as outras ferramentas abertas na Barra de Atividades.

No menu Mais ferramentas

Para abrir a ferramenta Analisador de falhas usando o menu Mais ferramentas do DevTools:

1. No Microsoft Edge, selecione Configurações e mais () >Mais ferramentas>Abra as Ferramentas de desenvolvedor (Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS)). O DevTools é aberto.

2. No DevTools, pressione Esc para abrir a barra de ferramentas de Exibição Rápida na parte inferior (se ainda não estiver aberta). Na barra de ferramentas de Visualização rápida , clique no botão Mais ferramentas (") e selecione Analisador de falhas.

No menu de comando

Para abrir a ferramenta Analisador de Falhas usando o Menu de Comando:

1. No Microsoft Edge, selecione Configurações e mais () >Mais ferramentas>Abra as Ferramentas de desenvolvedor (Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS)). O DevTools é aberto.

2. No DevTools, clique no botão Personalizar e controlar o DevTools ( e selecione Executar comando. Ou, quando o DevTools estiver em foco, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). O Menu de Comando é aberto.

3. Comece a digitar analisador de falhas e selecione o comando Mostrar Analisador de Falhas [Visualização Rápida ]. A ferramenta Analisador de falhas é aberta no painel Visualização Rápida .

Inserir um rastreamento de pilha na ferramenta Analisador de falhas

Se você quiser testar a ferramenta Analisador de falhas , mas não tiver um rastreamento de pilha para analisar, siga estas etapas para coletar um rastreamento de pilha de exemplo:

1. No Microsoft Edge, abra a demonstração do Analisador de Falhas do DevTools em uma nova janela ou guia.

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, clique em Console (ícone do ). A ferramenta Console é aberta.

4. Selecione o rastreamento de pilha de erros exibido na ferramenta Console e copie-o.

Para usar a ferramenta Analisador de falhas no DevTools:

1. Abra a ferramenta Analisador de falhas do DevTools, conforme descrito em Abrir a ferramenta Analisador de falhas, acima.

2. Insira seu rastreamento de pilha especialmente formatado no painel esquerdo da ferramenta Analisador de falhas :

   

3. Na ferramenta Analisador de falhas , clique no botão Analisar () (ou pressione Ctrl+Enter).

   O painel direito mostra os nomes de arquivo originais e os nomes de função que compõem o rastreamento de pilha:

   

   Isso carrega os mapas de origem que correspondem aos módulos de origem e tenta desminificar todos os quadros de pilha para os quais o conteúdo de origem JavaScript ou TypeScript estava contido no mapa de origem.

4. Se o código-fonte estiver disponível em seus mapas de origem para um quadro, clique no quadro para exibir o código-fonte.

   O código-fonte original aparece na ferramenta Códigos-fonte e a linha em questão é realçada:

   

5. Para copiar o rastreamento de pilha não minificado, na barra de ferramentas da guia Analisador de falhas, clique no botão Copiar rastreamento de pilha não minificado ( Que produz e copia para a área de transferência o rastreamento de pilha completo e não minificado, como um rastreamento de pilha no formato de rastreamento de pilha convencional, exceto com informações que correspondem ao código original, incluindo nomes de função, nomes de arquivo de origem e números de linha e coluna:

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

Recursos da interface do usuário

A ferramenta Analisador de falhas tem os seguintes recursos de interface do usuário:

Item de interface do usuário	Descrição
Painel esquerdo	O rastreamento de pilha a ser analisado.
Painel direito	Exibe os nomes de arquivo originais e os nomes de função que compõem o rastreamento de pilha.
O botão Nova análise ()	Cria um novo painel esquerdo em branco para colar um novo rastreamento de pilha.
O botão Analisar ()	Cria uma nova análise no painel direito, com base no rastreamento de pilha no painel esquerdo.
A lista suspensa Análises ()	Mostra a lista de análises.
O botão Remover esta análise ()	Remove a análise atual.
O botão Copiar rastreamento de pilha sem minificação (	Produz e copia para a área de transferência o rastreamento de pilha completo e não minificado, como um rastreamento de pilha no formato de rastreamento de pilha convencional, exceto com informações que correspondem ao código original, incluindo nomes de função, nomes de arquivo de origem e números de linha e coluna.
O botão Abrir configurações do servidor de símbolos ()	Exiba ou modifique as configurações do Servidor de Símbolos de Artefatos do Azure.
O botão Como usar ()	Abre o presente artigo.

Fornecer comentários

Deixe comentários no repositório de comentários do MicrosoftEdge / DevTools e informe-nos o que funciona bem, o que não funciona e o que você gostaria para esses recursos.

Consulte também

• Depurar com segurança o código original publicando mapas de origem para o servidor de símbolos do Azure Artifacts
• Mapas de origem no DevTools em Mapeie o código processado para o código-fonte original, para depuração.

Ligações externas:

• Demonstração do Analisador de Falhas do DevTools
• MicrosoftEdge / DevTools - repositório de comentários.
• Application Insights do Azure Monitor nos documentos do Azure Monitor.
• Suporte ao Analisador de Falhas do DevTools do Edge - pacote npm.