Remote Console for Web App Log Monitoring

Publication date: 2024-02-24

What does a developer do when they need to read logs from a web application running on a mobile phone? In desktop browser versions, you can open the Dev Tools panel and access the console, but what about smartphones?

The simplest solution is to send logs to some server or log aggregator. All you need to do is write something like this at the very beginning of the application:

const orig = console.log;
console.log = function () {
orig.apply(console, arguments);
navigator.sendBeacon(URL, arguments[0]);
}; And that’s it — everything logged to the console using console.log(...) will be sent to the specified URL. I use the Beacon API because in this case, the browser does not expect a response from the server — the messages go in one direction.

Now all that’s left is to collect the logs and present them in a readable format. This is precisely what the small web application Remote Console does, which I wrote for collecting and reading logs. It accepts all incoming messages from any address:

navigator.sendBeacon(‘https://console.wiredgeese.com/log/’, ‘any message’);

The server then broadcasts messages through WebSockets to everyone currently viewing the console:

Here’s a diagram of how it works:

The server does not store logs in any form. Everything received is immediately forwarded to recipients if they exist. Of course, if there is confidential information in the logs, it’s safer to host Remote Console on a local network or even on the developer’s machine:

$ git clone https://github.com/flancer64/spa-remote-console.git
$ cd spa-remote-console/
$ npm install
$ npm start

Channels

To separate one set of logs from another, “channels” are used. So if you’re sending logs to the address:

https://console.wiredgeese.com/log/any-chars/ then you can only view them at:

https://console.wiredgeese.com/any-chars/ This way, by simply adding some “channel” like /49bce4eb9e135c3580278b/ to the server address, you don’t have to worry too much that someone else will see your logs. Only those who know the channel name can monitor the logs.

The number of users simultaneously viewing logs from any channel is unlimited.

Merging Logs

If you need messages from multiple browsers to appear in the console, simply pour the logs into one channel. It’s very convenient if there is interaction between applications in two different browsers or between a browser and a server (the server can also pour logs into the console).

Sorting Logs

If logs are sent to the address https://console.wiredgeese.com/log/, the current time is automatically added to them on the server in the format mm/dd hh:mm:ss.mmm. If logs are sent to the address https://console.wiredgeese.com/timed/, they are redirected to browsers as-is.

Sorting of entries in the browser occurs in reverse order assuming that the first characters represent the time of the logged event.

Number of Entries

By default, the number of displayed entries is set to 64. This value can be changed to any other positive number. There are no upper limits. Each user can set this value independently of others.

Conclusion

Remote Console was planned as a developer tool, the main task of which is to allow a developer to see what is happening on the console of a mobile phone browser. But it also has additional functionality (relaying logs from one source to multiple browsers, separating logs by channels, merging logs from different sources in one channel) which has proven useful in everyday development.

It is entirely possible that this tool could also be applied to support existing web applications if the ability to duplicate logs to a remote console is added to the application. In this case, a support team member could observe what is happening on a client’s smartphone.