Skip to content

feat(remix): Add Vite dev-mode support to Express instrumentation. #10784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Feb 26, 2024

Conversation

onurtemizkan
Copy link
Collaborator

@onurtemizkan onurtemizkan commented Feb 22, 2024

Resolves #10724
Related: #9500

Adds dev-mode support to Remix setups with Vite and Express.

We currently accept Remix server build as an object to instrument. But Remix allows build as a synchronous or asynchronous function that returns the build object. Currently, it seems that functions are only used in development servers, and not in production. So, while this update slightly reduces requestHandler performance on dev servers, it does not on production builds.

We need build in 2 places:

1- We instrument the loaders / actions on build, then we pass them down to the original implementations.
2- We use the routes inside them to create parameterised transactions.

This update adds new internal wrappers around them to make sure that we don't miss out on the returned / resolved values in case build is a function, for both cases.

This PR also adds a new E2E test application using the latest Remix version and Vite, and it runs the tests on dev mode.

We also need a documentation update to reflect this, if it gets merged.

@onurtemizkan onurtemizkan force-pushed the onur/remix-vite-dev-mode-async branch 2 times, most recently from 5fa1f6d to 959990a Compare February 22, 2024 14:10
Copy link
Contributor

github-actions bot commented Feb 22, 2024

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped) 77.28 KB (-0.3% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 68.55 KB (-0.35% 🔽)
@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped) 72.46 KB (-0.34% 🔽)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 62.06 KB (-0.39% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 32.73 KB (-0.82% 🔽)
@sentry/browser (incl. browserTracingIntegration) - Webpack (gzipped) 32.73 KB (-0.49% 🔽)
@sentry/browser (incl. Feedback) - Webpack (gzipped) 30.91 KB (0%)
@sentry/browser (incl. sendFeedback) - Webpack (gzipped) 30.91 KB (0%)
@sentry/browser - Webpack (gzipped) 22.19 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped) 75.76 KB (-0.33% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 67.5 KB (-0.05% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 33.29 KB (-0.47% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped) 24.72 KB (+0.02% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 211.3 KB (-0.4% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 100.02 KB (-0.83% 🔽)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 73.78 KB (-0.22% 🔽)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 36.37 KB (-1.02% 🔽)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 68.82 KB (-0.39% 🔽)
@sentry/react - Webpack (gzipped) 22.22 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 85.26 KB (-1.5% 🔽)
@sentry/nextjs Client - Webpack (gzipped) 49.67 KB (-0.28% 🔽)
@sentry-internal/feedback - Webpack (gzipped) 17.14 KB (0%)

@onurtemizkan onurtemizkan force-pushed the onur/remix-vite-dev-mode-async branch 3 times, most recently from ee4af65 to 7d2cc21 Compare February 23, 2024 13:27
@onurtemizkan onurtemizkan marked this pull request as ready for review February 23, 2024 14:41
Comment on lines +15 to +26
"@remix-run/css-bundle": "2.7.2",
"@remix-run/node": "2.7.2",
"@remix-run/react": "2.7.2",
"@remix-run/serve": "2.7.2",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@playwright/test": "^1.36.2",
"@remix-run/dev": "2.0.0",
"@remix-run/eslint-config": "2.0.0",
"@remix-run/dev": "2.7.2",
"@remix-run/eslint-config": "2.7.2",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also updated this to latest, to make sure the ErrorBoundary works with the latest Remix in production mode.


expect(hadPageNavigationTransaction).toBe(true);
});

Copy link
Collaborator Author

@onurtemizkan onurtemizkan Feb 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to remove ErrorBoundary test here, as it's not the same eventId we log, when it's reported to Sentry in dev mode.
I can confirm that the same event with a different id is reported to Sentry, but there are multiple events on dev-server mode which get deduped. We can try to address this in a follow-up PR.

Can also confirm that that test as-is passes on production mode.

@onurtemizkan onurtemizkan requested a review from lforst February 23, 2024 14:54
@onurtemizkan onurtemizkan force-pushed the onur/remix-vite-dev-mode-async branch from 7d2cc21 to 7b9dafa Compare February 23, 2024 14:54
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@onurtemizkan could you please expand the PR description to add details about what changes you made?

Woops spoke too soon, thanks for updating!

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's get this backported onto v7 as well!

@AbhiPrasad AbhiPrasad merged commit d570594 into develop Feb 26, 2024
@AbhiPrasad AbhiPrasad deleted the onur/remix-vite-dev-mode-async branch February 26, 2024 14:45
onurtemizkan added a commit that referenced this pull request Feb 26, 2024
…10784)

Resolves #10724
Related: #9500

Adds dev-mode support to Remix setups with Vite and Express.

We currently accept Remix server `build` as an object to instrument. But
Remix allows `build` as a synchronous or asynchronous function that
returns the build object. Currently, it seems that functions are only
used in development servers, and not in production. So, while this
update slightly reduces `requestHandler` performance on dev servers, it
does not on production builds.

We need `build` in 2 places:

1- We instrument the loaders / actions on build, then we pass them down
to the original implementations.
2- We use the `routes` inside them to create parameterised transactions.

This update adds new internal wrappers around them to make sure that we
don't miss out on the returned / resolved values in case `build` is a
function, for both cases.

This PR also adds a new E2E test application using the latest Remix
version and Vite, and it runs the tests on `dev` mode.

We also need a documentation update to reflect this, if it gets merged.
onurtemizkan added a commit that referenced this pull request Feb 26, 2024
…10784)

