O material, cuja tradução publicamos hoje, é dedicado à API
ReportingObserver , um mecanismo que permite aprender sobre o uso de recursos obsoletos e que o navegador
interfere no trabalho do código da página.
ReportingObserver faz parte
desta especificação do W3C.
Por que isso é necessário?
Suponha que você tenha um importante projeto da web lançado alguns dias atrás. Os usuários, em muitos, já começaram a se registrar em seu site. Todo mundo sabe que esses projetos, para que, de maneira simples, trariam dinheiro às empresas, deveriam funcionar de maneira estável. Agora, vamos pensar no que acontece se o seu cliente encontrar o comportamento errado do site, cuja causa é algum tipo de erro, e você não souber nada sobre isso. Ele não corrigirá o erro, cuja ocorrência o desenvolvedor não conhece, ele se manifestará repetidamente e isso, em última análise, afetará negativamente os objetivos de negócios do projeto.
O visitante do site, possivelmente, não sabe nada sobre desenvolvimento na Web; portanto, quando o site começa a se comportar de maneira estranha, é improvável que ele procure no console para tentar entender o problema, que é expresso como uma mensagem iniciada por
[Intervention] ou
[Deprecation] .
De fato, os visitantes do site não devem se preocupar com erros. Tudo o que eles precisam é de estabilidade, conveniência e previsibilidade. Os erros são um problema do desenvolvedor, e a API
ReportingObserver existe especificamente para ajudar os desenvolvedores a lidar com esse problema. Usando o
ReportingObserver você pode enviar relatórios ao desenvolvedor sobre o uso de APIs desatualizadas ou sobre interferência na página do navegador. Outras ferramentas de tratamento de erros não respondem a essas coisas.
Veja como é o trabalho com o
ReportingObserver :
const observer = new ReportingObserver((reports, observer) => { for (const report of reports) { console.log(report.type, report.url, report.body); } }, { buffered: true }); observer.observe();
Vamos falar sobre como usar esta API.
Estrutura da API ReportingObserver
Os navegadores possuem APIs projetadas para detectar erros. Por exemplo,
window.onerror . No entanto,
window.onerror não rastreia absolutamente todas as situações problemáticas que surgem durante a operação da página. Por exemplo, essa ferramenta ajuda você a aprender sobre erros de tempo de execução causados por exceções de JavaScript ou erros de sintaxe no seu código. No entanto, se você receber uma notificação sobre o uso de um recurso desatualizado ou a intervenção do navegador, o
window.onerror não responderá a essa notificação. É nessa situação que o
ReportingObserver será útil.
Para usar a API
ReportingObserver , você precisa criar o objeto observador correspondente, fornecendo um retorno de chamada, quando chamado, os relatórios serão enviados a ele na forma de uma lista de problemas encontrados na página. Já revisamos o código necessário para trabalhar com o
ReportingObserver . Agora, vamos dar uma olhada em um exemplo de quais dados estão sendo enviados para o retorno de chamada:
const observer = new ReportingObserver((reports, observer) => { for (const report of reports) { // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload' // → report.type === 'deprecation' // → report.url === 'https://reporting-observer-api-demo.glitch.me' // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }})
Ao trabalhar com o
ReportingObserver você pode filtrar os relatórios. Por exemplo, aqui está um design que permite receber apenas relatórios sobre o uso de recursos obsoletos:
const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['deprecation']});
Se, ao criar o objeto
ReportingObserver , você passar a propriedade
buffered: true para ele, isso permitirá ver os relatórios gerados antes da criação desse objeto:
const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['intervention'], buffered: true});
Para interromper o monitoramento de relatórios sobre o uso de recursos desatualizados ou sobre intervenções do navegador no código, você pode desativar o objeto observador:
observer.disconnect();
Exemplo da API ReportingObserver
Aqui está um exemplo de uso do objeto observador
ReportingObserver . Aqui está um diagrama da organização de envio de um relatório ao servidor:
const report = new ReportingObserver((reports, observer) => { for (const report of reports) { const stringifiedReport = JSON.stringify(report.body);
Sumário
A API
ReportingObserver permite que o desenvolvedor expanda o intervalo de informações recebidas por ele sobre erros que ocorrem em seus projetos quando usuários reais trabalham com eles. Essa API está disponível no Chrome 69, há informações de que esse recurso aparecerá no Edge. Ainda não se sabe se está planejado implementar algo semelhante no Firefox ou Safari.
Detalhes sobre o
ReportingObserver podem ser encontrados
aqui e
aqui .
Caros leitores! O que você acha da API ReportingObserver?
