Feature: add Sentry to the vue frontend

.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 }}

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",

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");

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

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

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,
 });