diff --git a/dev-packages/e2e-tests/test-applications/solidstart/package.json b/dev-packages/e2e-tests/test-applications/solidstart/package.json
index b4b81ffcbd88..6409d191de5b 100644
--- a/dev-packages/e2e-tests/test-applications/solidstart/package.json
+++ b/dev-packages/e2e-tests/test-applications/solidstart/package.json
@@ -5,7 +5,12 @@
"clean": "pnpx rimraf node_modules pnpm-lock.yaml .vinxi .output",
"dev": "NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi dev",
"build": "vinxi build",
- "preview": "HOST=localhost PORT=3030 NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi start",
+ "//": [
+ "We are using `vinxi dev` to start the server because `vinxi start` is experimental and ",
+ "doesn't correctly resolve modules for @sentry/solidstart/solidrouter.",
+ "This is currently not an issue outside of our repo. See: https://github.com/nksaraf/vinxi/issues/177"
+ ],
+ "preview": "HOST=localhost PORT=3030 NODE_OPTIONS='--import ./src/instrument.server.mjs' vinxi dev",
"test:prod": "TEST_ENV=production playwright test",
"test:build": "pnpm install && npx playwright install && pnpm build",
"test:assert": "pnpm test:prod"
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx
index bb1f1095f125..3eb85218b575 100644
--- a/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx
+++ b/dev-packages/e2e-tests/test-applications/solidstart/src/app.tsx
@@ -1,11 +1,14 @@
+import { withSentryRouterRouting } from '@sentry/solidstart/solidrouter';
import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
+const SentryRouter = withSentryRouterRouting(Router);
+
export default function App() {
return (
- (
SolidStart - with Vitest
@@ -14,6 +17,6 @@ export default function App() {
)}
>
-
+
);
}
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx
index cbcd8f9267ca..9391faa9652d 100644
--- a/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx
+++ b/dev-packages/e2e-tests/test-applications/solidstart/src/entry-client.tsx
@@ -1,5 +1,6 @@
// @refresh reload
import * as Sentry from '@sentry/solidstart';
+import { solidRouterBrowserTracingIntegration } from '@sentry/solidstart/solidrouter';
import { StartClient, mount } from '@solidjs/start/client';
Sentry.init({
@@ -7,7 +8,7 @@ Sentry.init({
// out in production builds.
dsn: 'https://public@dsn.ingest.sentry.io/1337',
environment: 'qa', // dynamic sampling bias to keep transactions
- integrations: [Sentry.browserTracingIntegration()],
+ integrations: [solidRouterBrowserTracingIntegration()],
tunnel: 'http://localhost:3031/', // proxy server
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx
index a6d09d5b36b5..f1635dee3b63 100644
--- a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx
+++ b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/index.tsx
@@ -11,6 +11,16 @@ export default function Home() {
Client error
+
+
+ User 5
+
+
+
+
+ User 6
+
+
>
);
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx
new file mode 100644
index 000000000000..639ab0be8118
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/solidstart/src/routes/users/[id].tsx
@@ -0,0 +1,6 @@
+import { useParams } from '@solidjs/router';
+
+export default function User() {
+ const params = useParams();
+ return User ID: {params.id}
;
+}
diff --git a/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts
new file mode 100644
index 000000000000..17e57ba47d8d
--- /dev/null
+++ b/dev-packages/e2e-tests/test-applications/solidstart/tests/performance.client.test.ts
@@ -0,0 +1,93 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('sends a pageload transaction', async ({ page }) => {
+ const transactionPromise = waitForTransaction('solidstart', async transactionEvent => {
+ return transactionEvent?.transaction === '/' && transactionEvent.contexts?.trace?.op === 'pageload';
+ });
+
+ await page.goto('/');
+ const pageloadTransaction = await transactionPromise;
+
+ expect(pageloadTransaction).toMatchObject({
+ contexts: {
+ trace: {
+ op: 'pageload',
+ origin: 'auto.pageload.browser',
+ },
+ },
+ transaction: '/',
+ transaction_info: {
+ source: 'url',
+ },
+ });
+});
+
+test('sends a navigation transaction', async ({ page }) => {
+ const transactionPromise = waitForTransaction('solidstart', async transactionEvent => {
+ return transactionEvent?.transaction === '/users/5' && transactionEvent.contexts?.trace?.op === 'navigation';
+ });
+
+ await page.goto(`/`);
+ await page.locator('#navLink').click();
+ const navigationTransaction = await transactionPromise;
+
+ expect(navigationTransaction).toMatchObject({
+ contexts: {
+ trace: {
+ op: 'navigation',
+ origin: 'auto.navigation.solid.solidrouter',
+ },
+ },
+ transaction: '/users/5',
+ transaction_info: {
+ source: 'url',
+ },
+ });
+});
+
+test('updates the transaction when using the back button', async ({ page }) => {
+ // Solid Router sends a `-1` navigation when using the back button.
+ // The sentry solidRouterBrowserTracingIntegration tries to update such
+ // transactions with the proper name once the `useLocation` hook triggers.
+ const navigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => {
+ return transactionEvent?.transaction === '/users/6' && transactionEvent.contexts?.trace?.op === 'navigation';
+ });
+
+ await page.goto(`/`);
+ await page.locator('#navLinkUserBack').click();
+ const navigationTxn = await navigationTxnPromise;
+
+ expect(navigationTxn).toMatchObject({
+ contexts: {
+ trace: {
+ op: 'navigation',
+ origin: 'auto.navigation.solid.solidrouter',
+ },
+ },
+ transaction: '/users/6',
+ transaction_info: {
+ source: 'url',
+ },
+ });
+
+ const backNavigationTxnPromise = waitForTransaction('solidstart', async transactionEvent => {
+ return transactionEvent?.transaction === '/' && transactionEvent.contexts?.trace?.op === 'navigation';
+ });
+
+ await page.goBack();
+ const backNavigationTxn = await backNavigationTxnPromise;
+
+ expect(backNavigationTxn).toMatchObject({
+ contexts: {
+ trace: {
+ op: 'navigation',
+ origin: 'auto.navigation.solid.solidrouter',
+ },
+ },
+ transaction: '/',
+ transaction_info: {
+ source: 'url',
+ },
+ });
+});