@sentry/remix not working when installed through Sentry Wizard

[hoffnung8493]

Environment

node v21.6.2

Steps to Reproduce

create brand new remix vite project (current latest is 2.8.0)
npx create-remix@latest --template remix-run/remix/templates/vite-express
configure sentry with Sentry Wizard, where remix project is already created in Sentry
npx @sentry/wizard@latest -i remix

npm run dev should start the server but it crashes with these logs:

➜  vite git:(main) ✗ npm run dev

> dev
> node ./server.js

[sentry-vite-plugin] Info: Using environment variables configured in ".env.sentry-build-plugin".
[sentry-vite-plugin] Info: Using environment variables configured in ".env.sentry-build-plugin".
/Users/sihoonkim/Documents/practice/vite/node_modules/@sentry/remix/cjs/utils/instrumentServer.js:463
  const wrappedEntry = { ...build.entry, module: { ...build.entry.module } };
                                                                  ^

TypeError: Cannot read properties of undefined (reading 'module')
    at Object.instrumentBuild (/Users/sihoonkim/Documents/practice/vite/node_modules/@sentry/remix/cjs/utils/instrumentServer.js:463:67)
    at /Users/sihoonkim/Documents/practice/vite/node_modules/@sentry/remix/cjs/utils/serverAdapters/express.js:84:39
    at file:///Users/sihoonkim/Documents/practice/vite/server.js:21:22

[onurtemizkan]

Hi @hoffnung8493, thanks for the report.

This issue will be fixed by, getsentry/sentry-javascript#10811 and #543.

Should be released soon.

[AbhiPrasad]

We released JS SDK https://github.com/getsentry/sentry-javascript/releases/tag/7.106.0 - we can make the wizard changes now!

[AbhiPrasad]

We'll do a sentry wizard release early next week to take care of this - thank you for your patience while we fix @hoffnung8493!!

[hoffnung8493]

Btw, it would be great if you guys also update the docs on uploading sourcemaps in Remix section. Remix's Vite is stable now, and is the suggested way to build Remix. Now with Vite, uploading sourcemaps and even release management can be done with @sentry/vite-plugin, which is super nice actually. When I was working on my github action workflow, I initially thought I would have to either use the sentry-cli or Sentry's Github action.

[hoffnung8493]

Also sentry wizard could go a few steps further and implement sourcemap upload and release update.
I know that the wizard already configures build: { sourcemap: true }, in Vite config file. But it would require authToken and release. Mine looks like this:

export default defineConfig({
  plugins: [
    morganPlugin(),
    remix(),
    tsconfigPaths(),
    sentryVitePlugin({
      org: "org-name",
      project: "project-name",
      authToken: SENTRY_AUTH_TOKEN,
      release: {
        deploy: SENTRY_ENV ? { env: SENTRY_ENV } : undefined,
        name: SENTRY_RELEASE,
      },
    }),
  ],
  build: { sourcemap: true },
});

Then you could give examples on how to make this work in typical CICD pipelines. Below would be the Github action workflow example, I just have to provide these variables as env, so that @sentry/vite-plugin gets access to the required envs.

jobs:
  sentry:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Build and Upload sourcemap to Sentry
        run: |
          npm install
          npm run build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_RELEASE: ${{ github.sha }}
          SENTRY_ENV: staging

Then for the actual build files Sentry.init in both entry.server.tsx and entry.client.tsx, I would have to provide the environment and release, which can be done in the workflow like this (in case you are using docker):

      - name: Build and tag production image
        uses: docker/build-push-action@v5
        with:
          file: ./Dockerfile
          context: .
          load: true
          tags: ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_REPOSITORY }}:${{ github.sha }}
          cache-from: type=gha
          build-args: |
            VITE_RELEASE=${{ github.sha }} //  clients has access to these as long as it starts with `VITE_`, 
            VITE_ENV=staging

[AbhiPrasad]

Great idea about the docs @hoffnung8493 - opened getsentry/sentry-docs#9411 to track.

We released the wizard changes in https://github.com/getsentry/sentry-wizard/releases/tag/v3.21.0, so closing this issue, let's track rest of work in that docs issue.

[AbhiPrasad]

Thanks to @onurtemizkan - some fancy new vite/remix docs! https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/#using-vite-plugin-recommended