第 6 卷

第 6 / 13 卷日期：2026-01-02

• 异步数据请求监控：SPA 依赖接口数据渲染页面，需拦截全局异步请求（Axios、Fetch），捕获请

求错误、记录请求耗时，同时关联路由信息，便于定位“某页面某接口”的性能问题。

Code block

1// Axios 请求拦截器：记录请求开始时间

2	axios.interceptors.request.use(config => {
3	config.__startTime = Date.now();
4	config.__routePath = router.currentRoute.path; //关联当前路由
5	return config;
6	});

7 8// Axios 响应拦截器：捕获错误、计算耗时

9axios.interceptors.response.use( 10response => {

11	const requestTime = Date.now() - response.config.__startTime;
12	reportPerformanceToServer({
13	type: 'spaApiPerformance',
14	apiUrl: response.config.url,
15	routePath: response.config.__routePath,
16	requestTime,
17	status: response.status,
18	timestamp: Date.now()
19	});
20	return response;
21	},
22	error => {
23	const errorInfo = {
24	type: 'spaApiError',
25	apiUrl: error.config?.url,
26	routePath: error.config?.__routePath,
27	message: error.message,
28	status: error.response?.status,
29	timestamp: Date.now()
30	};
31	reportErrorToServer(errorInfo);
32	return Promise.reject(error);
33	}
34	);

次数，监控内存是否持续增长（若切换同一路由多次后内存明显上升，大概率存在泄漏）。

Code block

1// 定期采集内存数据，路由切换时额外采集

2	let memoryCheckTimer = setInterval(() => {
3	if (window.performance?.memory) {
4	const memoryInfo = {
5	type: 'spaMemoryUsage',
6	routePath: router.currentRoute.path,
7	usedJSHeapSize: window.performance.memory.usedJSHeapSize, //已使用堆内存
8	totalJSHeapSize: window.performance.memory.totalJSHeapSize, //总堆内存
9	timestamp: Date.now()
10	};
11	reportPerformanceToServer(memoryInfo);
12	}
13	}, 30000); //每30秒采集一次

14 15// 页面卸载时清除定时器

16	window.addEventListener('beforeunload', () => {
17	clearInterval(memoryCheckTimer);
18	});

PerformanceObserver 监听长任务，关联路由和组件信息，精准定位卡顿来源。

SPA 多使用 Vuex、Redux 等状态管理库，状态变更错误（如非法状态修改、状态依赖错误）会导致全局功能异常，需针对性监控：

状态变更、异步 action 错误等。

Code block

1const store = new Vuex.Store({

8// 记录状态变更日志 9reportBehaviorToServer({

10type: 'spaStoreMutation', 11mutationType: type,

12	payload: JSON.stringify(payload),
13	routePath: router.currentRoute.path,
14	timestamp: Date.now()
15	});
16	} catch (error) {
17	const errorInfo = {
18	type: 'spaStoreError',
19	errorType: 'mutationError',
20	mutationType: type,
21	payload: JSON.stringify(payload),
22	message: error.message,
23	stack: error.stack,
24	timestamp: Date.now()
25	};
26	reportErrorToServer(errorInfo);
27	throw error;
28	}
29	}
30 },
31 actions: {
32	//异步action错误捕获
33	async fetchData({ commit }, payload) {
34	try {
35	const data = await api.fetchData(payload);
36	commit('SET_DATA', data);
37	} catch (error) {
38	const errorInfo = {
39	type: 'spaStoreError',
40	errorType: 'actionError',
41	actionName: 'fetchData',
42	payload: JSON.stringify(payload),
43	message: error.message,
44	timestamp: Date.now()
45	};
46	reportErrorToServer(errorInfo);
47	throw error;
48	}
49	}

全站分卷索引 · 13 卷