How to Build a Robust Front‑End Logging System for Faster Issue Resolution

Current Pain Points

1. After users report issues, developers often only have JavaScript error logs or CGI calls, which may not reveal what actually happened on the client device.

2. Existing JS error reporting systems introduce latency; for a financial product, every millisecond counts, making rapid diagnosis and repair critical.

Having a detailed, searchable runtime log similar to backend logs would greatly help.

Our Exploration

A robust logging system typically includes log recording, log uploading, and log analysis. We investigated each component.

1. Where Should Logs Be Stored?

Front‑end constraints prevent file‑system access like native apps, so we evaluated browser storage options:

Cookie

Not suitable; cookies should be minimal to avoid bandwidth waste.

localStorage

Simple key‑value store with good compatibility, but size limits make it risky for detailed logs; best used as a fallback.

WebSQL

Although deprecated, it is widely supported and backed by SQLite, offering up to 50 MB on iOS. Suitable as the primary solution for now, with log cleanup handling.

IndexedDB

Modern, powerful client‑side database that will likely replace WebSQL in the future.

2. What Makes a Log Format Elegant?

Timestamp – essential for ordering events.

Multi‑session – separate logs per module to avoid interference and enable filtering.

Error level – e.g., info , warning , error , critical for basic filtering.

Descriptor – concise identifiers like verify.request.start or submit.prevented to quickly convey intent and aid code search.

Data and details – additional context or payload when a simple descriptor isn’t enough.

3. How Are Logs Collected?

Logs are stored locally on the client. A backend endpoint receives uploaded logs, with security measures such as token authentication. In our Tencent Micro‑Securities project, users send a “problem feedback” message in WeChat, receive a log upload page link, and the system automatically uploads logs after login.

4. How Are Logs Analyzed?

Since the uploaded log format is standardized and human‑readable, command‑line tools or editors can be used, but many users prefer a web‑based UI. We built a tool that runs without backend dependencies, can be served on a server, opened locally, or packaged as a desktop app.

Using the HTML5 FileReader.readAsText API and drag‑and‑drop events, users can drop one or multiple log files onto the page for batch analysis and search.

Based on this work, the Tencent Micro‑Securities team released We.Logline, a lightweight, client‑side front‑end logging utility.