vite-plugin-sentry
vite-plugin-sentry copied to clipboard
ikenfin
When using with Vite 4.3.4 and newer plugin breaks
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:
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,
},
}
})
Hi! I tried to reproduce but no luck here (tried on vite 4.3.4 and 4.3.5) :(
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"
}
}
@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,
],
});
@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?
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
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
Looks like this is fixed with the release of vite 4.4.8, I cannot reproduce the problem anymore after updating 🙌