Texto longo, leia o resumo
Tem um novo observador na cidade! A ReportingObserver
é uma nova API que permite
saber quando seu site usar uma API descontinuada ou encontrar uma
intervenção no 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 back-end ou provedor de análise para uma análise mais aprofundada.
Por que isso é útil? Até agora, a descontinuação e
os avisos de intervenção só estavam disponíveis no DevTools como mensagens do console.
As intervenções, em especial, só são acionadas por várias restrições do mundo real
como as condições do dispositivo e da rede. Assim, é possível que você nunca veja essas mensagens
ao desenvolver/testar um site localmente. ReportingObserver
fornece
a solução para esse problema. Quando os usuários enfrentam problemas em potencial,
podemos ser notificados sobre elas.
Introdução
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
. Há APIs para capturar
medições de performance: PerformanceObserver
. Outra opção
APIs como window.onerror
e window.onunhandledrejection
nos dão informações
quando algo dá errado.
No entanto, há outros tipos de avisos que não são capturados por essas as APIs que já existem. Quando seu site usar uma API descontinuada ou ficar ativo contra uma intervenção no navegador, o DevTools é o primeiro a informar sobre eles:
![Avisos do console do DevTools para descontinuações e intervenções.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=9&hl=pt)
É natural que o window.onerror
capture esses avisos. Não é bem assim.
Isso ocorre porque window.onerror
não é acionado para avisos.
gerados diretamente pelo próprio user agent. Dispara para erros de tempo de execução
(exceções de JS e erros de sintaxe) causados pela execução do código.
ReportingObserver
aproveita a folga. Ele oferece uma maneira programática
notificações sobre avisos emitidos pelo navegador, como suspensões de uso;
e intervenções. Você pode usá-lo como uma ferramenta de relatórios e
perdem menos sono imaginando se os usuários estão tendo problemas inesperados em sua transmissão
site.
A API
A API não é diferente do outro "observador" APIs, como
como IntersectionObserver
e ResizeObserver
. Você retorna um retorno de chamada.
ela fornece informações. A informação que o retorno de chamada 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 de relatório:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Relatórios armazenados em buffer
A opção buffered: true
é muito útil quando você quer conferir
relatórios que foram gerados antes da criação do observador:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
Ele é ótimo para situações como carregamento lento de uma biblioteca que usa
um ReportingObserver
. O observador é adicionado com atraso, mas você
não perca nada que aconteceu anteriormente no carregamento da página.
Parar de observar
Sim. Ele 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álise:
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 mais uma maneira de descobrir e monitorar
possíveis problemas em seu aplicativo da web. É até uma ferramenta útil para entender
a integridade (ou a falta dela) da base de código. enviar relatórios para um back-end
conhecer os problemas reais que os usuários estão enfrentando no seu site, atualizar
código, lucro!
Trabalho futuro
No futuro, espero que a ReportingObserver
se torne a API mais usada.
para capturar todos os tipos de problemas em JS. Imagine uma API para capturar tudo
que dá errado no seu app:
- Intervenções do navegador
- Suspensões de uso
- Violações da política de recursos. Consulte crbug.com/867471.
- Exceções e erros de JS (atendidos por
window.onerror
no momento). - Rejeições de promessas de JS não processadas (atualmente atendidas por
window.onunhandledrejection
)
Também estou animado com as ferramentas que integram o ReportingObserver
os fluxos de trabalho. O Lighthouse é um exemplo de ferramenta.
que já sinaliza descontinuações do navegador quando você executa seu
"Evita APIs descontinuadas" auditoria:
![A auditoria do Lighthouse para usar APIs descontinuadas pode usar o ReportingObserver.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=9&hl=pt)
No momento, o Lighthouse usa o protocolo DevTools
para raspar mensagens do console e relatar esses problemas aos desenvolvedores. Em vez disso,
pode ser interessante mudar para ReportingObserver
pelos relatórios de descontinuação bem estruturados e metadados adicionais, como
Data anticipatedRemoval
.
Outros recursos: