From monitor-sdk
前端监控上报 SDK 使用指南。当用户需要接入前端监控、异常上报、skywalking 监控时触发，包括：如何引入监控工具、注册监听器、主动上报异常、路由切换上报等。
npx claudepluginhub doublewater777/futures-plugins-frontend --plugin monitor-sdkThis skill uses the workspace's default tool permissions.
```html
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
<!-- 放在 <head> 首位 -->
<script src="//s.thsi.cn/cd/futures-frontend-fu-cdn/common/skywalking-tool/index.1.0.0.min.js" crossorigin="anonymous"></script>
<link href="xxx.css" crossorigin="anonymous">
<script src="xxx.js" crossorigin="anonymous"></script>
// vue.config.js
module.exports = {
crossorigin: 'anonymous',
// ...
}
在项目入口调用，建议在 main.js 中：
const initFemonitor = () => {
if (isDev) return; // 开发环境不监听
if (window.skywalkingTool) {
window.skywalkingTool.register({
rate: 1, // 采集率 0.1-1
service: 'futures-frontend-xxx-pod', // 业务标识
pagePath: window.location.pathname,
group: 'futures', // 部门标识
subGroup: 'webpage', // 子部门
enableSPA: true, // SPA 模式
hooks: {
reportHook: ({ data }) => {
return true;
},
filterHook: (data) => {
return true;
}
}
})
}
}
initFemonitor();
手动捕获的异常需要主动上报：
export const errorReport = (err, options = {}) => {
if (window.skywalkingTool) {
window.skywalkingTool.report({
err: err,
category: 'js',
grade: 'Error',
timeout: 1,
...options
});
}
}
SPA 项目路由切换时调用：
window.skywalkingTool.perform({
pagePath: location.hash.replace('#', '')
})
从 references/api.md 获取完整 API 文档：