Monitoring changes in a web application


Eric Bidelman has bundled lots of code snippets around change events that can get triggered in the browser:

Changes range from simple things like DOM mutations and catching client-side errors to more complex notifications like knowing when the user’s battery is about to run out. The thing that remains constant are the ways to deal with them: callbacks, promises, events.

Below are some of use cases that I came up with. By no means is the list exhaustive. They’re mostly examples for observing the structure of an app, its state, and the properties of the device it’s running on.

Great list imho! Here’s the snippet to listening for changes in network connectivity, for example:

// Online/offline events.
window.addEventListener('online', e => {
window.addEventListener('offline', e => {

// Network Information API navigator.connection.addEventListener('change', e => {
  console.log(navigator.connection.type, navigator.connection.downlinkMax);

Observing your web app →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.