Frontend Monitoring: Importance, Types, and SDK Design

Why Have Frontend Monitoring?

A realistic reason is that bug is impossible to be fully tested ; due to cost and release schedules, testing cannot cover every corner, so bugs inevitably remain hidden.

Therefore a reliable frontend monitoring system helps turn passive detection into proactive response, allowing developers to know and fix issues as soon as they appear, while also providing user‑behavior data to guide product optimization.

Common Frontend Monitoring

Frontend monitoring can be divided into four parts:

Exception Monitoring

User Data Monitoring

Performance Monitoring

Exception Alerting

User Data Monitoring

Data monitoring listens to user actions and helps evaluate and improve the website experience.

PV : page view count.

UV : number of distinct visitors or devices.

New Unique Visitor : first‑time visitors on a given day.

Bounce Count : sessions that view only one page before leaving.

Visit Count : number of sessions from a source.

Time spent on each page.

Entry point used to reach the page.

Actions triggered on the page.

Site conversion rate.

Navigation path analysis.

Collecting these data lets us display frontend performance clearly and use the results to improve speed, animation compatibility, and overall user experience, ultimately increasing conversion rates and reducing bounce rates.

Performance Monitoring

Performance monitoring tracks and evaluates the website's performance from the user's perspective in the browser.

First Paint (FP) : time when the browser renders the first pixel that differs from a blank screen.

First Contentful Paint (FCP) : time when the browser renders the first piece of DOM content, which may be text, image, SVG, or <canvas> element.

First Meaningful Paint (FMP) : time when the main content of the page is rendered (e.g., video component, weather info, news item).

Largest Contentful Paint (LCP) : time when the largest visible element in the viewport starts rendering.

White‑screen time.

HTTP request response time.

Overall static resource download time.

Page render time.

Page interaction animation completion time.

Exception Monitoring

Because frontend code runs on the client, exceptions occur and need to be reported; while many can be caught with try catch , issues like memory leaks or occasional bugs are hard to capture.

Common exceptions to monitor include:

JavaScript Exception Monitoring : uncaught errors such as undefined variables, null references, syntax errors.

Data Request Exception Monitoring : Ajax or network request failures, server errors, timeouts.

Resource Load Errors : failures loading CSS, JS, images, etc.

Cross‑Origin Issues : CORS errors.

UI Problems : abnormal component behavior or interaction issues.

Capturing and reporting these exceptions enables development teams to respond quickly, improve user experience, and reduce the negative impact of client‑side problems on business.

Exception Alerting

Frontend exception alerting detects and captures errors, then notifies developers or teams through various channels for rapid diagnosis and resolution.

Common alert methods:

Email Notification : sends exception details via email, usually for low‑priority issues.

SMS or Phone Notification : used for urgent problems requiring immediate attention.

Instant Messaging : sends alerts through tools like WeChat Work, Feishu, or DingTalk for timely collaboration.

Log and Event Recording : records exceptions in central logs or monitoring platforms for later analysis.

Alert Levels and Strategies

Alert levels are defined based on severity and urgency:

Urgent Alert : critical issues needing immediate handling, often via SMS or phone.

Warning Alert : medium‑severity issues, handled within a short timeframe, notified via instant message or email.

Info Alert : low‑priority informational messages, sent via email or instant message.

Silent Alert : temporary or non‑urgent issues logged without active notification.

Exception alerting is a key mechanism for maintaining system stability, reducing downtime, and supporting reliable business operations.

Having introduced the four major parts of frontend monitoring, we now discuss common monitoring approaches.

SDK Design (Tracking Solutions)

Frontend tracking is a common method for collecting and monitoring website data.

Manual Tracking

Manual (code) tracking inserts SDK function calls directly into the code. Services like Tencent Analytics, Baidu Tongji, and ZhugeIO use this approach. Advantages:

Flexibility : developers can define custom attributes and events to capture specific user actions.

Precision : exact control over where tracking points are placed.

Drawbacks include:

High Workload : many code insertions increase development effort.

High Communication Cost : frequent coordination between development, product, and operations can cause delays.

High Update Cost : each change requires a new deployment.

Visual Tracking

Visual tracking provides a UI that lets non‑technical users add tracking points without writing code. Advantages:

Simplicity : non‑technical staff can add points, reducing reliance on developers.

Real‑time Updates : tracking configuration can be changed instantly without redeploying.

Drawbacks:

Limited Customizability : only a subset of events and attributes are supported.

Control Restrictions : usually works only with specific UI components and event types.

No‑Tracking

No‑tracking automatically captures all user actions and events, with backend filtering to extract useful data. Advantages:

Fully Automatic : no manual insertion, eliminating missing or erroneous points.

Comprehensiveness : captures the complete user‑behavior dataset.

Drawbacks:

Large Data Volume : massive raw data requires substantial backend processing.

Complex Processing : extracting valuable insights needs sophisticated algorithms.