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.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=2&hl=pt)
É 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:
- Intervenções do navegador
- Suspensões de uso
- Violações da política de recursos. Consulte o Problema 867471 do Chromium.
- 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
)
Outros recursos:
Imagem principal de Sieuwert Otterloo (link em inglês) em Unsplash.