Debugger e Global exceptions no WinJS – No Bugs

JavaScript

Quando estamos desenvolvendo uma aplicação é comum nos depararmos com diversos erros não tratados ao longo do caminho. Na maioria das linguagens isso é muito fácil de reconhecer através dos erros de compilação. Já no desenvolvimento de aplicações para a Windows Store com JavaScript (WinJS) não é algo tão simples assim…

CAPA

Neste post gostaria de abordar sobre exceções globais e modo debugger. Durante o desenvolvimento de uma APP acabei me deparando com algumas necessidades e particularidades em relação a construção de aplicações para Windows Store com JavaScript (WinJS).

A primeira coisa que me incomodou durante o processo de desenvolver uma APP com WinJS é o fato da aplicação ser encerrada, fechada e não exibir nenhuma mensagem referente ao erro. Este é o comportamento padrão quando estamos trabalhando com WinJS.

Em aplicações JavaScript e HTML para a Windows Store temos o mesmo comportamento de uma página da Web. Quando ocorre um erro em um objeto DOM (Document Object Model) em que é possível o tratamento do erro, é disparado um evento onerror. Os erros de JavaScript, percorrem o caminho da call stack (pilha de chamadas) até caírem em um bloco try/catch ou chegarem a camada do objeto Window, gerando assim o evento window.onerror.

Já o WinJS fornece o evento WinJS.Application.onerror onde é concentrado nossa linha de defesa mais básica contra erros gerados pela aplicação. É neste evento que conseguimos capturar todos os erros que chegam ao window.onerror.

 

Por que somos humanos…

Vale lembrar que como seres humanos estamos suscetíveis as falhas. Se seu código nunca falhasse creio que você não estaria lendo este post, correto? Sendo assim é importante conseguir conhecer onde está ocorrendo o erro em nosso código, ainda mais em uma linguagem que não é fortemente tipada e favorece ainda mais a erros como é o caso do JavaScript.

Embora este encerramento este seja o comportamento padrão, é possível de maneira simples implementar o tratamento de erro global a fim de facilitar o desenvolvimento.

Observe o código abaixo:

COD01

Neste caso estou utilizando a propriedade onerror do objeto Application do WinJS. É aqui que podemos capturar as ações que ocasionaram o erro, tratar as falhas, gravar logs e impedir o fechamento da aplicação. Podemos entender o onerror como um try/catch onde toda a aplicação está.

Como já mencionado aqui, outro ponto importante é que podemos obter detalhes do erro. Utilizando a propriedade detail temos acesso as informações mais específicas. Observe o código abaixo:

COD02

Uma dica dada pelo Caio Proiete, e que particularmente tenho utilizado, é a criação de uma popup para exibir os erros e evitar o fechamento da aplicação. O lado prático é a facilidade de visualização da exceção, e poder examinar outros pontos da aplicação durante o erro já que a mesma não foi encerrada.

COD03

Um ponto importante é o retorno. Note que estou utilizando o return true. É este cara que impede o fechamento da aplicação. Neste exemplo, o manipulador de eventos de erro mostra uma mensagem informando ao usuário que ocorreu um erro e qual o erro. O manipulador de eventos retorna true para manter a caixa de diálogo de mensagem aberta até que o usuário a descarte. Retornar true também informa o processo WWAHost.exe que o erro foi tratado e que o mesmo pode seguir em execução.

Ainda sobre a dica de exibição no MessageDialog, eu gosto de concatenar a linha e caractere dos erros provenientes do window.onerror. É sempre bom examinar o erro mais de perto, até porque muitas vezes as mensagens não são nada significativas. Segue um exemplo:

FIG01

A mensagem abaixo provêm da seguinte linha de código:

varr x = 4;

Note que a mensagem não é clara. Alguém pode pensar que está faltando apenas o ; quando na verdade o problema é outro.

Já para as exceções do Application eu utilizo toda a propriedade stack para ter uma visão do erro. Abaixo, segue um exemplo:

FIG02

Este erro é gerado pelo seguinte trecho de código:

COD05

Neste código estou chamando uma função processamento que não foi definida, retornando a stack erro que já vimos.

 

Debugger

Sabe aquele código  e mensagens de erro que só fazem sentido durante o desenvolvimento? Pois  é… Outra utilidade que não poderia faltar é capacidade de saber quando a aplicação está em modo debugger, o famoso F5. Esta é uma parte interessante quando queremos definir que determinado seguimento de código deve ser executado apenas durante o debugging da aplicação. 

FIG03

Vale lembrar que JavaScript não é compilado, logo sua depuração não é "tradicional". Quando estamos debuggando o WinJS para Windows Store, o Visual Studio anexa o depurador ao JavaScript da aplicação. Mesmo assim, trabalhar com o debugger é tão simples como apenas utilizar uma propriedade. É só chamar a propriedade debuggerEnabled do objeto Debug. Observe o código abaixo:

COD06

Observe o código executando:

Com debugger ativado

FIG05

Sem debugger

FIG04

Mesmo não estando acessível via Intellisense, o objeto Debug é global e intrínseco ao JavaScript. Também podemos utilizar o objeto Debug para escrever dicas e ajudar a monitorar determinados trechos de código ou valores quando em modo debugger.

var contador = 42;
Debug.write("O valor em contador é " + contador);

COD07

No exemplo acima utilizamos as funções write ou writeln para exibir uma string na janela de Output do Visual Studio apenas quando estivermos em modo debugger. Alguém lembra do alert

Existe muito mais sobre o objeto Debug e como ele pode agregar no desenvolvimento das APPs. Para aprofundar no assunto não deixe de ler as referências no final do post.

 

Outra possibilidade é a combinação destes dois mecanismos para a exibição de mensagens específicas ao usuário final e ao desenvolvedor quando em modo debugger.

COD08

Como resultado temos as seguintes saídas:

FIG07

FIG06

 

Referências

Start a debugging session for Store Apps in Visual Studio (JavaScript)

Build More Efficient Windows Store Apps Using JavaScript: Error Handling

 

Bons estudos e até a próxima pessoal  ;)


Author's profile picture

Vitor is a computer scientist who is passionate about creating software that will positively change the world we live in.

MVP Azure - Cloud Architect - Data science enthusiast


6 minutes to read