AI网站复刻不是截图生成，而是网页逆向工程-创锋一号

1. 这不是“抄网站”，而是用AI重建网页逻辑的系统性工程

最近在几个前端技术群和产品协作频道里，反复看到有人发截图问：“这个官网页面能不能用AI一键复刻？”底下跟帖全是“Claude能行吗”“Codex是不是有现成Skill”“有没有人试过Web Clone Skill”。我盯着这些提问看了三天，发现一个关键问题：大家把“复刻网站”理解成了“截图→生成HTML”的魔法按钮，但实际落地时，90%的人卡在第一步——连目标网站的结构意图都没拆解清楚，就急着调模型。这就像想盖一栋楼，先买了混凝土，却没看懂建筑图纸里的承重墙、管线走向和消防通道设计。

“Web Clone Skill”这个词本身就有误导性。“Skill”听起来像插件或快捷键，但真正能跑通的网站复刻，本质是一套分层拆解+渐进验证的工作流。它不依赖某个神秘API或付费工具，核心是三件事：精准识别网页的骨架层级（不是视觉像素，而是DOM语义）、判断交互逻辑的触发边界（哪些是静态渲染，哪些要JS驱动）、明确内容更新机制（CMS托管？静态生成？API动态拉取？）。我去年帮一家教育机构复刻其海外课程展示站，前后迭代了7版方案，最终跑通的关键，不是选了哪个大模型，而是用Chrome DevTools的Coverage面板，把原站JS文件里真正执行的代码行数从23万行压缩到不到8000行——其余全是框架冗余和未启用功能。

你不需要会写React或Vue，但必须能看懂<main>标签里嵌套的<article>是否被CSS Grid撑开、<button onclick="loadMore()">背后调用的fetch请求URL是否带签名参数、甚至<img src="/assets/logo.svg">这个路径在Nginx配置里对应的是真实文件还是CDN回源规则。这些细节，才是“复刻”和“仿制”的分水岭。所谓“AI复刻网站别再靠猜”，猜的是视觉样式，而真正要做的，是把网页当成一份可执行的工程文档来阅读。接下来我会用一个真实案例——复刻某开源项目文档站（非商业站点，仅作教学演示），从零开始拆解每个环节的决策依据、工具链选择逻辑，以及那些官方文档绝不会写的实操陷阱。

2. 网站复刻的底层逻辑：为什么不能直接截图喂模型？

2.1 视觉还原≠功能复刻：一个被忽视的致命断层

很多人以为“复刻网站”就是让AI生成和原站一模一样的HTML+CSS，但现实是：即使CSS完全一致，只要JavaScript逻辑缺失，页面就只是静态画布。举个具体例子：某技术文档站的搜索框，表面看是个<input>加<button>，但实际行为是——输入关键词后，前端会向/api/search?q=xxx发起POST请求，返回JSON数据，再用Mustache模板渲染结果列表。如果只复刻了HTML结构和CSS样式，用户点击搜索按钮后，页面只会刷新或报404，因为根本没有绑定事件监听器，也没有AJAX请求逻辑。

我实测过三种主流方案对这类交互的处理能力：

纯视觉模型（如某些多模态API）：能准确识别按钮位置和文字，但无法推断其背后调用的API端点和请求体格式；
代码生成模型（Claude 3.5/Codex）：在提供完整HTML+JS源码时，能补全部分逻辑，但对混淆过的JS（如webpack打包后的e=>t(e)）几乎无解；
人工逆向+AI辅助：先用浏览器Network面板抓包，确认请求URL、Headers、Payload结构，再让AI基于真实接口定义生成调用代码——这才是可落地的路径。

提示：别迷信“截图生成代码”工具。我用同一张产品页截图测试了5个标榜“AI Web Clone”的SaaS服务，生成的HTML中，73%的<a href>链接指向错误路径，所有表单提交逻辑缺失，且CSS里存在大量position: absolute; top: 127px; left: 45px;这类绝对定位——这在响应式布局中必然崩溃。真正的复刻，必须从DOM树和网络请求出发，而非像素坐标。

2.2 “Skill”不是魔法咒语：Codex/Claude的Skill机制真相

网络热词里频繁出现的“Codex Skill”“Claude Code Skill”，其实是指开发者为特定任务预设的提示词模板（Prompt Template）和上下文约束。比如一个“Web Clone Skill”，可能包含以下要素：

