SuperAPI AI 工具集

sentry-browser-sdk

前端与建站

查看项目

更新于 10-16 08:47

技能介绍

该技能是 Sentry 浏览器 SDK 的向导,用于为浏览器端 JavaScript 项目完成完整配置。适用场景包括:要求“为网站添加 Sentry”、安装 @sentry/browser 或配置 Loader Script,以及 WordPress、Shopify、Squarespace、静态 HTML 等无框架专项 SDK 的项目,需要错误监控、追踪、会话回放或日志时。

流程分三步。第一步检测:先检查是否已有框架。若检测到 next、react、vue、@angular/core、@sveltejs/kit、svelte、@remix-run、nuxt、astro、ember-source,应改用对应框架 SDK;若检测到 express、fastify、@nestjs/core、koa,则属 Node.js 服务端,应改用 Node 或 NestJS 技能。只有未检测到框架才继续。随后判断安装方式:存在 package.json 与打包器走 npm;WordPress、静态 HTML 等无 npm 走 Loader Script;无 Loader Script 权限走 CDN bundle。

第二步推荐:核心为错误监控(始终建议)、追踪(交互页面建议)、会话回放(面向用户的应用建议);可选用户反馈、日志、性能分析(beta,仅 Chromium,需 Document-Policy: js-profiling 响应头)。

第三步实施。Path A:npm install @sentry/browser --save,创建 src/instrument.ts 并在入口文件首行导入,配合 Vite/webpack/Rollup/esbuild 插件上传 source maps;espbuild 插件不完全支持 splitting 时改用 sentry-cli。Path B:在 Sentry 界面获取 Loader Script 并置于所有脚本之前,可在 window.sentryOnLoad 中配置;限制为不支持 Sentry.logger.*、无框架特性、追踪头仅对加载后的 fetch 生效,版本经 CDN 缓存需数分钟传播。Path C:按需选择 CDN bundle 并手动初始化。CSP 需允许 script-src 含 browser.sentry-cdn.com 与 js.sentry-cdn.com,connect-src 含 *.sentry.io。

版本与 API 以 @sentry/browser ≥10.0.0 为准,实施前请对照 docs.sentry.io/platforms/javascript/ 核实。其余细节暂未提供。