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

feat: add sentry #879

Merged
konrad merged 6 commits from feature/sentry into main 2021-10-26 18:53:18 +00:00
Conversation 3 Commits 6 Files Changed 6 +118 -12
6 changed files with 118 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -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
dpschen commented 2021-10-19 21:22:44 +00:00
Outdated
Review
Copy Link

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

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
konrad commented 2021-10-21 18:19:51 +00:00
Outdated
Review
Copy Link

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.

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.
dpschen commented 2021-10-26 12:48:27 +00:00
Outdated
Review
Copy Link

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

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 =)
window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
</script>
</body>
</html>

2
package.json
View File

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

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

@ -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 2021-10-19 21:26:07 +00:00
Outdated
Review
Copy Link

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?

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 2021-10-21 18:21:27 +00:00
Outdated
Review
Copy Link

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.
👍 1
konrad commented 2021-10-21 18:45:16 +00:00
Outdated
Review
Copy Link

Extracted and now loading async.

Extracted and now loading async.
dpschen commented 2021-10-21 18:55:25 +00:00
Outdated
Review
Copy Link

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/
👍 1
}
app.use(router)
app.use(store)
app.use(i18n)

16
src/sentry.js Normal file
View 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
View File

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