Compartilhar via

Ferramenta de analisador de falhas

  • Artigo

Utilize a ferramenta Analisador de falhas para analisar e diagnosticar rapidamente falhas da sua aplicação Web em produção. Na ferramenta Analisador de falhas , pode introduzir um rastreio de pilha javaScript que recolheu na produção e, em seguida, aplicar os mapas de origem para desminificar o rastreio da pilha para que possa depurar mais rapidamente. A ferramenta Analisador de falhas permite-lhe fazer um rastreio de pilha JavaScript minificado e trabalhar rapidamente para trás para determinar que linhas de código causaram o erro.

A ferramenta Analisador de falhas

Quando uma aplicação Web falha ou bloqueia inesperadamente, tal pode resultar na perda de dados e numa má experiência para os seus utilizadores. Recolher informações sobre as falhas que os utilizadores experimentam é útil para diagnosticar e corrigir a causa das falhas. No entanto, o código em execução na produção é, muitas vezes, minificado, o que faz com que os rastreios de pilha javaScript que estão registados em falhas também sejam minimizados. A ferramenta Analisador de falhas ajuda-o a mapear rastreios de pilha minificados recolhidos na produção para o código fonte original, para que possa identificar rapidamente a causa das falhas.

Eis um exemplo de um rastreio de pilha minimizado que pode recolher da sua aplicação 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 das variáveis e das funções são frequentemente abreviados, como a variável t acima. Os URLs de script apontam frequentemente para um ficheiro de pacote de linha única criado, como o prod.bundle.js ficheiro acima.

Em comparação, eis um exemplo de um rastreio de pilha não filtrado, com nomes de funções e variáveis originais, nomes de ficheiros de origem originais e números de linha:

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

Existem dois passos para analisar rastreios de pilha de produção minificados na ferramenta Analisador de falhas :

  1. Em primeiro lugar, recolhe rastreios de pilha especialmente formatados da sua aplicação Web em produção.

    Existem várias formas de recolher rastreios de pilha dos browsers que os seus utilizadores estão a utilizar. A secção Recolher rastreios de pilha na produção, abaixo, fornece exemplos e recomendações. Também explica como formatar os rastreios de pilha para que possam ser analisados na ferramenta Analisador de falhas.

  2. Em seguida, vai analisar os rastreios de pilha na ferramenta Analisador de falhas .

    A secção Analisar rastreios de pilha na ferramenta Analisador de falhas, abaixo, explica como tornar os mapas de origem acessíveis em DevTools e, em seguida, como utilizar a ferramenta Analisador de falhas para analisar os rastreios de pilha.

Recolher rastreios de pilha na produção

A ferramenta Analisador de falhas não recolhe rastreios de pilha automaticamente. Primeiro, tem de recolher rastreios de pilha da sua aplicação Web através das ferramentas e serviços que estão disponíveis para si. Seguem-se algumas formas de recolher rastreios de pilha na produção:

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

  • Também pode escrever código JavaScript para capturar erros não processados na sua aplicação Web. O exemplo seguinte mostra como utilizar o window.onerror processador de eventos para capturar erros não processados numa aplicação 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 os rastreios de pilha para a ferramenta Analisador de falhas

A recolha de rastreios de pilha na produção não é suficiente. A ferramenta Analisador de falhas precisa de rastreios de pilha para incluir uma secção denominada Módulos de origem.

Eis um exemplo de um rastreio de pilha que inclui a secçã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 secção Módulos de origem inclui os URLs dos ficheiros JavaScript que estão envolvidos no rastreio de pilha e um hash do conteúdo de cada ficheiro. O hash é uma cadeia de 64 carateres hexadecimais que corresponde ao hash SHA-256 do script que está a ser executado. Este é um hash byte-for-byte do conteúdo para cada ficheiro JavaScript. Os URLs e os hashes permitem que a ferramenta Analisador de falhas obtenha mais tarde os mapas de origem que foram utilizados para desminificar o rastreio da pilha.

Para adicionar a secção Módulos de origem aos rastreios da pilha de erros, utilize a biblioteca de Suporte do Analisador de Falhas de DevTools do Edge na sua aplicação Web, da seguinte forma:

  1. Adicione a biblioteca de Suporte do Analisador de Falhas de DevTools do Edge no seu projeto com o npm:

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

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

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

installErrorStackModuleAnnotations(Error);

Analisar rastreios de pilha na ferramenta Analisador de falhas

A ferramenta Analisador de falhas em DevTools desminifica os rastreios de pilha especialmente formatados que recolheu dos utilizadores em produção. Se os mapas de origem também contiverem o código fonte original, a ferramenta Analisador de falhas irá mostrar-lhe os nomes de ficheiros originais e os nomes das funções que compõem o rastreio da pilha.

Tornar os mapas de origem acessíveis no DevTools

A ferramenta Analisador de falhas utiliza as informações do módulo de Origem que estão no rastreio de pilha para obter os mapas de origem que correspondem aos ficheiros de script no rastreio de pilha. Isto significa que primeiro tem de tornar os mapas de origem acessíveis nas DevTools.

A ferramenta Analisador de falhas funciona melhor se os mapas de origem forem armazenados de forma segura com o Servidor de Símbolos dos Artefactos do Azure. Isto acontece porque as DevTools podem obter mapas de origem do Servidor de Símbolos dos Artefactos do Azure a pedido ao analisar o erro. Veja Depurar código original de forma segura ao publicar mapas de origem no servidor de símbolos dos Artefactos do Azure.

