search

ikenfin / vite-plugin-sentry

Vite plugin acting as an interface to SentryCLI
165 stars 16 forks source link

When using with Vite 4.3.4 and newer plugin breaks #289

Open Kretiss opened 1 year ago

Kretiss commented 1 year ago

Hey, I am experiencing weird error and I really dont know from where it comes from. Everythink works fine with Vite version 3.4.3 and lower, but from version 3.4.4 it always throws error at the end of the build, right after source maps list.

Here is printscreen of that error:

obrazek

Remove of plugin in vite.config.ts fixes this issue. Does anyone know what could be the solution here? Thanks!

Here is dependencies list


 "dependencies": {
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.17",
    "@react-spring/web": "^9.7.2",
    "@sentry/react": "^7.51.0",
    "@tanstack/react-query": "^4.29.5",
    "@tanstack/react-query-devtools": "^4.29.6",
    "@types/react-tag-autocomplete": "^6.3.0",
    "clsx": "^1.2.1",
    "i18next": "^22.4.15",
    "i18next-browser-languagedetector": "^7.0.1",
    "immer": "^10.0.1",
    "js-base64": "^3.7.5",
    "jwt-decode": "^3.1.2",
    "ky": "^0.33.3",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-checkbox-tree": "^1.8.0",
    "react-compound-slider": "^3.4.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-helmet-async": "^1.3.0",
    "react-i18next": "^12.2.2",
    "react-paginate": "^8.2.0",
    "react-router-dom": "^6.11.1",
    "react-table": "^7.8.0",
    "react-tag-autocomplete": "^6.3.0",
    "react-toastify": "^9.1.2",
    "react-use-measure": "^2.1.1",
    "store": "^2.0.12",
    "tslib": "^2.5.0",
    "uuid": "^9.0.0",
    "zod": "^3.21.4",
    "zustand": "^4.3.8"
  },
  "devDependencies": {
    "@headlessui/tailwindcss": "^0.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/lodash": "^4.14.194",
    "@types/react": "^18.2.5",
    "@types/react-dom": "^18.2.3",
    "@types/react-router-dom": "^5.3.3",
    "@types/store": "^2.0.2",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.39.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "jsdom": "^22.0.0",
    "lint-staged": "^13.2.2",
    "postcss": "^8.4.23",
    "postcss-import": "^15.1.0",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "rimraf": "^5.0.0",
    "tailwind-scrollbar": "^3.0.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4",
    "vite": "4.3.4",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-sentry": "^1.2.0",
    "vite-plugin-svgr": "^3.2.0",
    "vitest": "^0.31.0"
  },

And plugin setup:

/// <reference types="vite/client" />
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import eslintPlugin from 'vite-plugin-eslint'
import viteSentry from 'vite-plugin-sentry'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

  return {
    plugins: [
      react(),
      svgr(),
      eslintPlugin(),
      viteSentry({
        url: 'https://....',
        authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
        org: 'inqool',
        project: 'numisdeal-frontend',
        deploy: {
          env: 'production',
        },
        setCommits: {
          auto: true,
          ignoreMissing: true,
        },
        sourceMaps: {
          include: ['./dist/assets'],
          ignore: ['node_modules'],
          ignoreFile: './.gitignore',
          urlPrefix: '~/assets',
        },
      }),
    ],
    build: {
      // required for sentry: tells vite to create source maps
      sourcemap: true,
    },
    server: {
      port: 3000,
      host: true,
    },
  }
})
ikenfin commented 1 year ago

Hi! I tried to reproduce but no luck here (tried on vite 4.3.4 and 4.3.5) :(

WouterSioen commented 1 year ago

I'm having the same problem here, when upgrading from 4.3.3 to 4.3.5. The problem is fixed when I disable this plugin.

This is what (the relevant part of) my vite config looks like:

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteSentry from 'vite-plugin-sentry'

import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

const path = require('path')
const url = require('url')

export default ({ mode }) => {
  process.env = Object.assign(process.env, loadEnv(mode, process.cwd(), ''))
  const plugins = [
    vue(),
  ]

  if (process.env.VITE_COMMIT_HASH && process.env.VITE_SENTRY_AUTH_TOKEN) {
    plugins.push(
      viteSentry({
        authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
        org: '***',
        project: 'frontend',
        release: process.env.VITE_COMMIT_HASH,
        sourceMaps: {
          include: ['./dist/assets'],
          ignore: ['node_modules'],
          urlPrefix: '~/assets',
        },
      }),
    )
  }

  // https://vitejs.dev/config/
  return defineConfig({
    plugins,
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@core': path.resolve(__dirname, 'src/@core'),
        vue: url.fileURLToPath(new URL('./node_modules/vue', import.meta.url)),
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
      dedupe: ['vue'],
    },
    build: {
      target: 'es2015',
      sourcemap: 'hidden',
    },
  })
}

The list of my dependencies:

