feat: add vite-plugin sentry

This commit is contained in:
Dominik Pschenitschni 2022-05-22 16:20:06 +02:00 committed by kolaente
parent 389ca1b692
commit 73947f0ba4
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
9 changed files with 89 additions and 22 deletions

@ -70,6 +70,12 @@ steps:
pull: always
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

25
env.d.ts vendored

@ -4,19 +4,32 @@
/// <reference types="@histoire/plugin-vue/components" />
declare module 'postcss-focus-within/browser' {
import focusWithinInit from 'postcss-focus-within/browser'
export default focusWithinInit
import focusWithinInit from 'postcss-focus-within/browser'
export default focusWithinInit
}
declare module 'css-has-pseudo/browser' {
import cssHasPseudo from 'css-has-pseudo/browser'
export default cssHasPseudo
import cssHasPseudo from 'css-has-pseudo/browser'
export default cssHasPseudo
}
interface ImportMetaEnv {
readonly VITE_IS_ONLINE: boolean
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
readonly env: ImportMetaEnv
}

@ -18,12 +18,12 @@
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
//
//
// This variable points the frontend to the api.
// It has to be the full url, including the last /api/v1 part and port.
// You can change this if your api is not reachable on the same port as the frontend.
window.API_URL = 'http://localhost:3456/api/v1'
// Enable error tracking with sentry. If this is set to true, will send anonymized data to
// Enable error tracking with sentry. If this is set to true, will send anonymized data to
// our sentry instance to notify us of potential problems.
window.SENTRY_ENABLED = false
window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'

@ -26,7 +26,7 @@
"serve": "vite",
"preview": "vite preview --port 4173",
"preview:dev": "vite preview --outDir dist-dev --mode development --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 --mode development --outDir dist-dev/",
"lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
@ -128,6 +128,7 @@
"postcss-easings": "3.0.1",
"postcss-focus-within": "7.0.2",
"postcss-preset-env": "8.5.0",
"rimraf": "3.0.2",
"rollup": "3.25.1",
"rollup-plugin-visualizer": "5.9.2",
"sass": "1.63.4",
@ -136,6 +137,7 @@
"vite": "4.3.9",
"vite-plugin-inject-preload": "1.3.1",
"vite-plugin-pwa": "0.16.4",
"vite-plugin-sentry": "1.1.6",
"vite-svg-loader": "4.0.0",
"vitest": "0.32.2",
"vue-tsc": "1.8.0",

@ -4,7 +4,7 @@ import type {ConfigurableWindow} from '@vueuse/core'
export function useOnline(options?: ConfigurableWindow) {
const isOnline = useNetworkOnline(options)
const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
const fakeOnlineState = Boolean(import.meta.env.VITE_IS_ONLINE)
if (isOnline.value === false && fakeOnlineState) {
console.log('Setting fake online state', fakeOnlineState)
return ref(true)

@ -4,9 +4,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
@ -106,8 +105,12 @@ setLanguage(browserLanguage).then(() => {
}
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)
app.use(router)

@ -1,15 +1,16 @@
import type { App } from 'vue'
import type { Router } from 'vue-router'
import {VERSION} from './version.json'
import 'virtual:vite-plugin-sentry/sentry-config'
import type {App} from 'vue'
import type {Router} from 'vue-router'
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),

@ -14,6 +14,10 @@
"paths": {
"@/*": ["./src/*"]
},
"types": [
// https://github.com/ikenfin/vite-plugin-sentry#typescript
"vite-plugin-sentry/client"
],
"ignoreDeprecations": "5.0"
},
"vueCompilerOptions": {

@ -9,6 +9,8 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import {VitePWA} from 'vite-plugin-pwa'
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
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'
import postcssEasings from 'postcss-easings'
@ -17,6 +19,8 @@ import postcssEasingGradients from 'postcss-easing-gradients'
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";`
@ -24,16 +28,43 @@ 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"',
)
/*
** 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',
},
}
}
/**
* @param fontNames Array of the file names of the fonts without axis and hash suffixes
*/
@ -171,6 +202,7 @@ export default defineConfig(({mode}) => {
],
},
}),
viteSentry(getSentryConfig(env)),
],
resolve: {
alias: [
@ -188,7 +220,13 @@ export default defineConfig(({mode}) => {
},
build: {
target: 'esnext',
// required for sentry debugging: tells vite to create source maps
sourcemap: true,
rollupOptions: {
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']
},
plugins: [
visualizer({
filename: 'stats.html',