forked from vikunja/frontend
feat: add vite-plugin sentry
This commit is contained in:
parent
389ca1b692
commit
73947f0ba4
@ -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
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',
|
||||
|
Loading…
Reference in New Issue
Block a user