feat: set up error reporting with sentry on the frontend

.vscode/settings.json

@@ -13,5 +13,8 @@
         "./lumigator/schemas",
         "./lumigator/jobs",
         "./lumigator/sdk"
+    ],
+    "cSpell.words": [
+        "LUMIGATOR"
     ]
 }

lumigator/frontend/eslint.config.ts

@@ -17,7 +17,13 @@ export default defineConfigWithVueTs(
 
   {
     name: 'app/files-to-ignore',
-    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: [
+      '**/dist/**',
+      '**/dist-ssr/**',
+      '**/coverage/**',
+      '**/playwright-report/**',
+      '**/test-results/**',
+    ],
   },
 
   pluginVue.configs['flat/essential'],

lumigator/frontend/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.2.5",
+    "@sentry/vue": "^9.5.0",
     "axios": "^1.7.9",
     "papaparse": "^5.5.2",
     "pinia": "^3.0.1",

lumigator/frontend/src/App.vue

@@ -23,12 +23,12 @@
           <ul>
             <li>
               <a href="https://github.com/mozilla-ai/lumigator" target="_blank"
-                >GitHub <span class="pi pi-arrow-up-right" />
+                >GitHub <span class="pi pi-arrow-up-right"></span>
               </a>
             </li>
             <li>
               <a href="https://mozilla-ai.github.io/lumigator/" target="_blank"
-                >Documentation <span class="pi pi-arrow-up-right" />
+                >Documentation <span class="pi pi-arrow-up-right"></span>
               </a>
             </li>
           </ul>
@@ -55,6 +55,11 @@
       </div>
       <div class="sliding-panel" :class="{ open: showSlidingPanel }"></div>
     </div>
+    <ConsentBanner
+      v-if="!hasResponded && isProdBuild"
+      @accept="acceptConsent"
+      @reject="rejectConsent"
+    ></ConsentBanner>
   </div>
 </template>
 
@@ -67,9 +72,13 @@ import { useSlidePanel } from '@/composables/useSlidePanel'
 import ConfirmDialog from 'primevue/confirmdialog'
 import Toast from 'primevue/toast'
 import Button from 'primevue/button'
+import ConsentBanner from './components/common/ConsentBanner.vue'
+import { useSentryConsent } from './composables/useSentryConsent'
 
 const datasetsStore = useDatasetStore()
 const experimentsStore = useExperimentStore()
+const { hasResponded, acceptConsent, rejectConsent } = useSentryConsent()
+const isProdBuild = import.meta.env.PROD
 
 const tooltipConfig = ref({
   value: `Lumigator is connected to external GPUs.`,

lumigator/frontend/src/components/common/ConsentBanner.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="consent-banner">
+    <div class="container">
+      <PrimeVueButton
+        class="close-button"
+        icon="pi pi-times"
+        severity="secondary"
+        variant="text"
+        raised
+        rounded
+        aria-label="Cancel"
+        @click="declineConsent"
+      ></PrimeVueButton>
+      <div class="content-wrapper">
+        <h4 class="header">Data Usage</h4>
+        <p class="text">
+          To help improve Lumigator, you can choose to share completely anonymized usage data. We do
+          not profile you or track your location or web activity. Do you allow us to collect this
+          data? You can always change your choice in Settings.
+        </p>
+        <div class="actions">
+          <PrimeVueButton size="small" severity="secondary" @click="declineConsent" rounded
+            >No</PrimeVueButton
+          >
+          <PrimeVueButton size="small" @click="acceptConsent" rounded>Yes</PrimeVueButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Button } from 'primevue'
+
+export default {
+  name: 'ConsentBanner',
+  emits: ['accept', 'reject'],
+  components: {
+    PrimeVueButton: Button,
+  },
+  setup(_props, { emit }) {
+    function acceptConsent() {
+      emit('accept')
+    }
+
+    function declineConsent() {
+      emit('reject')
+    }
+
+    return {
+      acceptConsent,
+      declineConsent,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables';
+@use '@/styles/mixins';
+
+.consent-banner {
+  position: fixed;
+  bottom: 0;
+  color: variables.$l-grey-100;
+  text-align: center;
+
+  display: flex;
+  width: 100%;
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+
+  border-top: 0.5px solid variables.$border-stroke;
+  background: variables.$black;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 31.75rem;
+  padding: 0.5rem 0rem;
+  align-items: center;
+}
+
+.header {
+  @include mixins.paragraph-2;
+  color: variables.$white;
+}
+
+.text {
+  color: variables.$l-grey-100;
+
+  @include mixins.paragraph;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.close-button {
+  position: absolute;
+  margin-right: 2rem;
+  top: 0;
+  right: 0;
+}
+</style>

lumigator/frontend/src/components/common/TableView.vue

@@ -91,7 +91,6 @@
 </template>
 <script lang="ts">
 import {
-  // Button,
   Column,
   DataTable,
   IconField,
@@ -110,7 +109,6 @@ export default defineComponent({
   components: {
     DataTable,
     Column,
-    // PrimeVueButton: Button,
     PrimeVueTextarea: Textarea,
     IconField,
     InputIcon,
@@ -209,7 +207,6 @@ export default defineComponent({
       onCellEditComplete,
       onCellEditCancel,
       filters,
-      // allColumns,
       selectedColumns,
       onToggle,
       expandedRows,

lumigator/frontend/src/components/datasets/LDatasetDetails.vue

@@ -171,7 +171,6 @@ async function handleGenerateGroundTruth() {
 <style lang="scss" scoped>
 @use '@/styles/variables' as *;
 .l-dataset-details {
-  $root: &;
   display: flex;
   flex-direction: column;
 

lumigator/frontend/src/components/datasets/LDatasetEmpty.vue

@@ -38,8 +38,8 @@
         href="https://mozilla-ai.github.io/lumigator/get-started/quickstart.html#upload-a-dataset"
         target="_blank"
         style="background-color: transparent"
-        >Learn more <span class="pi pi-arrow-up-right"
-      /></a>
+        >Learn more <span class="pi pi-arrow-up-right"></span
+      ></a>
     </p>
   </div>
 </template>
@@ -53,7 +53,6 @@ const emit = defineEmits(['l-add-dataset'])
 @use '@/styles/variables' as *;
 
 .l-dataset-empty {
-  $root: &;
   max-width: 600px;
   margin: auto;
 

lumigator/frontend/src/components/datasets/LDatasetTable.vue

@@ -173,7 +173,6 @@ defineExpose({ loading })
 @use '@/styles/variables' as *;
 
 .l-dataset-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;

lumigator/frontend/src/components/datasets/LInferenceJobsTable.vue

@@ -149,7 +149,6 @@ onBeforeUnmount(() => {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 .l-job-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;