Conheça a integridade do seu código com a API ReportingObserver

Encontre APIs descontinuadas nos seus apps de produção.

O ReportingObserver informa quando seu site usa uma API descontinuada ou é executado em uma intervenção no navegador. Originalmente, a funcionalidade básica foram lançados no Chrome 69. A partir do Chrome 84, ela pode ser usada em workers.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

Use o callback para enviar relatórios a um back-end ou provedor de análise para análise.

Por que isso é útil? Até essa API, avisos de descontinuação e intervenção eram só está disponível no DevTools como mensagens do Console. As intervenções, especificamente, são acionadas apenas por várias restrições reais, como dispositivo e rede pelas condições Portanto, talvez você nunca veja essas mensagens ao desenvolver/testar um site localmente. O ReportingObserver oferece uma solução para esse problema. Quando os usuários enfrentam possíveis problemas, os desenvolvedores Web podem ser notificados sobre eles.

Contexto

Algum tempo atrás, escrevi uma postagem do blog (Como observar seu app da Web). porque achei fascinante a quantidade de APIs que existem para monitorar "coisas" que acontece em um app da Web. Por exemplo, há APIs que podem observar informações sobre o DOM: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver captura as medições de desempenho. E métodos como window.onerror e window.onunhandledrejection e até mesmo nos informar se algo der errado.

No entanto, há outros tipos de avisos que não são capturados pelo as APIs que já existem. Quando seu site usa uma API descontinuada ou se depara com uma intervenção no navegador, o DevTools é o primeiro a informar eles:

Avisos do Console do DevTools para descontinuações e intervenções.
Avisos iniciados pelo navegador no console do DevTools
.

É natural que o window.onerror capture esses avisos. Isso não é verdadeiro. Isso ocorre porque window.onerror não é acionado para avisos gerados diretamente por o próprio user agent. Dispara para erros de tempo de execução (exceções de JavaScript e erros de sintaxe) causados pela execução do código.

ReportingObserver aproveita a folga. Ele oferece uma maneira programática notificados sobre avisos emitidos pelo navegador, como suspensões de uso e intervenções. Você pode usá-lo como uma ferramenta de denúncia e perder menos sono pensando se os usuários estão tendo problemas inesperados em seu site ativo.

A API

A ReportingObserver não é diferente de outras APIs do Observer, como IntersectionObserver e ResizeObserver. Você retorna um retorno de chamada. dá informações. As informações que o callback recebe é uma lista de problemas que a página causou:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

Relatórios filtrados

Os relatórios podem ser pré-filtrados para observar apenas determinados tipos. Agora, Há dois tipos de relatório: 'deprecation' e 'intervention'.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

Relatórios armazenados em buffer

Use a opção buffered: true quando quiser ver os relatórios que foram geradas antes da criação da instância do observador:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

Essa opção é ótima para situações como carregamento lento de uma biblioteca que usa uma ReportingObserver: O observador é adicionado tarde, mas você não perde tudo o que aconteceu anteriormente no carregamento da página.

Parar de observar

Pare de observar usando o método disconnect():

observer.disconnect();

Exemplos

Informar as intervenções do navegador a um provedor de análise

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

Receba notificações quando as APIs forem removidas

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

Conclusão

O ReportingObserver oferece mais uma maneira de descobrir e monitorar possíveis problemas em seu aplicativo da web. É até uma ferramenta útil para entender integridade da base de código (ou a falta dela). Enviar relatórios para um back-end, sabe sobre problemas reais, atualizar código, gerar lucro!

Trabalho futuro

No futuro, espero que ReportingObserver se torne a API real para capturando todos os tipos de problemas em JavaScript. Imagine uma API para capturar tudo que dá errado no seu app:

Outros recursos:

Imagem principal de Sieuwert Otterloo (link em inglês) em Unsplash.