Sentry JavaScript 的 Solid E2E 测试模板：从模板运行到 Playwright 全链路验证

可观测性【免费下载链接】sentry-javascriptOfficial Sentry SDKs for JavaScript项目地址https://gitcode.com/gh_mirrors/se/sentry-javascript点击查看免费下载sentry/solidSDK 的质量保障依赖一套基于 Playwright 的端到端E2E测试其中针对 Solid 框架的测试应用位于dev-packages/e2e-tests/test-applications/solid目录其 README 说明了该模板的安装、运行、构建与部署方式。本篇以这份 README 为主体结合模板的实际源码完整讲解如何安装和运行这个 Solid 模板、它的路由结构、package.json中各脚本含 README 未列出的 E2E 专用脚本的真实作用以及 Sentry SDK 在模板中是如何初始化、上报事件并被 Playwright 断言的整条链路。模板定位Solid 路由模板 Sentry SDK 验证载体README 对模板的定位是This templates goal is to showcase the routing features of Solid. It also showcase how the router and Suspense work together to parallelize data fetching tied to a route via the.data.tspattern.即模板最初源自 Solid 官方路由模板用于展示 Solid 的路由能力以及solidjs/router与Suspense配合、按路由并行化数据获取.data.ts模式的用法。而在 Sentry JavaScript 仓库中这个模板被改造成了Solid 场景下验证sentry/solidSDK 的 E2E 测试宿主应用。从 路由定义文件 可以看到当前实际的路由结构import { lazy } from solid-js; import ErrorBoundaryExample from ./pages/errorboundaryexample; import Home from ./pages/home; export const routes [ { path: /, component: Home, }, { path: /user/:id, component: lazy(() import(./pages/user)), }, { path: /error-boundary-example, component: ErrorBoundaryExample, }, { path: **, component: lazy(() import(./errors/404)), }, ];四个路由各有分工首页/、带动态参数的/user/:idlazy懒加载、错误边界演示页/error-boundary-example以及**通配路由兜底到 404 页面。页面顶部导航栏定义在 pageroot.tsx其中包含指向 Home、Error Boundary Example 与/error的A链接——这些链接正是 Playwright 用例tests 目录 下的errors.test.ts、errorboundary.test.ts、performance.test.ts中模拟用户点击的入口。安装依赖pnpm 维护的模板依赖README 的Usage一节给出了依赖管理方式$ npm install # or pnpm install or yarn install需要注意两点模板依赖通过pnpm up -Lri统一维护这就是目录中存在pnpm-lock.yaml的原因。README 明确说明任意包管理器都可以工作这个 lock 文件在克隆模板后可以安全删除。本模板作为仓库内 E2E 测试应用package.json 中的 Sentry 依赖并非来自 npm registry而是仓库打包流程产出的本地 tarballdependencies: { solid-js: ^1.8.18, sentry/solid: file:../../packed/sentry-solid-packed.tgz }也就是说E2E 测试验证的是当前仓库构建出的sentry/solid产物而非已发布的线上版本——这是 Sentry JavaScript E2E 测试体系的典型做法。其余关键 devDependencies 包括solid-js配套构建链vite^5.4.11、vite-plugin-solid^2.11.6、样式tailwindcss、postcss、autoprefixer、调试工具solid-devtools以及测试框架playwright/test~1.63.0。模板的构建配置Vite Solid 插件vite.config.ts 非常精简import { defineConfig } vite; import solidPlugin from vite-plugin-solid; export default defineConfig({ plugins: [solidPlugin()], build: { target: esnext, }, envPrefix: PUBLIC_, });solidPlugin()由vite-plugin-solid提供负责.tsx的 Solid 编译build.target: esnext表示产物不做语法降级envPrefix: PUBLIC_限定 Vite 只暴露PUBLIC_前缀的环境变量到客户端——这与下文Sentry.init中使用的import.meta.env.PUBLIC_E2E_TEST_DSN直接对应两者配合保证了 DSN 能安全地注入到浏览器端代码中。样式侧则由 tailwind.config.ts 与 postcss.config.js 提供 Tailwind CSS 支持页面中大量classbg-gray-100 ...即来自它。Available ScriptsREADME 列出的脚本与仓库实际脚本README 的Available Scripts一节列出了开发态运行与生产构建两个核心命令package.json在此基础上补充了 E2E 专用脚本。逐一说明npm run dev或npm start开发模式README 原文Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.对应脚本定义见 package.jsondev: vite, start: vitedev与start都直接启动 Vite 开发服务器保存源码后页面热更新重载用于本地手动调试模板。npm run build生产构建README 原文Builds the app for production to thedistfolder. It correctly bundles Solid in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.对应脚本build: vite build产物输出到dist目录启用压缩且文件名带内容哈希达到可直接部署的状态。仓库中补充的 E2E 专用脚本package.json中还定义了 README 未提及的一组 E2E 流水线脚本它们是理解整个测试链路的关键clean: npx rimraf node_modules pnpm-lock.yaml dist, preview: vite preview, test:prod: TEST_ENVproduction playwright test, test:build: pnpm install pnpm build, test:assert: pnpm test:prodtest:build先安装依赖再执行生产构建供 E2E 编排器见 dev-packages/e2e-tests 根目录 的prepare.ts/run.ts在打包验证阶段使用test:prod以TEST_ENVproduction运行 Playwright 测试——注意 E2E 断言的对象是构建后的生产产物而非开发服务器test:assertE2E 框架在事件代理收到预期事件后调用该脚本完成断言本质上等价于test:prod。Sentry 初始化模板中的完整配置模板入口 src/index.tsx 展示了sentry/solid的完整初始化配置这是 README 所述模板被改造为 Sentry 测试应用的核心import * as Sentry from sentry/solid; import { render } from solid-js/web; import App from ./app; import ./index.css; Sentry.init({ dsn: import.meta.env.PUBLIC_E2E_TEST_DSN, debug: true, environment: qa, // dynamic sampling bias to keep transactions integrations: [Sentry.browserTracingIntegration()], release: e2e-test, tunnel: http://localhost:3031/, // proxy server tracesSampleRate: 1.0, }); render(() App /, document.getElementById(root));逐项说明各配置的用途配置项取值作用dsnimport.meta.env.PUBLIC_E2E_TEST_DSN客户端注入的 DSN依赖vite.config.ts中envPrefix: PUBLIC_才会在构建产物中可见debugtrue开启调试日志便于排查 E2E 环境问题environmentqa按源码注释用于触发 dynamic sampling bias 以保留 transaction 事件integrations[Sentry.browserTracingIntegration()]启用浏览器端性能采集history 导航、fetch 等 tracing 集成releasee2e-test标记事件来源于 E2E 测试tunnelhttp://localhost:3031/事件不直接发往真实 Sentry而是发给本地代理服务器tracesSampleRate1.0100% 采样性能 trace确保每次运行都有 transaction 可供断言tunnel是本模板 E2E 机制的关键配套的 start-event-proxy.mjs 启动了一个本地事件代理import { startEventProxyServer } from sentry-internal/test-utils; startEventProxyServer({ port: 3031, proxyServerName: solid, });它与sentry-internal/test-utils即 dev-packages/test-utils配合负责拦截浏览器发出的 SDK 事件并转发/收集供测试断言使用。错误边界集成app.tsx 演示了sentry/solid的withSentryErrorBoundary能力const SentryErrorBoundary Sentry.withSentryErrorBoundary(ErrorBoundary);页面提供两个按钮分别触发不同路径的错误Throw caught error通过createSignal控制、在Throw组件onMount中抛出被错误边界捕获并渲染带 Reset 按钮的 fallback与Throw uncaught erroronClick中直接throw new Error(Error thrown from Solid E2E test app)走未捕获错误路径。这两条错误路径分别对应 tests/errors.test.ts 与 tests/errorboundary.test.ts 的断言场景而 tests/performance.test.ts 则验证browserTracingIntegration产生的 transaction。Playwright 配置与测试端口playwright.config.mjs 仅几行全部委托给仓库统一的getPlaywrightConfigimport { getPlaywrightConfig } from sentry-internal/test-utils; const config getPlaywrightConfig({ startCommand: pnpm preview --port 3030, port: 3030, }); export default config;由此可以确认 E2E 的端口约定3030端口由vite preview提供构建后应用的静态服务对应 README 中 build 产物的消费方式3031端口是事件代理。测试先访问localhost:3030上的应用应用内 SDK 把事件经tunnel发到localhost:3031再由test:assert/test:prod阶段断言事件内容正确。Deployment产物部署方式README 的Deployment一节给出部署指引You can deploy thedistfolder to any static host provider (netlify, surge, now, etc.)即npm run build生成的dist目录是纯静态产物可部署到任意静态托管平台。在本仓库语境下部署同样适用Playwright 正是通过vite preview等价于本地静态托管dist来加载生产构建进行测试的。小结与延伸阅读这份模板 README 的核心信息可以归纳为三条依赖用 pnpm 维护、dev/start开发态运行、build产出可部署的dist结合仓库源码后它的完整图景是——一个 Vite Solid 路由模板通过本地打包的sentry/solidtarball 完成 SDK 初始化DSN 注入、tracing 集成、100% 采样、本地事件隧道再经vite preview3030与事件代理3031被 Playwright 以生产模式断言从而在每次 SDK 变更时验证 Solid 框架下错误捕获、错误边界与性能追踪的真实行为。如需继续深入建议查看模板全部源码dev-packages/e2e-tests/test-applications/solidE2E 测试编排逻辑dev-packages/e2e-tests/run.ts 与 dev-packages/e2e-tests/prepare.ts共享测试工具Playwright 配置与事件代理实现dev-packages/test-utilssentry/solidSDK 源码packages/solid赞分享可观测性【免费下载链接】sentry-javascriptOfficial Sentry SDKs for JavaScript项目地址https://gitcode.com/gh_mirrors/se/sentry-javascript点击查看免费下载相关推荐sentry-javascript solid-tanstack-router e2e 测试应用Solid TanStack Router 路由实践与 Sentry 埋点验证sentry javascript solid tanstack router e2e 测试应用Solid TanStack Router 路由实践与 S可观测性Dashboard Icons 前端 Playwright E2E 测试实战从配置、运行到 SVG 颜色定制器验证Dashboard Icons 前端 Playwright E2E 测试实战从配置、运行到 SVG 颜色定制器验证 本篇技术指南以 dashboard icoUI组件前端MCP 服务LinuxDo Scripts代码架构解析理解现代浏览器扩展开发模式LinuxDo Scripts代码架构解析理解现代浏览器扩展开发模式 LinuxDo Scripts是一款功能持续更新的浏览器扩展为linux.do用户提供上一篇3个专业步骤解决华硕主板传感器识别难题硬件监控爱好者的风扇控制优化指南下一篇SEC-Edgar完整教程如何免费批量下载美国上市公司财报的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考