feat: add vite-plugin sentry
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
78b765ddc4
commit
996bdd1baf
|
@ -67,6 +67,12 @@ steps:
|
|||
pull: true
|
||||
environment:
|
||||
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||
SENTRY_AUTH_TOKEN:
|
||||
from_secret: sentry_auth_token
|
||||
SENTRY_ORG: vikunja
|
||||
SENTRY_PROJECT: frontend-oss
|
||||
SENTRY_RELEASE:
|
||||
from_secret: sentry_release
|
||||
commands:
|
||||
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||
- pnpm run build
|
||||
|
|
21
env.d.ts
vendored
21
env.d.ts
vendored
|
@ -1,3 +1,24 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-svg-loader" />
|
||||
/// <reference types="cypress" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VIKUNJA_API_URL?: string
|
||||
readonly VIKUNJA_HTTP_PORT?: number
|
||||
readonly VIKUNJA_HTTPS_PORT?: number
|
||||
|
||||
readonly VIKUNJA_SENTRY_ENABLED?: boolean
|
||||
readonly VIKUNJA_SENTRY_DSN?: string
|
||||
|
||||
readonly SENTRY_AUTH_TOKEN?: string
|
||||
readonly SENTRY_ORG?: string
|
||||
readonly SENTRY_PROJECT?: string
|
||||
readonly SENTRY_RELEASE?: string
|
||||
|
||||
readonly VITE_WORKBOX_DEBUG?: boolean
|
||||
readonly VITE_IS_ONLINE?: boolean
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
|
@ -6,7 +6,7 @@
|
|||
"serve": "vite",
|
||||
"serve:dist-dev": "node scripts/serve-dist.js",
|
||||
"serve:dist": "vite preview --port 4173",
|
||||
"build": "vite build && workbox copyLibraries dist/",
|
||||
"build": "vite build && rimraf dist/**/*.js.map && workbox copyLibraries dist/",
|
||||
"build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
|
||||
"build:dev": "vite build -m development --outDir dist-dev/",
|
||||
"lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
|
||||
|
@ -97,12 +97,14 @@
|
|||
"netlify-cli": "12.0.11",
|
||||
"postcss": "8.4.18",
|
||||
"postcss-preset-env": "7.8.2",
|
||||
"rimraf": "3.0.2",
|
||||
"rollup": "3.2.5",
|
||||
"rollup-plugin-visualizer": "5.8.3",
|
||||
"sass": "1.56.0",
|
||||
"typescript": "4.8.4",
|
||||
"vite": "3.2.2",
|
||||
"vite-plugin-pwa": "0.13.2",
|
||||
"vite-plugin-sentry": "1.1.6",
|
||||
"vite-svg-loader": "3.6.0",
|
||||
"vitest": "0.24.5",
|
||||
"vue-tsc": "1.0.9",
|
||||
|
|
|
@ -68,6 +68,7 @@ specifiers:
|
|||
postcss: 8.4.18
|
||||
postcss-preset-env: 7.8.2
|
||||
register-service-worker: 1.7.2
|
||||
rimraf: 3.0.2
|
||||
rollup: 3.2.5
|
||||
rollup-plugin-visualizer: 5.8.3
|
||||
sass: 1.56.0
|
||||
|
@ -77,6 +78,7 @@ specifiers:
|
|||
ufo: 0.8.6
|
||||
vite: 3.2.2
|
||||
vite-plugin-pwa: 0.13.2
|
||||
vite-plugin-sentry: 1.1.6
|
||||
vite-svg-loader: 3.6.0
|
||||
vitest: 0.24.5
|
||||
vue: 3.2.41
|
||||
|
@ -170,12 +172,14 @@ devDependencies:
|
|||
netlify-cli: 12.0.11_@types+node@18.11.9
|
||||
postcss: 8.4.18
|
||||
postcss-preset-env: 7.8.2_postcss@8.4.18
|
||||
rimraf: 3.0.2
|
||||
rollup: 3.2.5
|
||||
rollup-plugin-visualizer: 5.8.3_rollup@3.2.5
|
||||
sass: 1.56.0
|
||||
typescript: 4.8.4
|
||||
vite: 3.2.2_sass@1.56.0+terser@5.10.0
|
||||
vite-plugin-pwa: 0.13.2_3bowiggcnrfgb4q2iavuqqt6vu
|
||||
vite-plugin-sentry: 1.1.6_vite@3.2.2
|
||||
vite-svg-loader: 3.6.0
|
||||
vitest: 0.24.5_55dneq6lizwzyprtj5vtp4rzay
|
||||
vue-tsc: 1.0.9_typescript@4.8.4
|
||||
|
@ -2743,6 +2747,23 @@ packages:
|
|||
tslib: 1.14.1
|
||||
dev: false
|
||||
|
||||
/@sentry/cli/2.8.1:
|
||||
resolution: {integrity: sha512-V/Mzy/ooZaICBFC8OvSrhUg3Anw1vlEzQQKwUtXEH0EQmcKDJMGkgfo2hXlpoR6lybODjkXDlMkajKcspdF4RA==}
|
||||
engines: {node: '>= 12'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
https-proxy-agent: 5.0.0
|
||||
node-fetch: 2.6.7
|
||||
npmlog: 6.0.2
|
||||
progress: 2.0.3
|
||||
proxy-from-env: 1.1.0
|
||||
which: 2.0.2
|
||||
transitivePeerDependencies:
|
||||
- encoding
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sentry/core/7.17.4:
|
||||
resolution: {integrity: sha512-U3ABSJBKGK8dJ01nEG2+qNOb6Wv7U3VqoajiZxfV4lpPWNFGCoEhiTytxBlFTOCmdUH8209zSZiWJZaDLy+TSA==}
|
||||
engines: {node: '>=8'}
|
||||
|
@ -3904,6 +3925,14 @@ packages:
|
|||
readable-stream: 3.6.0
|
||||
dev: true
|
||||
|
||||
/are-we-there-yet/3.0.1:
|
||||
resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
|
||||
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
|
||||
dependencies:
|
||||
delegates: 1.0.0
|
||||
readable-stream: 3.6.0
|
||||
dev: true
|
||||
|
||||
/arg/4.1.3:
|
||||
resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
|
||||
dev: true
|
||||
|
@ -7094,6 +7123,20 @@ packages:
|
|||
wide-align: 1.1.5
|
||||
dev: true
|
||||
|
||||
/gauge/4.0.4:
|
||||
resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
|
||||
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
|
||||
dependencies:
|
||||
aproba: 2.0.0
|
||||
color-support: 1.1.3
|
||||
console-control-strings: 1.1.0
|
||||
has-unicode: 2.0.1
|
||||
signal-exit: 3.0.7
|
||||
string-width: 4.2.3
|
||||
strip-ansi: 6.0.1
|
||||
wide-align: 1.1.5
|
||||
dev: true
|
||||
|
||||
/gensync/1.0.0-beta.2:
|
||||
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
@ -9809,6 +9852,16 @@ packages:
|
|||
set-blocking: 2.0.0
|
||||
dev: true
|
||||
|
||||
/npmlog/6.0.2:
|
||||
resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
|
||||
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
|
||||
dependencies:
|
||||
are-we-there-yet: 3.0.1
|
||||
console-control-strings: 1.1.0
|
||||
gauge: 4.0.4
|
||||
set-blocking: 2.0.0
|
||||
dev: true
|
||||
|
||||
/nth-check/2.0.1:
|
||||
resolution: {integrity: sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==}
|
||||
dependencies:
|
||||
|
@ -10876,6 +10929,11 @@ packages:
|
|||
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
||||
dev: true
|
||||
|
||||
/progress/2.0.3:
|
||||
resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
|
||||
engines: {node: '>=0.4.0'}
|
||||
dev: true
|
||||
|
||||
/promise/8.1.0:
|
||||
resolution: {integrity: sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==}
|
||||
dependencies:
|
||||
|
@ -10898,6 +10956,10 @@ packages:
|
|||
resolution: {integrity: sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==}
|
||||
dev: true
|
||||
|
||||
/proxy-from-env/1.1.0:
|
||||
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
|
||||
dev: true
|
||||
|
||||
/ps-list/8.1.0:
|
||||
resolution: {integrity: sha512-NoGBqJe7Ou3kfQxEvDzDyKGAyEgwIuD3YrfXinjcCmBRv0hTld0Xb71hrXvtsNPj7HSFATfemvzB8PPJtq6Yag==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
|
@ -12905,6 +12967,19 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-plugin-sentry/1.1.6_vite@3.2.2:
|
||||
resolution: {integrity: sha512-IgrIIl+VKwfLEoJ5O/8rplWmnkjdzqlBwmncWJH19mitr/v7SP7YnXlzv+vdAvxBo5eA8QPYx0J2i58NnaQ3fg==}
|
||||
engines: {node: '>= 12'}
|
||||
peerDependencies:
|
||||
vite: ^2.6.0 || ^3.0.0
|
||||
dependencies:
|
||||
'@sentry/cli': 2.8.1
|
||||
vite: 3.2.2_sass@1.56.0+terser@5.10.0
|
||||
transitivePeerDependencies:
|
||||
- encoding
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-svg-loader/3.6.0:
|
||||
resolution: {integrity: sha512-bZJffcgCREW57kNkgMhuNqeDznWXyQwJ3wKrRhHLMMzwDnP5jr3vXW3cqsmquRR7VTP5mLdKj1/zzPPooGUuPw==}
|
||||
dependencies:
|
||||
|
|
|
@ -3,7 +3,7 @@ import {useOnline as useNetworkOnline} from '@vueuse/core'
|
|||
import type {ConfigurableWindow} from '@vueuse/core'
|
||||
|
||||
export function useOnline(options?: ConfigurableWindow) {
|
||||
const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
|
||||
const fakeOnlineState = Boolean(import.meta.env.VITE_IS_ONLINE)
|
||||
if (fakeOnlineState) {
|
||||
console.log('Setting fake online state', fakeOnlineState)
|
||||
}
|
||||
|
|
|
@ -3,9 +3,8 @@ import {createApp} from 'vue'
|
|||
import pinia from './pinia'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
|
||||
import {setupSentry} from './sentry'
|
||||
import {error, success} from './message'
|
||||
|
||||
import {VERSION} from './version.json'
|
||||
|
||||
// Notifications
|
||||
|
@ -99,7 +98,11 @@ app.config.globalProperties.$message = {
|
|||
}
|
||||
|
||||
if (window.SENTRY_ENABLED) {
|
||||
import('./sentry').then(sentry => sentry.default(app, router))
|
||||
try{
|
||||
setupSentry(app, router)
|
||||
} catch(e) {
|
||||
console.error('Could not enable Sentry tracking', e)
|
||||
}
|
||||
}
|
||||
|
||||
app.use(pinia)
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import 'virtual:vite-plugin-sentry/sentry-config'
|
||||
import type {App} from 'vue'
|
||||
import type {Router} from 'vue-router'
|
||||
import {VERSION} from './version.json'
|
||||
|
||||
export default async function setupSentry(app: App, router: Router) {
|
||||
export async function setupSentry(app: App, router: Router) {
|
||||
const Sentry = await import('@sentry/vue')
|
||||
const {Integrations} = await import('@sentry/tracing')
|
||||
|
||||
Sentry.init({
|
||||
release: VERSION,
|
||||
app,
|
||||
dsn: window.SENTRY_DSN,
|
||||
release: import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.release,
|
||||
dist: import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.dist,
|
||||
integrations: [
|
||||
new Integrations.BrowserTracing({
|
||||
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
|
||||
|
|
|
@ -15,7 +15,11 @@
|
|||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"types": [
|
||||
// https://github.com/ikenfin/vite-plugin-sentry#typescript
|
||||
"vite-plugin-sentry/client"
|
||||
]
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
// "strictTemplates": true
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||
"include": ["vite.config.*"],
|
||||
"include": ["vite.config.*", "env.d.ts", "./src/version.json"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"types": ["node", "vitest"]
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
/// <reference types="vitest" />
|
||||
import {defineConfig} from 'vite'
|
||||
import {defineConfig, loadEnv, type PluginOption} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import legacyFn from '@vitejs/plugin-legacy'
|
||||
|
||||
import {VitePWA} from 'vite-plugin-pwa'
|
||||
import {visualizer} from 'rollup-plugin-visualizer'
|
||||
|
||||
import viteSentry, {type ViteSentryPluginOptions} from 'vite-plugin-sentry'
|
||||
import svgLoader from 'vite-svg-loader'
|
||||
import postcssPresetEnv from "postcss-preset-env";
|
||||
|
||||
|
@ -12,6 +14,8 @@ import { fileURLToPath, URL } from 'url'
|
|||
|
||||
const pathSrc = fileURLToPath(new URL('./src', import.meta.url))
|
||||
|
||||
import {VERSION} from './src/version.json'
|
||||
|
||||
// the @use rules have to be the first in the compiled stylesheets
|
||||
const PREFIXED_SCSS_STYLES = `@use "sass:math";
|
||||
@import "${pathSrc}/styles/common-imports";`
|
||||
|
@ -19,18 +23,51 @@ const PREFIXED_SCSS_STYLES = `@use "sass:math";
|
|||
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
|
||||
const legacy = isModernBuild
|
||||
? undefined
|
||||
: legacyFn({
|
||||
// recommended by browserslist => https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#targets
|
||||
targets: ['defaults', 'not IE 11'],
|
||||
})
|
||||
: legacyFn()
|
||||
|
||||
console.log(isModernBuild
|
||||
? 'Building "modern-only" build'
|
||||
: 'Building "legacy" build with "@vitejs/plugin-legacy"'
|
||||
: 'Building "legacy" build with "@vitejs/plugin-legacy"',
|
||||
)
|
||||
|
||||
/*
|
||||
** Configure sentry plugin
|
||||
*/
|
||||
function getSentryConfig(env: ImportMetaEnv): ViteSentryPluginOptions {
|
||||
return {
|
||||
// dryRun: true, // FIXME: remove when ready with configuring
|
||||
debug: true, // FIXME: remove when ready with configuring
|
||||
skipEnvironmentCheck: true,
|
||||
|
||||
url: 'https://sentry.io',
|
||||
authToken: env.SENTRY_AUTH_TOKEN,
|
||||
org: env.SENTRY_ORG,
|
||||
project: env.SENTRY_PROJECT,
|
||||
release: env.SENTRY_VERSION || VERSION,
|
||||
deploy: {
|
||||
env: env.mode === 'production'
|
||||
? 'production'
|
||||
: 'development',
|
||||
},
|
||||
setCommits: {
|
||||
auto: true,
|
||||
},
|
||||
sourceMaps: {
|
||||
include: ['./dist/assets'],
|
||||
ignore: ['node_modules'],
|
||||
urlPrefix: '~/assets',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
export default defineConfig(({ command, mode }) => {
|
||||
// https://vitejs.dev/config/#environment-variables
|
||||
// Load env file based on `mode` in the current working directory.
|
||||
// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
|
||||
const env: ImportMetaEnv = loadEnv(mode, process.cwd(), '') as ImportMetaEnv
|
||||
|
||||
return {
|
||||
// https://vitest.dev/config/
|
||||
test: {
|
||||
environment: 'happy-dom',
|
||||
|
@ -117,6 +154,10 @@ export default defineConfig({
|
|||
],
|
||||
},
|
||||
}),
|
||||
viteSentry(getSentryConfig(env)),
|
||||
visualizer({
|
||||
filename: 'stats.html',
|
||||
}) as PluginOption,
|
||||
],
|
||||
resolve: {
|
||||
alias: [
|
||||
|
@ -132,12 +173,14 @@ export default defineConfig({
|
|||
strictPort: true,
|
||||
},
|
||||
build: {
|
||||
// required for sentry debugging: tells vite to create source maps
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
plugins: [
|
||||
visualizer({
|
||||
filename: 'stats.html',
|
||||
}),
|
||||
],
|
||||
manualChunks: {
|
||||
// by putting tracking related stuff in a separated file we try to prevent unwanted blocking from ad-blockers
|
||||
sentry: ['./src/sentry.ts', '@sentry/vue', '@sentry/tracing']
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
Reference in New Issue
Block a user