Resolves #10724
Related: #9500

Adds dev-mode support to Remix setups with Vite and Express.

We currently accept Remix server `build` as an object to instrument. But
Remix allows `build` as a synchronous or asynchronous function that
returns the build object. Currently, it seems that functions are only
used in development servers, and not in production. So, while this
update slightly reduces `requestHandler` performance on dev servers, it
does not on production builds.

We need `build` in 2 places:

1- We instrument the loaders / actions on build, then we pass them down
to the original implementations.
2- We use the `routes` inside them to create parameterised transactions.

This update adds new internal wrappers around them to make sure that we
don't miss out on the returned / resolved values in case `build` is a
function, for both cases.

This PR also adds a new E2E test application using the latest Remix
version and Vite, and it runs the tests on `dev` mode.

We also need a documentation update to reflect this, if it gets merged.
onurtemizkan added a commit that referenced this pull request Feb 28, 2024
…10784)

Resolves #10724
Related: #9500

Adds dev-mode support to Remix setups with Vite and Express.

We currently accept Remix server `build` as an object to instrument. But
Remix allows `build` as a synchronous or asynchronous function that
returns the build object. Currently, it seems that functions are only
used in development servers, and not in production. So, while this
update slightly reduces `requestHandler` performance on dev servers, it
does not on production builds.

We need `build` in 2 places:

1- We instrument the loaders / actions on build, then we pass them down
to the original implementations.
2- We use the `routes` inside them to create parameterised transactions.

This update adds new internal wrappers around them to make sure that we
don't miss out on the returned / resolved values in case `build` is a
function, for both cases.

This PR also adds a new E2E test application using the latest Remix
version and Vite, and it runs the tests on `dev` mode.

We also need a documentation update to reflect this, if it gets merged.
onurtemizkan added a commit that referenced this pull request Mar 7, 2024
…10784)

Resolves #10724
Related: #9500

Adds dev-mode support to Remix setups with Vite and Express.

We currently accept Remix server `build` as an object to instrument. But
Remix allows `build` as a synchronous or asynchronous function that
returns the build object. Currently, it seems that functions are only
used in development servers, and not in production. So, while this
update slightly reduces `requestHandler` performance on dev servers, it
does not on production builds.

We need `build` in 2 places:

1- We instrument the loaders / actions on build, then we pass them down
to the original implementations.
2- We use the `routes` inside them to create parameterised transactions.

This update adds new internal wrappers around them to make sure that we
don't miss out on the returned / resolved values in case `build` is a
function, for both cases.

This PR also adds a new E2E test application using the latest Remix
version and Vite, and it runs the tests on `dev` mode.

We also need a documentation update to reflect this, if it gets merged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't instrument Remix server build with Express and Vite dev server
2 participants