From d2760812c28e8027eb833851f9417d4de96d1cf4 Mon Sep 17 00:00:00 2001 From: ysbrandB <72889753+ysbrandB@users.noreply.github.com> Date: Tue, 27 Jan 2026 00:42:02 +0100 Subject: [PATCH] Add sentry to the frontend --- .github/workflows/docker_build.yml | 2 + client/package-lock.json | 102 +++++++++++++++++++++++++++++ client/package.json | 1 + client/src/main.js | 12 +++- docker/Dockerfile | 4 ++ server/.env.example | 1 + server/instrument.js | 1 + 7 files changed, 121 insertions(+), 2 deletions(-) diff --git a/.github/workflows/docker_build.yml b/.github/workflows/docker_build.yml index 39fa99a8..f5b5f8f8 100644 --- a/.github/workflows/docker_build.yml +++ b/.github/workflows/docker_build.yml @@ -30,6 +30,8 @@ jobs: context: . file: ./docker/Dockerfile push: true + build-args: | + VITE_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }} tags: | hyttioaoac/protube:latest hyttioaoac/protube:${{ github.sha }} diff --git a/client/package-lock.json b/client/package-lock.json index 2ae95daf..226418da 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,6 +10,7 @@ "@fortawesome/free-solid-svg-icons": "^7.1.0", "@fortawesome/vue-fontawesome": "^3.0.0-5", "@mdi/font": "7.4.47", + "@sentry/vue": "^10.36.0", "@tailwindcss/postcss": "^4.1.17", "@vitejs/plugin-vue": "^6.0.2", "core-js": "^3.21.1", @@ -1255,6 +1256,107 @@ "win32" ] }, + "node_modules/@sentry-internal/browser-utils": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.36.0.tgz", + "integrity": "sha512-WILVR8HQBWOxbqLRuTxjzRCMIACGsDTo6jXvzA8rz6ezElElLmIrn3CFAswrESLqEEUa4CQHl5bLgSVJCRNweA==", + "license": "MIT", + "dependencies": { + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry-internal/feedback": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.36.0.tgz", + "integrity": "sha512-zPjz7AbcxEyx8AHj8xvp28fYtPTPWU1XcNtymhAHJLS9CXOblqSC7W02Jxz6eo3eR1/pLyOo6kJBUjvLe9EoFA==", + "license": "MIT", + "dependencies": { + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry-internal/replay": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.36.0.tgz", + "integrity": "sha512-nLMkJgvHq+uCCrQKV2KgSdVHxTsmDk0r2hsAoTcKCbzUpXyW5UhCziMRS6ULjBlzt5sbxoIIplE25ZpmIEeNgg==", + "license": "MIT", + "dependencies": { + "@sentry-internal/browser-utils": "10.36.0", + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry-internal/replay-canvas": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.36.0.tgz", + "integrity": "sha512-DLGIwmT2LX+O6TyYPtOQL5GiTm2rN0taJPDJ/Lzg2KEJZrdd5sKkzTckhh2x+vr4JQyeaLmnb8M40Ch1hvG/vQ==", + "license": "MIT", + "dependencies": { + "@sentry-internal/replay": "10.36.0", + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/browser": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.36.0.tgz", + "integrity": "sha512-yHhXbgdGY1s+m8CdILC9U/II7gb6+s99S2Eh8VneEn/JG9wHc+UOzrQCeFN0phFP51QbLkjkiQbbanjT1HP8UQ==", + "license": "MIT", + "dependencies": { + "@sentry-internal/browser-utils": "10.36.0", + "@sentry-internal/feedback": "10.36.0", + "@sentry-internal/replay": "10.36.0", + "@sentry-internal/replay-canvas": "10.36.0", + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/core": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.36.0.tgz", + "integrity": "sha512-EYJjZvofI+D93eUsPLDIUV0zQocYqiBRyXS6CCV6dHz64P/Hob5NJQOwPa8/v6nD+UvJXvwsFfvXOHhYZhZJOQ==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/vue": { + "version": "10.36.0", + "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-10.36.0.tgz", + "integrity": "sha512-pGED21QngK1ulqGsNn1NyBKgay8Cf7qZBnaxQXvnm9RaIlTGYdqg7TeooQru45We/8f0DzM6n59YykAsUu21kw==", + "license": "MIT", + "dependencies": { + "@sentry/browser": "10.36.0", + "@sentry/core": "10.36.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@tanstack/vue-router": "^1.64.0", + "pinia": "2.x || 3.x", + "vue": "2.x || 3.x" + }, + "peerDependenciesMeta": { + "@tanstack/vue-router": { + "optional": true + }, + "pinia": { + "optional": true + } + } + }, "node_modules/@sindresorhus/is": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz", diff --git a/client/package.json b/client/package.json index 61de9c42..e749013c 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "@fortawesome/free-solid-svg-icons": "^7.1.0", "@fortawesome/vue-fontawesome": "^3.0.0-5", "@mdi/font": "7.4.47", + "@sentry/vue": "^10.36.0", "@tailwindcss/postcss": "^4.1.17", "@vitejs/plugin-vue": "^6.0.2", "core-js": "^3.21.1", diff --git a/client/src/main.js b/client/src/main.js index 91ced54b..df50d418 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -60,9 +60,17 @@ import "./assets/tailwind.css"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import router from "./router/index.js"; - +import * as Sentry from "@sentry/vue"; const app = createApp(App); -// app.config.globalProperties.eventBus = eventBus; + +Sentry.init({ + app, + dsn: import.meta.env.VITE_SENTRY_DSN, + // Adds request headers and IP for users, for more info visit: + // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/#sendDefaultPii + sendDefaultPii: false, +}); + app.component("FontAwesomeIcon", FontAwesomeIcon); app.use(router); app.mount("#app"); diff --git a/docker/Dockerfile b/docker/Dockerfile index 29e363e3..fbf4f60c 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -6,6 +6,10 @@ RUN apk add nano RUN mkdir /protube COPY . /protube +# Bake the sentry DSN into the frontend build +ARG VITE_SENTRY_DSN +ENV VITE_SENTRY_DSN=$VITE_SENTRY_DSN + # Installing and building WORKDIR /protube RUN npm install diff --git a/server/.env.example b/server/.env.example index 68a1be67..178e5015 100644 --- a/server/.env.example +++ b/server/.env.example @@ -9,6 +9,7 @@ NODE_ENV=development #Sentry SENTRY_DSN= +SENTRY_TRACES_SAMPLE_RATE=0.1 # Name prefix for docker containers DOCKER_CONTAINER_NAME=protube diff --git a/server/instrument.js b/server/instrument.js index 71cf1c72..69e36420 100644 --- a/server/instrument.js +++ b/server/instrument.js @@ -3,4 +3,5 @@ const Sentry = require("@sentry/node"); Sentry.init({ dsn: process.env.SENTRY_DSN, sendDefaultPii: false, + tracesSampleRate: process.env.SENTRY_TRACES_SAMPLE_RATE, });