---
title: "Remote Console for Web App Log Monitoring"
description: "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"
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:

``` js
const orig = console.log;
console.log = function () {
  orig.apply(console, arguments);
  navigator.sendBeacon(URL, arguments[0]);
};
```

Everything logged through `console.log(...)` is 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](https://github.com/flancer64/spa-remote-console) does,
which I wrote for collecting and reading logs. It accepts all incoming
messages from any address:

``` js
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:

``` bash
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.