Texto longo, leia o resumo
Tem um novo observador na cidade! A ReportingObserver
é uma nova API que informa
quando seu site usa uma API descontinuada ou se depara com uma
intervenção do navegador:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
O callback pode ser usado para enviar relatórios a um provedor de back-end ou análise para análise posterior.
Por que isso é útil? Até agora, os avisos de descontinuação e
intervenção só estavam disponíveis no DevTools como mensagens do console.
As intervenções, em particular, são acionadas apenas por várias restrições do mundo real,
como condições do dispositivo e da rede. Portanto, talvez você nunca veja essas mensagens
ao desenvolver/testar um site localmente. ReportingObserver
oferece
a solução para esse problema. Quando os usuários enfrentam possíveis problemas, podemos ser notificados sobre eles.
Introdução
Algum tempo atrás, escrevi uma postagem do blog ("Observar seu app da Web")
porque achei fascinante a quantidade de APIs que existem para monitorar as
"coisas" que acontecem em um app da Web. Por exemplo, existem APIs que podem observar
informações sobre o DOM: ResizeObserver
,
IntersectionObserver
, MutationObserver
. Existem APIs para capturar
medições de performance: PerformanceObserver
. Outras
APIs, como window.onerror
e window.onunhandledrejection
, até nos informam
quando algo dá errado.
No entanto, há outros tipos de avisos que não são capturados por essas APIs existentes. Quando o site usa uma API descontinuada ou é exposto a uma intervenção do navegador, o DevTools é primeiro a informar sobre isso:
É natural que o window.onerror
capture esses avisos. Ela não funciona.
Isso ocorre porque o window.onerror
não é acionado para avisos
gerados diretamente pelo próprio user agent. Ela é acionada em erros de tempo de execução (exceções de JS e erros de sintaxe) causados pela execução do código.
ReportingObserver
retira a folga. Ele oferece uma maneira programática de receber
notificações sobre avisos emitidos pelo navegador, como suspensões de uso
e intervenções. Você pode usá-la como uma ferramenta de relatórios e
perder menos sono se perguntando se os usuários estão enfrentando problemas inesperados no seu site
ativo.
A API
A API não é diferente de outras APIs de "observador", como
IntersectionObserver
e ResizeObserver
. Você faz um retorno de chamada
e fornece informações. A informação recebida pelo callback é 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 de relatório:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Relatórios armazenados em buffer
A opção buffered: true
é realmente útil quando você quer ver os
relatórios que foram gerados antes da criação do observador:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
É ótimo para situações como carregamento lento de uma biblioteca que usa
um ReportingObserver
. O observador é adicionado com atraso, mas você
não perde nada que aconteceu anteriormente no carregamento de página.
Parar de observar
Sim. Ela tem um método disconnect
:
observer.disconnect(); // Stop the observer from collecting reports.
Exemplos
Exemplo: informe as intervenções do navegador a um provedor de análises:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
},
{types: ['intervention'], buffered: true}
);
observer.observe();
Exemplo: receba uma notificação 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 outra maneira de descobrir e monitorar
possíveis problemas no seu app da Web. É até mesmo uma ferramenta útil para entender a
integridade da sua base de código (ou a falta dela). Enviar relatórios para um back-end,
saber sobre os problemas reais que os usuários estão enfrentando em seu site, atualizar
código, lucro!
Trabalho futuro
No futuro, minha esperança é que ReportingObserver
se torne a API real
para detectar todos os tipos de problemas no JS. Imagine uma API para capturar tudo
o que dá errado no seu app:
- Intervenções do navegador
- Descontinuações
- Violações da política de recursos. Consulte crbug.com/867471.
- Exceções e erros do JS (atendidos atualmente por
window.onerror
). - Rejeições de promessas do JS não processadas (atendidas atualmente por
window.onunhandledrejection
)
Também estou empolgado com as ferramentas que integram o ReportingObserver
aos
fluxos de trabalho. O Lighthouse é um exemplo de ferramenta
que já sinaliza descontinuações do navegador quando você executa a auditoria
Evitar APIs descontinuadas:
Atualmente, o Lighthouse usa o protocolo DevTools
para coletar mensagens do console e informar esses problemas aos desenvolvedores. Em vez disso,
pode ser interessante mudar para ReportingObserver
para ter relatórios de descontinuação bem estruturados e metadados adicionais, como
a data anticipatedRemoval
.
Outros recursos:
- Especificação W3c (link em inglês)
- entrada chromestatus.com