Release 5.3.6

.env.dist

@@ -6,6 +6,8 @@ VUE_APP_PRIMARY_COLOR=#015d99
 VUE_APP_SECONDARY_COLOR=#791f5e
 VUE_APP_ANALYTICS_ID='UA-xxxxxxxxx-y'
 VUE_APP_RECAPTCHA_ID=''
+VUE_APP_SENTRY_DSN=123
+
 # [authenticator | authy] (Google Authenticator, Authy)
 VUE_APP_TOTP_APP_RECOMMENDATION=authenticator
 VUE_ALLOWED_HOSTS=profile.example.org

package.json

@@ -1,5 +1,6 @@
 {
   "name": "idp-profile-ui",
+  "version": "5.3.5",
   "engines": {
     "node": ">=18.0.0 <19.0.0"
   },
@@ -15,6 +16,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
+    "@sentry/vue": "^7.113.0",
     "@simplewebauthn/browser": "^4.1.0",
     "axios": "^1.6.0",
     "date-fns": "^2.28.0",

src/locales/en.json

@@ -126,7 +126,7 @@
     "progress": {
       "header": "Profile strength",
       "addMethod": "Add a recovery method",
-      "addTotp": "Add a authenticator app (2SV)",
+      "addTotp": "Add an authenticator app (2SV)",
       "addSecurityKey": "Add a security key (2SV)",
       "addCodes": "Add some backup codes (2SV)"
     }

src/main.js

@@ -1,18 +1,43 @@
-import '@babel/polyfill'
-import Vue from 'vue'
-import { configuredRouter, configuredVuetify } from  './plugins'
 import App from './App.vue'
+import '@babel/polyfill'
 import '@/global/components'
 import '@/global/filters'
+import { configuredRouter as router, configuredVuetify } from './plugins'
+import * as Sentry from '@sentry/vue'
+import Vue from 'vue'
+
+const environment = process.env.NODE_ENV || 'development'
+const dsn = process.env.VUE_APP_SENTRY_DSN
+const release = process.env.VUE_APP_VERSION
+
+console.debug('Environment:', environment, 'Release:', release, 'DSN:', dsn)
+Sentry.init({
+  Vue,
+  dsn,
+  integrations: [Sentry.browserTracingIntegration({ router }), Sentry.replayIntegration()],
+  environment,
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  // tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+})
 
 new Vue({
   data: {
-    idpConfig: {}
+    idpConfig: {},
   },
   async created() {
     this.idpConfig = await this.$API.get('config')
   },
   vuetify: configuredVuetify,
-  router: configuredRouter,
-  render: h => h(App),
+  router,
+  render: (h) => h(App),
 }).$mount('#app')

src/profile/ProfileWizard.vue

@@ -2,11 +2,13 @@
   <v-stepper v-if="currentStep.id" v-model="currentStep.id">
     <v-stepper-header>
       <template v-for="_step in steps">
-        <v-stepper-step :step="_step.id" 
-                        :complete="_step.state != ''"
-                        :complete-icon="toIcon(_step.state)" 
-                        :color="toColor(_step.state)" 
-                        :key="`step-${_step.id}`">
+        <v-stepper-step
+          :step="_step.id"
+          :complete="_step.state != ''"
+          :complete-icon="toIcon(_step.state)"
+          :color="toColor(_step.state)"
+          :key="`step-${_step.id}`"
+        >
           {{ $vuetify.lang.t(`$vuetify.${_step.nameKey}`) }}
         </v-stepper-step>
 
@@ -18,7 +20,7 @@
       <v-stepper-content :step="currentStep.id" class="px-2 px-sm-6">
         <slot />
 
-        <ButtonBar >
+        <ButtonBar>
           <slot name="actions" />
         </ButtonBar>
       </v-stepper-content>
@@ -40,29 +42,29 @@ export default {
     this.currentStep = Steps.forPath(this.$route.path)
   },
   methods: {
-    hasMoreSteps: step => !Steps.isLast(step),
-    toColor: state => {
+    hasMoreSteps: (step) => !Steps.isLast(step),
+    toColor: (state) => {
       const map = {
         complete: 'success',
-        skipped: 'warning'
+        skipped: 'warning',
       }
 
       return map[state] || 'primary'
     },
-    toIcon: state => {
+    toIcon: (state) => {
       const map = {
-        skipped: '$vuetify.icons.warning'
+        skipped: '$vuetify.icons.warning',
       }
 
       return map[state] || '$vuetify.icons.complete'
     },
-    completed: function() { 
+    completed: function () {
       this.currentStep.state = 'complete'
     },
-    next: function() {
+    next: function () {
       this.$router.push(Steps.next(this.currentStep).paths[0]) // this assumes the first path in step's config is the right one.
     },
-    skipped: function() {
+    skipped: function () {
       this.currentStep.state = 'skipped'
     },
     allDone() {