将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
在Dify中接入Sentry需三步：一安装@sentry/nextjs依赖；二配置sentry.client.config.ts并用Sentry.ErrorBoundary包裹组件；三上传Source Map（Vercel自动或Webpack插件手动）并设置告警与上下文。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Dify项目中接入Sentry SDK
你需要让Dify托管的Next.js应用在浏览器端自动捕获未处理的JS错误、Promise拒绝和资源加载失败，并上报到Sentry服务。
第一步：安装Sentry依赖。在项目根目录执行：npm install @sentry/nextjs @sentry/tracing。注意必须使用@sentry/nextjs而非通用React SDK，否则无法兼容Next.js的SSR和App Router生命周期。
第二步：创建sentry.client.config.ts文件，写入初始化配置：
import * as Sentry from "@sentry/nextjs";<br>Sentry.init({<br> dsn: "https://xxx@o123.ingest.sentry.io/123456",<br> environment: process.env.NEXT_PUBLIC_SENTRY_ENV || "development",<br> release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,<br> tracesSampleRate: 0.1,<br> replaysSessionSampleRate: 0.1,<br> replaysOnErrorSampleRate: 1.0<br>});
第三步：在app/providers.tsx（或app/layout.tsx顶层组件）中包裹Sentry.ErrorBoundary，确保所有客户端组件都在其子树内渲染。这一步不可跳过，否则Error Boundary无法生效。
配置Source Map实现错误精准定位
没有Source Map时，Sentry上报的堆栈全是压缩后的main.xxxxx.js:123:456，根本无法对应到源码行。必须上传构建产物对应的映射文件。
方法一：使用Vercel自动上传（仅限部署在Vercel时有效）
在vercel.json中添加："builds": [{"src": "next.config.js", "use": "@vercel/next-js"}]，并确保next.config.js已启用productionBrowserSourceMaps: true。Vercel会在构建后自动探测并上传.map文件至Sentry。
方法二：手动上传（适用于自建Dify或非Vercel部署）
安装插件：npm install --save-dev @sentry/webpack-plugin；
在next.config.js中配置插件：
const SentryWebpackPlugin = require("@sentry/webpack-plugin");<br>module.exports = {<br> webpack: (config, { isServer }) => {<br> if (!isServer) {<br> config.plugins.push(<br> new SentryWebpackPlugin({<br> authToken: process.env.SENTRY_AUTH_TOKEN,<br> org: "your-org-slug",<br> project: "your-project-slug",<br> url: "https://sentry.yourdomain.com/",<br> include: ".next/static/chunks",<br> ignore: ["node_modules", "webpack.config.js"]<br> })<br> );<br> }<br> return config;<br> }<br>};
【SENTRY_AUTH_TOKEN必须设为环境变量且仅在CI环境中注入，切勿硬编码或提交至Git】
设置错误告警与上下文增强
默认情况下Sentry只收集错误，不发通知。你需要主动配置告警规则，才能在问题爆发时第一时间响应。
① 进入Sentry项目设置 → Alerts → Create Alert Rule；
② 触发条件选“Errors”，设置“Number of events in 5 minutes > 5”；
③ 在Actions中添加Slack通知，填入Webhook URL；
④ 点击Save Rule完成创建。
为提升排查效率，需在错误发生时注入关键业务上下文。在全局异常捕获点（如middleware.ts或_app.tsx）中添加：
Sentry.setContext("user", { id: userId, email: userEmail });<br>Sentry.setTag("feature", "chat-widget");<br>Sentry.setExtra("requestId", reqId);
这样每条错误事件都会携带用户身份、功能模块和请求ID，点击Sentry Issue详情页即可直接关联后端日志。
验证前端错误是否成功上报
在任意客户端组件中插入测试代码：throw new Error("Test Dify Sentry integration")，然后打开浏览器控制台，观察Network标签页是否有o123.ingest.sentry.io的POST请求发出且返回200。
如果无请求，检查process.env.NEXT_PUBLIC_SENTRY_ENV是否为空——Sentry SDK默认会屏蔽development环境上报，需显式设为local或staging才允许发送。
若请求发出但Sentry后台未显示，登录Sentry检查Project的Inbound Filters是否启用了“Filter out errors from localhost”。临时关闭该选项，再刷新页面重试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
