在现代前端开发中，监控程序是保障使用者体验和程序稳定性的关键基础设施。不过，一个完善的前端监控程序能帮我们及时发现性能问题、定位错误根源、理解使用者行为。从而继续调整产品体验，

使用者痛点：页面加载缓慢、偶发崩溃或交互异常时开发与运维团队往往只能靠使用者反馈或日志回溯，导致问题修复周期长、使用者流失率升高。

一、性能监控

主要性能指标

首屏加载时间

const observer = new PerformanceObserver => {
for ) {
if {
console.log;reportMetric;}
}
})，observer.observe;

最大内容绘制

const lcpObserver = new PerformanceObserver => {
const entries = list.getEntries;const lastEntry = entries;console.log，话说回来，reportMetric;})，lcpObserver.observe;

累积布局偏移

let clsValue = 0;const clsObserver = new PerformanceObserver => {
for ) {
if {
clsValue += entry.value;console.log，reportMetric;}
}
})，clsObserver.observe;

使用者痛点：当 FCP/LCP 超过业务阈值时使用者往往会在页面还未渲染完成就离开；CLS 较高则会导致内容跳动，直接影响转化率。

自定义性能埋点

class PerformanceMonitor {
constructor {
this.metrics = {};不过，}
recordPageLoad {
const timing = performance.timing;const metrics = {
dnsLookup: timing.domainLookupEnd - timing.domainLookupStart,tcpConnect: timing.connectEnd - timing.connectStart。domParse: timing.domComplete - timing.domLoading,fullLoad: timing.loadEventEnd - timing.navigationStart
};Object.entries.forEach => {
this.reportMetric;})，}
recordResourceLoad {
performance.getEntriesByType.forEach(resource => {
if { // 示例阈值
this.reportMetric('slow_resource'。{
至于name，resource.name,duration: resource.duration,type: resource.initiatorType
});}
})，}
reportMetric {
fetch('/api/metrics',{
再看method，'POST'。body: JSON.stringify }),headers: { 'Content-Type': 'application/json' }
});}
}
const perfMonitor = new PerformanceMonitor;perfMonitor.recordPageLoad;perfMonitor.recordResourceLoad;

使用者痛点：缺乏业务层面的自定义埋点时团队只能看到通用指标，却无法判断特定业务模块的真实表现。

二、错误监控

全局错误捕获

JavaScript运行时错误

window.addEventListener => {
reportError({
至于type。'runtime',message: event.message,filename: event.filename,lineno: event.lineno,colno: event.colno,stack: event.error?.stack,timestamp: Date.now
});},true)，window.addEventListener => {
reportError({
type的观点是。'promise',message: event.reason?怎么说呢，.message || 'Unhandled Promise Rejection'。stack: event.reason?.stack,timestamp: Date.now
});})，

Vue 错误捕获

import { createApp } from 'vue';const app = createApp;app.config.errorHandler = => {
reportError({
至于type，'vue'。message: err.message,stack: err.stack,component: instance?.type，.name || 'Anonymous',lifecycleHook: info。timestamp: Date.now
});}，

React 错误边界

import React from 'react';class ErrorBoundary extends React.Component {
constructor {
super;this.state = { hasError: false,error: null };话说回来，}
static getDerivedStateFromError {
return { hasError: true。error }，怎么说呢，}
componentDidCatch {
reportError({
从type来看，'react',message: error.message。stack : error.stack,componentStack : errorInfo.componentStack,timestamp : Date.now
});}
render {
if {
return 

页面出错了请稍后刷新
}
return this.props.children;}
}

使用者痛点：生产环境报错信息缺失或上报不及时使得线上异常只能等到使用者投诉后才被发现，排查成本极高。其实，

资源加载错误

window.addEventListener => {
if {
reportError({
type : 'resource'。resourceType : 'image',url : event.target.src,timestamp : Date.now
});}
},true)，const originalFetch = window.fetch;window.fetch = async function{
try{
const response = await originalFetch;if{
reportError({
从type来看，'http',url : args。status : response.status,method : args?.method || 'GET'
});}
return response;}catch{
reportError({
从type来看，'http',url : args。message : error.message,method : args?.method || 'GET'
});throw error，}
};