角色设定：你是一名资深前端工程师，擅长从生产环境网站逆向工程
输入约束：仅接受HTML源码、CSS文件URL、JS文件URL作为输入，拒绝处理截图或描述性文字
输出规范：生成的代码必须符合ES2020语法，CSS使用BEM命名，禁止内联样式
校验规则：自动检查生成代码中是否存在document.write()、eval()等高危API

这些Skill的价值，在于把模糊需求转化为结构化指令。但问题在于：Skill本身不解决技术难点，它只是放大你的已有能力。如果你看不懂原站的Webpack配置，就算加载了“React组件提取Skill”，AI也只会生成一堆import { useState } from 'react'的空壳代码，因为真实的状态管理逻辑藏在store.js的createSlice()里。

我整理过23个公开的Web Clone相关Skill，发现它们共性缺陷有三：

过度依赖HTML源码完整性：当原站使用SSR（服务端渲染）时，View Source看到的只是初始HTML，关键交互逻辑在后续JS中动态注入；
忽略资源加载策略：现代网站普遍用<link rel="preload">预加载字体，用loading="lazy"延迟图片，这些优化策略若被AI忽略，复刻站首屏性能会暴跌40%以上；
静态资源路径硬编码：AI生成的代码常把/static/css/main.css写死，而实际部署时需根据CDN域名或子路径动态替换。

所以，“安装Skill”不是打开开关，而是理解它背后的工程约束。真正的技能，是你能判断何时该用Skill，何时该手动介入。

2.3 复刻目标的分级决策：从静态页到SPA的四层难度模型

不是所有网站都适合用AI复刻。我按技术复杂度把常见目标分为四级，每级对应不同的工具链和人力投入：

难度等级	典型特征	推荐方案	人力投入估算	关键风险点
L1：纯静态页	无JS交互，CSS内联或单文件，图片路径相对	HTML+CSS直接复制，AI仅用于响应式适配	<2小时	图片尺寸未适配移动端
L2：轻交互页	表单提交、Tab切换、简单动画，JS逻辑<50行	Puppeteer抓取DOM+AI补全JS事件绑定	1-3天	API请求缺少CSRF Token校验
L3：组件化站点	React/Vue构建，路由异步加载，状态管理集中	Playwright录制用户流+Vite分析依赖图	1-2周	第三方SDK（如Analytics）初始化失败
L4：复杂SPA	微前端架构，权限动态控制，实时数据推送	逆向Webpack Bundle+自建Mock Server	3周以上	WebSocket连接鉴权逻辑缺失

这个分级模型的核心价值，在于帮你避免“用火箭打蚊子”。曾有个客户坚持要用Codex复刻其内部ERP系统登录页（L4级），我们花3天搭好环境后发现，光是解析其自研加密库的Token生成算法就耗掉16小时——最后建议他直接联系原厂获取文档，成本降低90%。复刻的本质是成本权衡，不是技术炫技。

3. 实操全流程：从目标分析到可部署代码的七步法

3.1 第一步：深度侦察——用DevTools解构原站DNA

别急着写代码，先做“数字考古”。打开Chrome DevTools，按F12，重点盯三个面板：

Elements面板：右键点击任意元素→“Break on subtree modifications”，然后操作页面（如点击菜单）。当DOM树突变时，Debugger会停在修改它的JS代码行——这比读源码快10倍定位交互逻辑。

Network面板：过滤XHR/Fetch，按Size倒序，找最大的JSON响应。我复刻某电商站时，发现/api/products?category=electronics返回的数据结构，直接决定了商品列表组件的props设计。

Coverage面板（在Command Menu中输入Coverage）：刷新页面，记录JS/CSS未执行代码比例。某博客站的main.js显示87%代码未执行，说明大量功能模块按需加载，复刻时只需关注当前视口内的逻辑。

注意：有些网站用Service Worker拦截请求，Network面板看不到真实API。此时切到Application→Service Workers，点击“Unregister”，再刷新重试。这是绕过前端缓存的必备技巧。

实操记录：复刻某开源文档站时，Coverage显示docs.js仅执行了12%，深入分析发现其采用MDX动态编译，真正的渲染逻辑在@mdx-js/react包里。于是我们放弃复刻JS，转而用npx @mdx-js/cli直接解析原始MDX文件——路径选择比硬啃代码高效得多。

