Application Real-Time Monitoring Service:Diagnose JS errors using ARMS Browser Monitoring

Etapa 1: Visualizar a visão geral de erros

1. Faça logon no console do ARMS.

2. No painel de navegação à esquerda, escolha Browser Monitoring > Browser Monitoring.

3. Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em no nome da aplicação que deseja gerenciar.

4. No painel de navegação à esquerda, clique em JS Error Diagnosis.

Nesta página:

• A seção Error Overview exibe o número total de erros, a taxa de erros de JS, além da quantidade e porcentagem de usuários afetados.

• O gráfico de curva apresenta as tendências de erros ao longo do tempo.

• A aba Frequent Errors lista os erros de alta frequência.

• As abas Page Ranked by Error Rate e Error View mostram a distribuição de erros entre as páginas.

Etapa 2: Analisar um erro específico

Há dois pontos de entrada disponíveis:

• Na aba Frequent Errors, clique em Diagnose ao lado do erro alvo.

• No gráfico de curva, clique em um ponto de dados em um horário específico para abrir a caixa de diálogo Exception Insight.

O exemplo a seguir utiliza a abordagem do gráfico de curva:

1. No gráfico de curva, identifique um ponto onde a taxa de erros tenha um pico. Passe o mouse sobre o ponto de inflexão até que o cursor mude para um ícone de mão e clique em nele. A caixa de diálogo Exception Insight será exibida. Para mais informações, consulte Visualizar exception insight.

   

2. Clique em na aba Frequent Errors Top 5, selecione um erro e clique em Diagnose na coluna Operation. A aba Error Detail será exibida.

Etapa 3: Revisar detalhes do erro

A página de detalhes do erro fornece o seguinte contexto:

Exemplo: A captura de tela a seguir mostra um erro proveniente de um módulo de mapa em um painel em tempo real. O módulo relatou dados inválidos durante uma atualização, e o stack trace aponta para a Linha 1, Coluna 79585 no bundle minificado.

"Linha 1, Coluna 79585" não é uma informação acionável porque o código de produção está minificado. A próxima etapa mapeia essa posição de volta para o seu código-fonte.

Etapa 4: Mapear o erro para o código-fonte

Os números de linha e coluna no stack trace referem-se ao código minificado, não aos seus arquivos de origem. Aplique um source map para resolver a localização original do erro.

1. Na seção Stack Info, clique em no ícone à esquerda de um frame da pilha para expandi-lo e clique em Choose Sourcemap.

2. Na caixa de diálogo Sourcemap File, selecione um arquivo de source map existente ou faça upload de um novo e clique em OK.

   Nota

   É possível fazer upload de até cinco arquivos por vez.

   

3. Após aplicar o source map, o Browser Monitoring destaca a localização original do erro em vermelho na seção Source Code, mostrando o arquivo e a linha exatos onde o erro ocorreu. Aplique source maps em cada frame da pilha de erros para rastrear toda a cadeia de chamadas.

   Figura 1. Mapeamento de Source Map

Etapa 5: Reproduzir o erro com rastreamento de comportamento do usuário

O mapeamento via source map revela onde o erro ocorreu, mas nem sempre por quê. No exemplo do módulo de mapa, o mapeamento do código-fonte mostra que dados inválidos causaram o erro durante a criação do componente. No entanto, o código-fonte já inclui verificações de nulo e tolerância a falhas para esses dados. Para entender por que os dados inválidos apareceram, revise o que aconteceu imediatamente antes do erro.

O Browser Monitoring registra o comportamento do usuário como um rastro cronológico de nós de eventos:

• Carregamento de página

• Alterações de rota

• Cliques na página

• Requisições de API

• Saída do console

Revise esse rastro para reproduzir a sequência de ações que levou ao erro.

Exemplo: O rastro de comportamento do usuário a seguir mostra que uma requisição de API ocorreu pouco antes do erro. A chamada de API solicitou uma atualização em tempo real para o módulo de mapa, mas a resposta retornou ConsoleNeedLogin em vez de dados válidos do mapa. Isso indica que o usuário havia feito logoff da página — a causa raiz dos dados inválidos.

Webpack

Em webpack.config.js, defina a propriedade devtool como "source-map". O Webpack suporta 13 valores de devtool para diferentes tipos de source maps. "source-map" gera um arquivo .map completo e separado, recomendado para diagnóstico de erros em produção.

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: "source-map"
};

Gulp

Utilize o pacote gulp-sourcemaps:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
    gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.write('../sourcemaps'))
        .pipe(gulp.dest('dist'));
});

Grunt

Apenas com grunt-contrib-uglify:

grunt.initConfig({
    uglify: {
        options: {
            sourceMap: true
        }
    }
});

Com grunt-usemin (que chama grunt-contrib-concat e grunt-contrib-uglify):

grunt.initConfig({
    concat: {
        options: {
            sourceMap: true
        }
    },
    uglify: {
        options: {
            sourceMap: true,
            sourceMapIn: function(uglifySource) {
                return uglifySource + '.map';
            },
        }
    }
});

Com grunt-jsmin-sourcemap:

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-jsmin-sourcemap');
    grunt.initConfig({
        'jsmin-sourcemap': {
            all: {
                src: ['scripts/script.js'],
                dest: 'scripts/script.jsmin-grunt.js',
                destMap: 'scripts/script.jsmin-grunt.js.map'
            }
        }
    });
    grunt.registerTask('default', 'jsmin-sourcemap');
};

Angular CLI

ng build --prod --source-map --vendor-source-map

UglifyJS2

O UglifyJS2 é uma ferramenta CLI. Para mais opções, consulte Opções de source map da CLI.

uglifyjs app.js -o app.min.js --source-map app.min.js.map

SystemJS

Use o SystemJS Builder:

builder.bundle('app.js', 'app-outfile.js', {
    minify: true,
    sourceMaps: true
});