使用者痛点：图片、脚本或接口请求失败常导致页面功能缺失。 但若未实时上报，这类问题会在低频场景下被埋没。

三、行为监控

使用者交互追踪

class BehaviorTracker{
constructor{
this.sessionId = this.generateSessionId;}
trackClick{
const data ={
至于type，'click',elementTag : element.tagName。className : element.className,text : element.textContent?.slice,x : element.getBoundingClientRect.left,y : element.getBoundingClientRect.top。pageUrl : window.location.href,timestamp : Date.now,sessionId:this.sessionId
};this.reportBehavior;}
trackPageView{
const startTime=Date.now;怎么说呢，window.addEventListener=>{
const duration=Date.now-startTime;this.reportBehavior({
说到type，'pageview',url : window.location.href。duration,sessionId:this.sessionId,timestamp : Date.now
});})，}
trackScroll{
let timer;话说回来，window.addEventListener=>{
clearTimeout;timer=setTimeout=>{
const depth=Math.round(
window.scrollY/*100
);this.reportBehavior)});},300)，});}
reportBehavior{
navigator.sendBeacon);}
generateSessionId{
return `sess_${Date.now}_${Math.random.toString.slice}`;}
}
const tracker=new BehaviorTracker;tracker.trackPageView;tracker.trackScroll;document.addEventListener=>tracker.trackClick);

使用者痛点：缺少对关键方法的行为数据。导致产品经理无法评估功能使用率，也让技术团队难以判断哪些交互导致性能瓶颈。

性能与行为关联分析

class Analytics{
constructor{
this.userActions=;}
recordAction{
this.userActions.push,userId:this.getUserId});}
getSessionId{
return localStorage.getItem||
}`),localStorage.getItem);}
getUserId{
return localStorage.getItem||'anonymous';}
analyzePerformanceAfterAction{
const actions=this.userActions.filter;按理说，const recent=actions.slice;// 最近20次
const avgResponse=recent.reduce=>sum+,0)/recent.length||0;const errRate=recent.filter.length/ recent.length ||0;return {avgResponseTime:Number),errorRate:Number)};}
}

使用者痛点：仅有性能数据没有行为上下文时开发者很难判断是哪一次点击或哪段业务流程触发了卡顿。

四、监控数据上报与可视化

统一上报服务

class MonitorService{
constructor{
this.endpoint=config.endpoint;this.appId=config.appId;this.queue=，说起来，this.flushInterval=config.flushInterval||5000;this.init，}
init{
setInterval=>this.flush,this.flushInterval);window.addEventListener=>this.flush);}
report{
const payload={
再看appId，this.appId,type,data,timestamp:Number)。userAgent:navigator.userAgent,url:windo​w.location.href,referrer=document.referrer
};this.queue.push;if{this.flush;}
}
flush{
if{return;}
const batch=;this.queue=，navigator.sendBeacon);}}
const monitor=new MonitorService;老实说，// 使用示例
monitor.report;monitor.report;

告警规则示例

const alertRules={
errorRate:{threshold:.05。window:'5m'},fcp:{threshold:2000},lcp:{threshold:=2500},_cls:{threshold:.1},apiErrorRate:{threshold:.02,window:'5m'}
};function checkAlerts{
const rule=alertRules;if{return，}
if{
sendAlert({
metric,value。threshold：rule.threshold,timestamp：Date.now
});}
}

使用者痛点：PaaS 网站的告警阈值往往是默认值。未结合实际业务需求进行调优，会导致大量误报或漏报，让团队对监控产生“疲劳”。通过统一上报和可配置的告警规则，可实现精准预警。

• 性能监控：SLA‑级别的 FCP/LCP/CLS + 自定义业务埋点，让每一次加载都可量化。
• 错误监控：全局捕获 + 框架专属处理 + 静态资源&网络错误，上报即刻可追溯。
• 行为监控：User‑Journey 跟踪 + 行为‑性能关联分析，为产品决策提供数据支撑。
统一上报 & 可视化告警： 一站式数据管道+灵活阈值，让运维和研发同步感知风险。其实，

• 及时发现并修复问题
• 继续调整性能表现
• 让使用者用起来更舒服
• 降低运维成本

---