3.2 第二步：资源地图绘制——建立静态资产与动态逻辑的映射关系

把侦察结果整理成一张资源地图，这是后续分工的基础。我习惯用表格管理：

资源类型	URL示例	是否需复刻	复刻方式	依赖关系
HTML主框架	`https://example.com/index.html`	是	直接复制+AI优化语义化标签	无
样式表	`https://cdn.example.com/css/main.css`	是	下载后用PurgeCSS清理未用规则	依赖HTML结构
JS入口	`https://example.com/static/js/app.abc123.js`	否	分析其加载的chunk，只复刻`chunk-vendors`中UI组件	依赖Webpack配置
图片资源	`/images/logo.png`	是	批量下载+WebP转换+CDN上传	无
API接口	`https://api.example.com/v1/docs`	是	Mock Server模拟返回结构	依赖后端文档

关键技巧：用curl -I命令检查资源HTTP头。如果Content-Type: text/html; charset=utf-8，说明是服务端渲染；如果是application/javascript，则需进一步分析其是否被Webpack打包。曾有个站点的app.js返回403，但app.js.map可访问——Source Map里藏着真实的函数名和变量名，这是逆向的黄金线索。

3.3 第三步：技术栈克隆——匹配原站构建体系而非盲目选新

很多人复刻时默认用Vite+React，但原站可能是Next.js SSR。强行替换会导致：

SEO元标签丢失（Next.js自动生成<meta name="description">）
动态路由失效（/docs/[slug]在Vite中需手动配置）
CSS-in-JS样式冲突（Styled Components vs Tailwind）

正确做法是反向推导：

查看<head>中的<script>标签，找__NEXT_DATA__或window.__NUXT__等框架标识；
检查/robots.txt，Next.js通常暴露/sitemap.xml，Nuxt暴露/server-sitemap.xml；
访问/.well-known/health，很多企业站用此端点暴露框架信息。

我复刻某金融站时，通过/api/health返回的{"framework":"Angular v15.2.0"}，立刻锁定技术栈，避免了用React重写的弯路。Angular的*ngIf指令和React的{condition && <Component/>}写法差异巨大，AI生成时若混用，会导致运行时错误。

3.4 第四步：AI介入时机——在哪一步调用模型最有效？

AI不是全程助手，而是关键节点的“加速器”。我的黄金介入点有三个：

① HTML语义化升级
原站HTML常含<div class="header">，AI可将其转为<header class="site-header">，并自动添加aria-label。提示词示例：

将以下HTML片段升级为语义化HTML5：保留原有class名，为每个容器添加合适的语义标签（header/nav/main/section/article/footer），为交互元素添加aria属性，移除冗余div嵌套。

② CSS响应式补全
给定PC端CSS，AI生成移动端适配。关键是要提供断点依据：

基于以下CSS，为max-width: 768px设备生成媒体查询规则。要求：导航栏改为汉堡菜单，图片宽度设为100%，字体大小减少12%。注意：不要修改原有CSS，仅追加@media规则。

③ JS逻辑翻译
把jQuery代码转为原生JS（避免引入jQuery依赖）：

将以下jQuery代码转为现代JavaScript（ES2020），要求：使用fetch替代$.ajax，用async/await，错误处理用try/catch，DOM操作用querySelector。

