feat: add sentry #879
@ -30,7 +30,10 @@
|
||||
// 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
|
||||
// our sentry instance to notify us of potential problems.
|
||||
window.SENTRY_ENABLED = false
|
||||
dpschen marked this conversation as resolved
Outdated
|
||||
window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -17,6 +17,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@kyvg/vue3-notification": "2.3.4",
|
||||
"@sentry/tracing": "^6.13.3",
|
||||
"@sentry/vue": "^6.13.3",
|
||||
"@vue/compat": "3.2.20",
|
||||
"bulma": "0.9.3",
|
||||
"camel-case": "4.1.2",
|
||||
|
5
run.sh
5
run.sh
@ -3,7 +3,8 @@
|
||||
# This shell script sets the api url based on an environment variable and starts nginx in foreground.
|
||||
|
||||
VIKUNJA_API_URL="${VIKUNJA_API_URL:-"/api/v1"}"
|
||||
|
||||
VIKUNJA_SENTRY_ENABLED="${VIKUNJA_SENTRY_ENABLED:-"false"}"
|
||||
VIKUNJA_SENTRY_DSN="${VIKUNJA_SENTRY_DSN:-"https://7e684483a06a4225b3e05cc47cae7a11@sentry.kolaente.de/2"}"
|
||||
VIKUNJA_HTTP_PORT="${VIKUNJA_HTTP_PORT:-80}"
|
||||
VIKUNJA_HTTPS_PORT="${VIKUNJA_HTTPS_PORT:-443}"
|
||||
|
||||
@ -14,6 +15,8 @@ VIKUNJA_API_URL=$(echo $VIKUNJA_API_URL |sed 's/\//\\\//g')
|
||||
|
||||
sed -i "s/http\:\/\/localhost\:3456//g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
|
||||
sed -i "s/'\/api\/v1/'$VIKUNJA_API_URL/g" /usr/share/nginx/html/index.html
|
||||
sed -i "s/\.SENTRY_ENABLED = false/\.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED/g" /usr/share/nginx/html/index.html
|
||||
sed -i "s/\.SENTRY_DSN = '.*'/\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'/g" /usr/share/nginx/html/index.html
|
||||
|
||||
sed -i "s/listen 80/listen $VIKUNJA_HTTP_PORT/g" /etc/nginx/nginx.conf
|
||||
sed -i "s/listen 443/listen $VIKUNJA_HTTPS_PORT/g" /etc/nginx/nginx.conf
|
||||
|
25
src/main.ts
25
src/main.ts
@ -1,4 +1,4 @@
|
||||
import { createApp, configureCompat } from 'vue'
|
||||
import {createApp, configureCompat} from 'vue'
|
||||
|
||||
configureCompat({
|
||||
COMPONENT_V_MODEL: false,
|
||||
@ -16,6 +16,8 @@ import {error, success} from './message'
|
||||
declare global {
|
||||
interface Window {
|
||||
API_URL: string;
|
||||
SENTRY_ENABLED: boolean;
|
||||
SENTRY_DSN: string,
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,13 +55,12 @@ const app = createApp(App)
|
||||
|
||||
app.use(Notifications)
|
||||
|
||||
|
||||
|
||||
app.use(shortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
|
||||
|
||||
// directives
|
||||
import focus from './directives/focus'
|
||||
import tooltip from './directives/tooltip'
|
||||
|
||||
app.directive('focus', focus)
|
||||
app.directive('tooltip', tooltip)
|
||||
|
||||
@ -68,6 +69,7 @@ import FontAwesomeIcon from './icons'
|
||||
import Button from './components/input/button.vue'
|
||||
import Modal from './components/modal/modal.vue'
|
||||
import Card from './components/misc/card.vue'
|
||||
|
||||
app.component('icon', FontAwesomeIcon)
|
||||
app.component('x-button', Button)
|
||||
app.component('modal', Modal)
|
||||
@ -78,6 +80,7 @@ import {getNamespaceTitle} from './helpers/getNamespaceTitle'
|
||||
import {getListTitle} from './helpers/getListTitle'
|
||||
import {colorIsDark} from './helpers/color/colorIsDark'
|
||||
import {setTitle} from './helpers/setTitle'
|
||||
|
||||
app.mixin({
|
||||
methods: {
|
||||
formatDateSince,
|
||||
@ -93,15 +96,15 @@ app.mixin({
|
||||
|
||||
app.config.errorHandler = (err, vm, info) => {
|
||||
// if (import.meta.env.PROD) {
|
||||
// error(err)
|
||||
// error(err)
|
||||
// } else {
|
||||
// console.error(err, vm, info)
|
||||
error(err)
|
||||
// console.error(err, vm, info)
|
||||
error(err)
|
||||
// }
|
||||
}
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
app.config.warnHandler = (msg, vm, info) => {
|
||||
app.config.warnHandler = (msg, vm, info) => {
|
||||
error(msg)
|
||||
}
|
||||
|
||||
@ -110,8 +113,8 @@ if (import.meta.env.DEV) {
|
||||
error(err)
|
||||
throw err
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('unhandledrejection', (err) => {
|
||||
// event.promise contains the promise object
|
||||
// event.reason contains the reason for the rejection
|
||||
@ -125,6 +128,10 @@ app.config.globalProperties.$message = {
|
||||
success,
|
||||
}
|
||||
|
||||
if (window.SENTRY_ENABLED) {
|
||||
import('./sentry').then(sentry => sentry.default(app, router))
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
The imports should happen inside the conditional block. Not sure: can sentry be loaded async? Or is that against what they recommend? The imports should happen inside the conditional block.
Best would be to split them in an external package aswell.
This makes especially sence since some blockers might else block some main application chunk that includes sentry.
Not sure: can sentry be loaded async? Or is that against what they recommend?
konrad
commented
They mention something about loading it async in their docs: https://docs.sentry.io/clients/javascript/install/ So I think it should be fine to extract this in a separate component and load that ansync on startup. They mention something about loading it async in their docs: https://docs.sentry.io/clients/javascript/install/
So I think it should be fine to extract this in a separate component and load that ansync on startup.
konrad
commented
Extracted and now loading async. Extracted and now loading async.
dpschen
commented
Cool :) I think the link is from the legacy version. This seems to be the new: https://docs.sentry.io/platforms/javascript/install/lazy-load-sentry/ Cool :) I think the link is from the legacy version. This seems to be the new: https://docs.sentry.io/platforms/javascript/install/lazy-load-sentry/
|
||||
}
|
||||
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
app.use(i18n)
|
||||
|
16
src/sentry.js
Normal file
16
src/sentry.js
Normal file
@ -0,0 +1,16 @@
|
||||
export default async function setupSentry(app, router) {
|
||||
const Sentry = await import('@sentry/vue')
|
||||
const {Integrations} = await import('@sentry/tracing')
|
||||
|
||||
Sentry.init({
|
||||
app,
|
||||
dsn: window.SENTRY_DSN,
|
||||
integrations: [
|
||||
new Integrations.BrowserTracing({
|
||||
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
|
||||
tracingOrigins: ['localhost', /^\//],
|
||||
}),
|
||||
],
|
||||
tracesSampleRate: 1.0,
|
||||
})
|
||||
}
|
77
yarn.lock
77
yarn.lock
@ -1320,6 +1320,81 @@
|
||||
estree-walker "^1.0.1"
|
||||
picomatch "^2.2.2"
|
||||
|
||||
"@sentry/browser@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.13.3.tgz#d4511791b1e484ad48785eba3bce291fdf115c1e"
|
||||
integrity sha512-jwlpsk2/u1cofvfYsjmqcnx50JJtf/T6HTgdW+ih8+rqWC5ABEZf4IiB/H+KAyjJ3wVzCOugMq5irL83XDCfqQ==
|
||||
dependencies:
|
||||
"@sentry/core" "6.13.3"
|
||||
"@sentry/types" "6.13.3"
|
||||
"@sentry/utils" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/core@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.13.3.tgz#5cbbb995128e793ebebcbf1d3b7514e0e5e8b221"
|
||||
integrity sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==
|
||||
dependencies:
|
||||
"@sentry/hub" "6.13.3"
|
||||
"@sentry/minimal" "6.13.3"
|
||||
"@sentry/types" "6.13.3"
|
||||
"@sentry/utils" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/hub@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.13.3.tgz#cc09623a69b5343315fdb61c7fdd0be74b72299f"
|
||||
integrity sha512-eYppBVqvhs5cvm33snW2sxfcw6G20/74RbBn+E4WDo15hozis89kU7ZCJDOPkXuag3v1h9igns/kM6PNBb41dw==
|
||||
dependencies:
|
||||
"@sentry/types" "6.13.3"
|
||||
"@sentry/utils" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/minimal@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.13.3.tgz#a675a79bcc830142e4f95e6198a2efde2cd3901e"
|
||||
integrity sha512-63MlYYRni3fs5Bh8XBAfVZ+ctDdWg0fapSTP1ydIC37fKvbE+5zhyUqwrEKBIiclEApg1VKX7bkKxVdu/vsFdw==
|
||||
dependencies:
|
||||
"@sentry/hub" "6.13.3"
|
||||
"@sentry/types" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/tracing@^6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.13.3.tgz#ca657d4afa99c50f15e638fe38405bac33e780ee"
|
||||
integrity sha512-yyOFIhqlprPM0g4f35Icear3eZk2mwyYcGEzljJfY2iU6pJwj1lzia5PfSwiCW7jFGMmlBJNhOAIpfhlliZi8Q==
|
||||
dependencies:
|
||||
"@sentry/hub" "6.13.3"
|
||||
"@sentry/minimal" "6.13.3"
|
||||
"@sentry/types" "6.13.3"
|
||||
"@sentry/utils" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/types@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.13.3.tgz#63ad5b6735b0dfd90b3a256a9f8e77b93f0f66b2"
|
||||
integrity sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==
|
||||
|
||||
"@sentry/utils@6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.13.3.tgz#188754d40afe693c3fcae410f9322531588a9926"
|
||||
integrity sha512-zYFuFH3MaYtBZTeJ4Yajg7pDf0pM3MWs3+9k5my9Fd+eqNcl7dYQYJbT9gyC0HXK1QI4CAMNNlHNl4YXhF91ag==
|
||||
dependencies:
|
||||
"@sentry/types" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sentry/vue@^6.13.3":
|
||||
version "6.13.3"
|
||||
resolved "https://registry.yarnpkg.com/@sentry/vue/-/vue-6.13.3.tgz#04e24cf493df253e6eaebc215bbc710fac73b7ff"
|
||||
integrity sha512-FqqQzAaSA4UWJWwH72Ucs3Tp40VuNSabkc58I4t7vCWFFJgjomGT0Jc0d22TVzD2fABztA+U37cUZXh16TNMUA==
|
||||
dependencies:
|
||||
"@sentry/browser" "6.13.3"
|
||||
"@sentry/core" "6.13.3"
|
||||
"@sentry/minimal" "6.13.3"
|
||||
"@sentry/types" "6.13.3"
|
||||
"@sentry/utils" "6.13.3"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@sideway/address@^4.1.0":
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
|
||||
@ -6637,7 +6712,7 @@ ts-jest@27.0.7:
|
||||
semver "7.x"
|
||||
yargs-parser "20.x"
|
||||
|
||||
tslib@^1.8.1, tslib@^1.9.0:
|
||||
tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
Reference in New Issue
Block a user
Since the API_URL is can be changed at runtime and the window.API_URL is basically the "poor mans store" for the url I thought that makes kind of sense for now.
In contrast Sentry shouldn't be something that can be changed at runtime.
Maybe we can use here: https://vitejs.dev/guide/env-and-mode.html#production-replacement
The problem with using vite's env variables is they are not changable without recompiling everything. I'd like self-hosters to be able to enable sentry without recompiling everything, hence the window variable. I think it is fine if you'll need to change it in the index.html file before it has an effect, much like the api url.
Having a déjà vu(e) again: I thought I ansered here already :D
Makes sense what you write! I guess is a specific need / usecase for Vikunja =)