企业官网建设流程全解析

• 可观测性

@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 template's 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/:id（lazy懒加载）、错误边界演示页/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，而是仓库打包流程产出的本地 tarball：

"dependencies": { "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 支持，页面中大量class="bg-gray-100 ..."即来自它。

Available Scripts：README 列出的脚本与仓库实际脚本

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.json）：

"dev": "vite", "start": "vite"

dev与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_ENV=production playwright test", "test:build": "pnpm install && pnpm build", "test:assert": "pnpm test:prod"

• test:build：先安装依赖再执行生产构建，供 E2E 编排器（见 dev-packages/e2e-tests 根目录 的prepare.ts/run.ts）在打包验证阶段使用；
• test:prod：以TEST_ENV=production运行 Playwright 测试——注意 E2E 断言的对象是构建后的生产产物而非开发服务器；
• test:assert：E2E 框架在事件代理收到预期事件后调用该脚本完成断言，本质上等价于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'));

逐项说明各配置的用途：

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 error（onClick中直接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 仅几行，全部委托给仓库统一的getPlaywrightConfig：

import { 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 preview（3030）与事件代理（3031）被 Playwright 以生产模式断言，从而在每次 SDK 变更时验证 Solid 框架下错误捕获、错误边界与性能追踪的真实行为。

如需继续深入，建议查看：

• 模板全部源码：dev-packages/e2e-tests/test-applications/solid
• E2E 测试编排逻辑：dev-packages/e2e-tests/run.ts 与 dev-packages/e2e-tests/prepare.ts
• 共享测试工具（Playwright 配置与事件代理实现）：dev-packages/test-utils
• @sentry/solidSDK 源码：packages/solid

• 可观测性