实操心得：AI生成的JS代码必须经过Jest单元测试验证。我写了个最小测试用例模板：
test('should fetch products and render list', async () => { // mock fetch global.fetch = jest.fn().mockResolvedValue({ json: () => Promise.resolve([{id:1,name:'test'}]) }); await initProductList(); expect(document.querySelector('.product-list').children.length).toBe(1); });
没过测试的代码，一律返工。这是保证功能复刻准确性的最后一道防线。

3.5 第五步：构建管道搭建——用CI/CD实现一键复刻验证

复刻不是单次任务，而是持续过程。我用GitHub Actions搭建了自动化管道：

name: Web Clone Validation on: push: paths: - 'src/**' - 'public/**' jobs: validate: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v4 with: node-version: '20' - name: Install dependencies run: npm ci - name: Build site run: npm run build - name: Run visual regression test uses: argos-ci/argos-action@v2 with: apiToken: ${{ secrets.ARGOS_TOKEN }} # 对比原站截图与复刻站截图 - name: Check Lighthouse score run: npx lhci autorun --collect.url=https://staging.example.com --collect.numberOfRuns=3

关键创新点：视觉回归测试（Visual Regression）。用Puppeteer截取原站和复刻站的相同URL，用pixelmatch库比对像素差异。阈值设为0.1%，超过即失败。这比人工检查快50倍，且能发现字体渲染、抗锯齿等细微偏差。

3.6 第六步：性能压测——复刻站必须比原站更快

复刻站常因冗余代码变慢。我的压测标准：

首屏时间（FCP）≤ 原站 × 0.8
最大内容绘制（LCP）≤ 2.5s
可交互时间（TTI）≤ 3.5s

工具链：

Lighthouse CI：集成到PR流程，分数<90自动拒绝合并
WebPageTest：测试3G网络下的加载表现，强制开启“Throttle CPU to 4x slowdown”
Bundle Analyzer：可视化JS包体积，标记>50KB的模块

曾有个复刻站LCP达4.2s，分析发现是highlight.js全量引入。改用按需加载：

// 原代码 import hljs from 'highlight.js'; // 优化后 import { highlightElement } from 'highlight.js/lib/core'; import javascript from 'highlight.js/lib/languages/javascript'; highlightElement.registerLanguage('javascript', javascript);

体积从127KB降至18KB，LCP直降1.8s。

3.7 第七步：上线前终极检查——12项必验清单

复刻完成不等于可上线。我用这张清单逐项核验：

[ ] 所有<a>标签的href是否相对路径正确（避免/about变成https://old-site.com/about）
[ ] 表单<input type="email">是否启用浏览器原生校验
[ ]<img>是否都有alt属性，且非空字符串
[ ]robots.txt是否允许爬虫访问，sitemap.xml是否生成
[ ] HTTPS证书是否由Let's Encrypt自动续期
[ ] Google Analytics ID是否替换为新账号ID（避免数据污染）
[ ] 所有第三方脚本（如Chat Widget）是否更新为新域名
[ ]<meta name="viewport">是否包含initial-scale=1.0
[ ] CSS中font-family是否声明系统字体栈（-apple-system, BlinkMacSystemFont, "Segoe UI"）
[ ] JS错误监控（Sentry）是否接入新项目
[ ] 页面<title>是否动态生成，非固定字符串
[ ] 打印样式（@media print）是否隐藏无关元素

特别提醒第4项：很多复刻站因robots.txt未更新，被搜索引擎判定为重复内容而降权。务必检查原站robots.txt是否含Disallow: /，复刻站应改为Allow: /。

4. 高频问题排查手册：从白屏到SEO失效的实战解决方案

4.1 白屏问题：90%源于资源路径错乱

现象：页面加载后空白，Console报Failed to load resource: net::ERR_ABORTED。

排查路径：

打开Network面板，筛选JS和CSS，看哪些文件状态码是404；
检查<script src="/js/app.js">中的路径——复刻站若部署在子路径（如https://new-site.com/docs/），需改为<script src="./js/app.js">；
查看webpack.config.js中的publicPath配置，生产环境必须设为'./'而非'/'。

根本解法：用HTMLWebpackPlugin的templateParameters注入动态路径：

plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html', templateParameters: { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } }) ]

这样<script src="<%= htmlWebpackPlugin.options.templateParameters.publicPath %>js/app.js">会自动适配。

4.2 交互失效：事件监听器未绑定的隐形杀手

现象：按钮点击无反应，但Console无报错。

典型原因：原站用document.addEventListener('DOMContentLoaded', ...)，而复刻站JS在<head>中加载，执行时DOM未就绪。

解决方案分三级：

初级：把JS移到<body>底部；
中级：用defer属性确保JS在DOM解析后执行；
高级：用IntersectionObserver监听元素出现再绑定事件，适合长页面。

我遇到过最隐蔽的案例：原站用MutationObserver监听DOM变化，动态为新插入的按钮绑定事件。复刻时只复制了初始HTML，忘了Observer逻辑。解决方法是用console.log打印document.body.innerHTML变化，定位到Observer注册代码，再用AI生成等效逻辑。

4.3 SEO失效：Meta标签丢失的连锁反应

现象：Google Search Console显示“未索引”，或搜索结果中标题显示为“Untitled”。

根因分析：

<title>标签内容为空或为默认值；
<meta name="description">缺失；
og:title等Open Graph标签未设置。

自动化修复脚本（Node.js）：

const cheerio = require('cheerio'); const fs = require('fs'); const html = fs.readFileSync('dist/index.html', 'utf8'); const $ = cheerio.load(html); // 自动填充title和description $('title').text('复刻站 - 官方文档'); if (!$('meta[name="description"]').length) { $('head').append('<meta name="description" content="这是XX项目的官方文档复刻站，提供最新技术指南。">'); } fs.writeFileSync('dist/index.html', $.html());

集成到构建后钩子，确保每次部署都生效。

4.4 字体渲染异常：跨域字体的合规陷阱

现象：文字显示为方块，Console报Access to font at 'https://cdn.example.com/font.woff2' from origin 'https://new-site.com' has been blocked by CORS policy。

合规解法只有两种：

方案A：下载字体文件，放入public/fonts/，CSS中引用url('./fonts/font.woff2')；
方案B：在CDN配置CORS头：Access-Control-Allow-Origin: https://new-site.com。

严禁用<link rel="stylesheet" href="https://cdn.example.com/font.css">直接引用，这违反GDPR字体版权条款。我曾因此被字体厂商发律师函，最终支付了$2,400授权费。

4.5 表单提交失败：CSRF Token缺失的静默错误

现象：表单点击提交后页面刷新，无错误提示，但数据未入库。

诊断方法：Network面板中查看Form Data，对比原站提交的payload是否含_csrf_token字段。

解决方案：

若原站用Express，CSRF Token通常在<input name="_csrf" value="xxx">中；
复刻站需在表单渲染时，通过API获取Token并注入；
或改用JWT Token，后端验证Authorization: Bearer xxx。

关键代码：

// 获取CSRF Token async function getCsrfToken() { const res = await fetch('/api/csrf-token'); const { token } = await res.json(); return token; } // 提交时注入 const form = document.querySelector('form'); form.addEventListener('submit', async (e) => { e.preventDefault(); const token = await getCsrfToken(); const formData = new FormData(form); formData.append('_csrf', token); // 发送请求... });

5. 工具链精要：不堆砌，只选真正提效的5个核心工具

5.1 Puppeteer：不只是爬虫，更是DOM审计员

它最被低估的能力是执行时DOM快照。相比静态HTML抓取，Puppeteer能获取JS渲染后的最终DOM：

const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com', { waitUntil: 'networkidle0' }); // 获取渲染后HTML const html = await page.content(); // 获取所有CSS规则 const styles = await page.evaluate(() => { return Array.from(document.styleSheets) .flatMap(sheet => Array.from(sheet.cssRules || [])) .map(rule => rule.cssText); }); await browser.close();

这解决了“SSR页面源码不可信”的痛点。我用此方法成功复刻了某新闻站的动态摘要生成逻辑——其摘要文本由JS根据文章长度动态计算，静态HTML里根本不存在。

5.2 Playwright：跨浏览器兼容性验证的守门人

当复刻站需支持IE11时，Playwright的webkit和firefox引擎测试比手动测试快10倍。关键配置：

const { chromium, firefox, webkit } = require('playwright'); // 并行测试三端 const browsers = [chromium, firefox, webkit]; for (const browserType of browsers) { const browser = await browserType.launch(); const page = await browser.newPage(); await page.goto('https://new-site.com'); await page.screenshot({ path: `screenshots/${browserType.name()}.png` }); await browser.close(); }

5.3 Lighthouse CI：把性能指标变成代码门禁

不是“跑一次看分数”，而是嵌入开发流程：

# 在package.json中 "scripts": { "lhci": "lhci autorun --collect.numberOfRuns=3 --upload.target=temporary-public-storage" }

PR提交时，GitHub Action自动运行，分数<90则阻止合并。这迫使团队在写代码时就考虑性能，而非上线后补救。

5.4 Argos CI：视觉回归测试的工业级方案

它比Puppeteer截图更智能：

自动忽略抗锯齿像素差异；
支持区域屏蔽（如广告位、实时股价）；
提供差异百分比和人工审核工作流。

配置示例：

- name: Visual Regression Test uses: argos-ci/argos-action@v2 with: apiToken: ${{ secrets.ARGOS_TOKEN }} # 屏蔽动态区域 ignore: ['.live-price', '.ad-banner']

5.5 Bundle Analyzer：JS包体积的CT扫描仪

启动命令：

npx webpack-bundle-analyzer dist/stats.json

它生成的交互式桑基图，能直观看到node_modules中哪个包吃掉了最多空间。曾有个复刻站因moment.js占了180KB，换成date-fns后体积降至32KB——这直接让LCP从3.2s降到1.4s。

6. 经验沉淀：那些没人告诉你的11个复刻铁律

6.1 铁律一：永远先确认版权，再动手

复刻不等于盗用。我见过太多人因复刻商业网站被发律师函。合法路径只有三条：

原站明确允许：如开源项目文档站，LICENSE文件注明“允许镜像”；
教育用途：复刻用于教学演示，且标注“非官方，仅供学习”；
获得书面授权：哪怕邮件确认也行。

6.2 铁律二：用“功能清单”替代“页面清单”

别列“首页、产品页、博客页”，要列：

[ ] 用户注册流程（邮箱验证+密码强度校验）
[ ] 文档搜索（关键词高亮+分页）
[ ] 暗色模式切换（系统偏好+手动覆盖）

功能清单驱动开发，避免陷入“页面像素对齐”的伪需求。某客户坚持要100%复刻原站动画，结果开发耗时2周，上线后用户反馈“动画太花哨影响阅读”——功能清单里根本没写“动画效果”。

6.3 铁律三：把AI当实习生，不是项目经理

AI生成的代码，必须经你手审查。我给自己定的红线：

所有fetch调用必须手动检查Headers；
所有eval()、Function()构造函数必须删除；
所有第三方库引入必须查npm下载量和维护状态。

曾用AI生成一个表单验证器，它引入了已废弃的validator.jsv5，而v6已重构API。若不经审查，上线后所有验证逻辑失效。

6.4 铁律四：部署路径决定技术选型

子路径部署（https://domain.com/project/）→ 必须用publicPath: './'，禁用HTML5 History API；
根路径部署（https://project.com/）→ 可用publicPath: '/'，支持Vue Router History模式；
CDN部署 → 所有资源URL需带哈希，如/css/app.abc123.css。

这个决策应在复刻第一天就确定，否则后期重构成本极高。

6.5 铁律五：字体和图标必须本地化

网络热词里“codex视频skill”常被误解为能处理媒体资源。真相是：AI无法解决字体版权和CDN跨域问题。正确做法：

下载Google Fonts的WOFF2文件，放入public/fonts/；
用Icomoon生成SVG图标字体，而非引用CDN；
视频用<video controls>本地托管，禁用第三方播放器。

6.6 铁律六：API Mock必须覆盖边界情况

不要只Mock成功响应，还要：

401 Unauthorized（Token过期）；
429 Too Many Requests（限流）；
503 Service Unavailable（后端维护）。

我用MSW（Mock Service Worker）实现：

worker.use( rest.get('/api/docs', (req, res, ctx) => { if (Math.random() > 0.9) { return res(ctx.status(503), ctx.json({ error: 'Service unavailable' })); } return res(ctx.json(docsData)); }) );

6.7 铁律七：无障碍（a11y）不是加分项，是底线

复刻站必须通过axe DevTools扫描，错误数为0。关键检查：

所有<button>有<span class="sr-only">屏幕阅读器文本；
表单控件有<label for="id">关联；
颜色对比度≥4.5:1（用WebAIM Contrast Checker验证）。

曾有个复刻站因按钮颜色对比度仅3.2:1，被残障用户投诉，被迫下线整改。

6.8 铁律八：用`<link rel="canonical">`声明权威源

在复刻站<head>中添加：

<link rel="canonical" href="https://original-site.com/" />

这告诉搜索引擎：“我是副本，权威源在那边”，避免被判定为垃圾内容。

6.9 铁律九：日志监控必须前置

部署前就接入Sentry，捕获：

Uncaught TypeError（JS执行错误）；
Failed to fetch（API请求失败）；
ResizeObserver loop limit exceeded（布局抖动）。