vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: add vite-plugin sentry
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
Dominik Pschenitschni 2022-05-22 16:20:06 +02:00
parent 78b765ddc4
commit 996bdd1baf
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
11 changed files with 281 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.drone.yml
View File

@ -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
View File

@ -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
}

4
package.json
View File

@ -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",

75
pnpm-lock.yaml
View File

@ -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:

2
src/composables/useOnline.ts
View File

@ -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)
}

9
src/main.ts
View File

@ -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)

7
src/sentry.ts
View File

@ -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),

6
tsconfig.app.json
View File

@ -15,7 +15,11 @@
"paths": {
"@/*": ["./src/*"]
}
},
"types": [
// https://github.com/ikenfin/vite-plugin-sentry#typescript
"vite-plugin-sentry/client"
]
},
"vueCompilerOptions": {
// "strictTemplates": true

2
tsconfig.vite-config.json
View File

@ -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"]

67
vite.config.ts
View File

@ -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']
}
},
},
}
})