{
  "dependencies": {
    "@lyracom/embedded-form-glue": "^1.3.6",
    "@paypal/paypal-js": "^5.1.6",
    "@sentry/tracing": "^7.39.0",
    "@sentry/vue": "^7.45.0",
    "@stripe/stripe-js": "^1.52.1",
    "@tanstack/vue-query": "^4.29.5",
    "@tiptap/core": "^2.0.0-beta.218",
    "@tiptap/extension-link": "^2.0.0-beta.218",
    "@tiptap/extension-mention": "^2.0.0-beta.218",
    "@tiptap/starter-kit": "^2.0.0-beta.218",
    "@tiptap/vue-3": "^2.0.0-beta.218",
    "@vee-validate/rules": "^4.7.4",
    "@vueuse/core": "^10.1.0",
    "apexcharts": "^3.39.0",
    "axios": "^1.4.0",
    "bootstrap": "4.6.2",
    "core-js": "^3.30.1",
    "date-fns": "^2.30.0",
    "date-fns-tz": "^2.0.0",
    "element-plus": "^2.3.3",
    "emoji-mart-vue-fast": "^12.0.3",
    "flag-icons": "^6.6.6",
    "leaflet": "^1.9.3",
    "lodash": "^4.17.21",
    "papaparse": "^5.4.1",
    "prosemirror-state": "^1.4.2",
    "simple-web-worker": "^1.2.0",
    "tippy.js": "^6.3.7",
    "validator": "^13.9.0",
    "vee-validate": "^4.7.2",
    "vue": "3.2.47",
    "vue-feather": "^2.0.0",
    "vue-i18n": "^9.3.0-beta.11",
    "vue-plugin-load-script": "^2.1.1",
    "vue-router": "^4.1.6",
    "vue3-apexcharts": "^1.4.1",
    "vue3-form-wizard": "^0.2.1",
    "vuex": "^4.1.0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-typescript": "^7.21.4",
    "@cypress/webpack-preprocessor": "^5.17.1",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/user-event": "^14.4.3",
    "@testing-library/vue": "^7.0.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "@vue/eslint-config-airbnb": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.3.2",
    "@vue/vue3-jest": "^29.2.3",
    "babel-jest": "^29.5.0",
    "babel-plugin-transform-import-meta": "^2.2.0",
    "babel-preset-vite": "^1.1.0",
    "cypress": "^12.11.0",
    "cypress-file-upload": "^5.0.8",
    "dotenv": "^16.0.3",
    "eslint": "^8.39.0",
    "eslint-plugin-cypress": "^2.13.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "9.9.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "rimraf": "^5.0.0",
    "sass": "^1.59.3",
    "typescript": "^5.0.3",
    "vite": "^4.3.5",
    "vite-plugin-checker": "^0.5.6",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-sentry": "^1.1.7",
    "vue-eslint-parser": "^9.1.1",
    "vue-tsc": "^1.6.4"
  }
}
Eazymov commented 1 year ago

@ikenfin Hi! Reproduction: https://stackblitz.com/edit/vitejs-vite-tfdhac?file=src%2Fmain.jsx,vite.config.js&terminal=build

Log:

$ vite build
vite v4.3.5 building for production...
transforming (1) index.html
{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"VITE_PLUGIN_SENTRY_CONFIG":{\"release\":\"123\}"};

VITE_PLUGIN_SENTRY_CONFIG value leads to a parse error. Probably related to https://github.com/vitejs/vite/pull/13003

Temporary fix:

const { config, ...vps } = vitePluginSentry({ ... })

export default defineConfig({
  plugins: [
    vps,
  ],
});
ikenfin commented 1 year ago

@WouterSioen @Kretiss @Eazymov Hi! It seems that this encoding appears only when you use import.meta.env, while using import.meta.env.VITE_PLUGIN_SENTRY_CONFIG is fine.

I've done some experiments and it seems that import.meta.env always fails if you trying to use it without direct property usage:

// main.tsx
// fails
const {
  VITE_PLUGIN_SENTRY_CONFIG
} = import.meta.env

console.log(VITE_PLUGIN_SENTRY_CONFIG.dist)

// works
console.log(import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.dist)

Can you plz check how you are using import.meta.env in your code and replace it with full property path to check is that works?

WouterSioen commented 1 year ago

In my main.ts file, I init Sentry this way:

import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'

if (import.meta.env.VITE_SENTRY_DSN && import.meta.env.VITE_SENTRY_ENVIRONMENT) {
  Sentry.init({
    app,
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.VITE_SENTRY_ENVIRONMENT,
    release: import.meta.env.VITE_COMMIT_HASH,
    integrations: [new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    })],
  })
}

This thus does use the full property path

AnotherHermit commented 1 year ago

I think this is an issue in vite and how it handles import.meta.env. I have submitted a ticket there to see where the issue should be resolved. https://github.com/vitejs/vite/issues/13496

WouterSioen commented 11 months ago

Looks like this is fixed with the release of vite 4.4.8, I cannot reproduce the problem anymore after updating 🙌