可观测性【免费下载链接】sentry-javascriptOfficial Sentry SDKs for JavaScript项目地址https://gitcode.com/gh_mirrors/se/sentry-javascript点击查看免费下载本文以仓库中dev-packages/e2e-tests/test-applications/solidstart-spa这一 E2E 测试应用为样本完整讲解一个基于 Solid CLI 模板初始化的 SolidStart 项目如何创建、开发、构建与测试并结合该应用接入sentry/solidstart的真实配置展示 SPAssr: false模式下 Sentry 构建期插桩、事件代理与 Playwright 端到端验证的完整链路。读完后可掌握如何为 SolidStart 项目配置withSentry、instrument.server.ts与响应中间件以及 Sentry 仓库的 E2E 测试框架是如何跑通这套流程的。SolidStart 项目基础创建、开发与构建该应用的 README.md 沿用了 Solid CLI 官方模板的标准说明覆盖了 SolidStart 项目的全生命周期操作。创建项目SolidStart 项目由 Solid CLI 脚手架初始化# create a new project in the current directory npm init solidlatest # create a new project in my-app npm init solidlatest my-app本地开发安装依赖npm install、pnpm install或yarn之后启动开发服务器npm run dev # or start the server and open the app in a new browser tab npm run dev -- --open构建preset 机制SolidStart 通过 preset 为不同部署环境做构建优化。默认情况下npm run build生成一个可用npm start运行的 Node 应用使用其他 preset 时需要把对应 preset 加入package.json的devDependencies并在app.config.js中指定。单元测试模板说明测试基于vitest、solidjs/testing-library并用testing-library/jest-dom扩展 expect 自定义 matcher运行方式为npm test。本测试应用的 package.json 中同样保留了这些依赖vitest、solidjs/testing-library、testing-library/jest-dom并在 vitest.config.ts 中挂载了vite-plugin-solid插件、以[development, browser]作为 resolve conditions保证组件在 vitest 下按浏览器条件解析。这个应用与模板的关键差异SPA 模式接入 SentryREADME 描述的是通用 SolidStart 模板而该应用在仓库中的真实身份是sentry/solidstart包的端到端测试载体。它通过sentry/solidstart包接入 SDK且刻意启用了纯客户端SPA模式。app.config.ts 全部配置如下import { withSentry } from sentry/solidstart; import { defineConfig } from solidjs/start/config; export default defineConfig( withSentry({ ssr: false, middleware: ./src/middleware.ts, }), );两个关键参数ssr: false声明该应用为 SPA不启用服务端渲染。withSentry会据此调整构建期插桩策略只对客户端 bundle 做源码插桩middleware: ./src/middleware.ts指定 SolidStart 中间件入口用于在响应前附加 Sentry 所需的 HTTP 响应头。withSentry的实现位于 packages/solidstart/src/config/withSentry.ts。从源码结构看它做三件核心的构建期工作通过addSentryPluginToVite把 Sentry 的 Vite 插件注入vite配置支持配置是函数还是对象两种形态挂入一个 Nitro modulesentryNitroModule在rollup:before钩子中按autoInjectServerSentry选项选择插桩策略默认把instrument.server.ts加入构建产物addInstrumentationFileToBuild当设为top-level-import时在入口顶部注入import sentry/solidstartaddSentryTopImport设为experimental_dynamic-import时用动态import()包装 server 入口使 Sentry 先于业务代码初始化启用buildTimeInstrumentation时把INSTRUMENTED_MODULE_NAMES中的模块与 ioredis 的standard-as-callback加入externals.inline强制内联——因为被 externalized 的依赖不会经过 Orchestrion 的代码转换强制内联是构建期插桩能生效的前提。服务端初始化instrument.server.ts构建插桩会把 src/instrument.server.ts 编译进 server 产物该文件负责 Node 侧 SDK 初始化import * as Sentry from sentry/solidstart; Sentry.init({ dsn: process.env.E2E_TEST_DSN, environment: qa, // dynamic sampling bias to keep transactions tracesSampleRate: 1.0, // Capture 100% of the transactions tunnel: http://localhost:3031/, // proxy server debug: !!process.env.DEBUG, });三个参数在此场景下各有明确用途tunnel: http://localhost:3031/事件不直接发往 Sentry而是发到本地代理。start-event-proxy.mjs 用sentry-internal/test-utils的startEventProxyServer在 3031 端口启动该代理代理名为solidstart-spa测试断言即从代理处取事件无需真实 Sentry 账号tracesSampleRate: 1.0E2E 用例需要稳定捕获 100% 的事务供性能测试断言 spanenvironment: qa并开启动态采样偏向确保事务被保留。响应中间件src/middleware.ts 是 README 中app.configpreset 机制下 SolidStart 中间件能力的实际落地import { sentryBeforeResponseMiddleware } from sentry/solidstart; import { createMiddleware } from solidjs/start/middleware; export default createMiddleware({ onBeforeResponse: [sentryBeforeResponseMiddleware()], });onBeforeResponse钩子里挂上sentryBeforeResponseMiddleware()由它在每个 HTTP 响应发出前注入 trace 头如sentry-trace让前后端的 trace 上下文能够跨请求传递。该中间件实现位于 packages/solidstart/src/server/middleware.ts。如何运行这套 E2E 验证测试应用不是直接npm start跑起来的而是遵循 dev-packages/e2e-tests/README.md 描述的仓库级 E2E 流程在仓库根目录执行yarn build:tarball打包各包为 tarball 后用yarn test:run app-name运行单个测试应用。该应用 package.json 中的脚本正是这一流程的落点scripts: { build: vinxi build, preview: HOSTlocalhost PORT3030 vinxi start, start:import: HOSTlocalhost PORT3030 node --import ./.output/server/instrument.server.mjs .output/server/index.mjs, test:prod: TEST_ENVproduction playwright test, test:build: pnpm install pnpm build, test:assert: pnpm test:prod }其中start:import值得注意它用 Node 的--import标志在加载业务入口.output/server/index.mjs之前先执行instrument.server.mjs从启动层面验证「插桩文件先于业务代码初始化」这条链路在生产构建下可用这也是该测试应用区别于普通 SolidStart 模板的又一处定制。playwright.config.mjs 基于sentry-internal/test-utils的getPlaywrightConfig以pnpm start:import为启动命令、占用 3030 端口。测试用例覆盖了什么tests 目录下的 Playwright 用例按「服务端错误 / 客户端错误 / 错误边界 / 服务端性能 / 客户端性能」分组tests/errors.server.test.ts访问/server-error路由触发 server action 抛错等待代理收到事件并断言mechanism.type为auto.function.solidstart且handled: false——这直接验证了 Solid Start 服务端错误自动捕获机制tests/errors.client.test.ts、tests/errorboundary.test.ts验证客户端异常与 Solid 错误边界src/routes/error-boundary.tsx下事件的上报tests/performance.server.test.ts、tests/performance.client.test.ts在tracesSampleRate: 1.0前提下断言事务与 span 的结构验证 SPA 模式下的浏览器侧路由追踪src/app.tsx 中挂载了 SDK 的路由集成。对应地src/routes 下的server-error.tsx、client-error.tsx、back-navigation.tsx等路由就是这些断言的触发入口。小结与适用前提这篇 README 本身是 Solid CLI 模板的通用说明创建、开发、preset 构建、vitest 测试适合作为理解 SolidStart 项目骨架的入口而该应用在 Sentry 仓库里的价值在于它把模板的每一个环节都改造成了对sentry/solidstart的可验证证据链模板环节该应用的 Sentry 化改造app.config.jswithSentry({ ssr: false, middleware })SPA 模式插桩npm run buildvinxi buildinstrument.server.ts被编译进 server 产物npm startnode --import .output/server/instrument.server.mjs前置加载插桩npm testvitest保留依赖另用 Playwright 本地事件代理做 E2E 断言需要说明适用前提按 dev-packages/e2e-tests/README.md 的警告该测试应用仅用于验证 SDK 行为可能包含为向后兼容而固定的旧依赖版本与非生产级配置如solid-js锁定在1.9.5、依赖通过file:../../packed/sentry-solidstart-packed.tgz引用打包后的 tarball不应直接作为业务项目模板使用正式接入请以packages/solidstart的 README.md 与官方文档为准。赞分享可观测性【免费下载链接】sentry-javascriptOfficial Sentry SDKs for JavaScript项目地址https://gitcode.com/gh_mirrors/se/sentry-javascript点击查看免费下载相关推荐sentry-javascript 中 SolidStart 2 E2E 测试应用从标准 README 到 Sentry 集成验证的完整实操指南sentry javascript 中 SolidStart 2 E2E 测试应用从标准 README 到 Sentry 集成验证的完整实操指南 本篇以 de可观测性sentry-javascript solid-tanstack-router e2e 测试应用Solid TanStack Router 路由实践与 Sentry 埋点验证sentry javascript solid tanstack router e2e 测试应用Solid TanStack Router 路由实践与 S可观测性使用 Turborepo 搭建 SolidStart 单体仓库with-solid 示例全面解析使用 Turborepo 搭建 SolidStart 单体仓库with solid 示例全面解析 本文基于当前仓库中的 with solid 示例 https构建工具开发工具CLI上一篇OpenUI批量操作终极指南如何一次性生成多个UI界面的高效方法下一篇DeiT Small模型入门一文读懂deit_small_patch16_224.fb_in1k的核心功能与应用场景创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考