Se não estiver a utilizar o Servidor de Símbolos dos Artefactos do Azure, pode continuar a utilizar a ferramenta Analisador de falhas ao certificar-se de que os mapas de origem que correspondem ao rastreio da pilha estão acessíveis às DevTools. Por exemplo, se já carregou mapas de origem antes com o comentário, o //# sourceMappingURL= DevTools coloca os mapas de origem em cache para reutilização posterior. Para saber mais, veja Mapas de origem em DevTools em Mapear o código processado para o código fonte original, para depuração.

O DevTools não coloca em cache os mapas de origem quando o nome de domínio é localhost. Isto significa que, se não estiver a utilizar o Servidor de Símbolos dos Artefactos do Azure, a ferramenta Analisador de falhas só funcionará para rastreios de pilha recolhidos a partir de ambientes de produção e não de ambientes de desenvolvimento locais que utilizam o localhost domínio.

Abrir a ferramenta Analisador de falhas

A ferramenta Analisador de falhas é uma ferramenta de Vista Rápida; por predefinição, é aberto no painel Vista Rápida , para que possa utilizá-lo juntamente com as outras ferramentas que estão abertas na Barra de atividade.

No menu Mais ferramentas

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

  1. No Microsoft Edge, selecione Definições e muito mais (ícone ) Mais ferramentasAbrir >Ferramentas> de programação (Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS)). O DevTools é aberto.

  2. Em DevTools, prima Esc para abrir a barra de ferramentas Vista Rápida na parte inferior (se ainda não estiver aberta). Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas (o ícone ) e, em seguida, selecione Analisador de falhas.

No Menu de Comandos

Para abrir a ferramenta Analisador de falhas utilizando o Menu de Comandos:

  1. No Microsoft Edge, selecione Definições e muito mais (ícone ) Mais ferramentasAbrir >Ferramentas> de programação (Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS)). O DevTools é aberto.

  2. Em DevTools, clique no botão Personalizar e controlar DevTools (o botão ) e, em seguida, selecione Executar comando. Em alternativa, quando o DevTools tiver foco, prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS). O Menu de Comandos é aberto.

  3. Comece a escrever analisador de falhas e, em seguida, selecione o comando Mostrar Analisador de Falhas [Vista Rápida ]. A ferramenta Analisador de falhas é aberta no painel Vista Rápida .

Introduza um rastreio de pilha na ferramenta Analisador de falhas

Se quiser testar a ferramenta Analisador de falhas, mas não tiver um rastreio de pilha para analisar, siga estes passos para recolher um rastreio de pilha de exemplo:

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

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

  3. Em DevTools, na Barra de atividade, clique em Consola (ícone da Consola). A ferramenta Consola é aberta.

  4. Selecione o rastreio da pilha de erros apresentado na ferramenta Consola e copie-o.

Para utilizar a ferramenta Analisador de falhas em DevTools:

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

  2. Introduza o seu rastreio de pilha especialmente formatado no painel esquerdo da ferramenta Analisador de falhas:

    A ferramenta Analisador de falhas, com a pilha de chamadas melhorada colada no painel esquerdo

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

    O painel da direita mostra os nomes de ficheiro originais e os nomes das funções que compõem o rastreio da pilha:

    Utilizar a ferramenta Analisador de falhas para depurar uma exceção javaScript não fatal

    Esta ação carrega os mapas de origem que correspondem aos módulos de origem e tenta desminificar quaisquer frames 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 nos mapas de origem de uma moldura, clique na moldura para apresentar o código fonte.

    O código fonte original aparece na ferramenta Origens e a linha em questão está realçada:

    Ficheiro de código não identificado e linha de código acedida ao clicar no painel direito do separador Analisador de falhas

  5. Para copiar o rastreio de pilha não administrativo, na barra de ferramentas do separador Analisador de falhas, clique no botão Copiar rastreio de pilha não administrativa (o ícone Copiar rastreio de pilha não administrativo). Isto produz e copia para a área de transferência o rastreio de pilha completo e não administrativo, como um rastreio de pilha no formato de rastreio de pilha convencional, exceto com informações que correspondem ao seu código original, incluindo nomes de funções, nomes de ficheiros de origem e números de linhas e colunas:

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)

Funcionalidades da IU

A ferramenta Analisador de falhas tem as seguintes funcionalidades de IU:

Item de IU Descrição
Painel esquerdo O rastreio de pilha a analisar.
Painel direito Apresenta os nomes de ficheiro e os nomes de funções originais que compõem o rastreio de pilha.
O botão Nova análise (o ícone ") Cria um novo painel esquerdo em branco para colar um novo rastreio de pilha.
O botão Analisar (o ícone ") Cria uma nova análise no painel da direita, com base no rastreio de pilha no painel esquerdo.
Lista pendente Análises (a lista pendente ") Mostra a lista de análises.
O botão Remover esta análise (o botão ) Remove a análise atual.
O botão Copiar rastreio de pilha não administrativo (o botão Copiar rastreio de pilha não administrativo) Produz e copia para a área de transferência o rastreio de pilha completo e não administrativo, como um rastreio de pilha no formato de rastreio de pilha convencional, exceto com informações que correspondem ao seu código original, incluindo nomes de funções, nomes de ficheiros de origem e números de linhas e colunas.
O botão Abrir Servidor de Símbolos (o botão ) Apresentar ou modificar as definições do Servidor de Símbolos dos Artefactos do Azure.
O botão Como utilizar (o ícone ) Abre o artigo atual.

Fornecer comentários

Deixe comentários no repositório de comentários MicrosoftEdge/DevTools e informe-nos sobre o que funciona bem, o que não funciona e o que gostaria de ter para essas funcionalidades.

Consulte também

Ligações externas: