fix: fix sentry integration and some slight errors (#6651)

composer.json

@@ -38,7 +38,7 @@
     "socialiteproviders/linkedin": "^4.2",
     "socialiteproviders/microsoft-azure": "^5.1",
     "socialiteproviders/twitter": "^4.1",
-    "tightenco/ziggy": "1.5.2",
+    "tightenco/ziggy": "1.6.0",
     "uploadcare/uploadcare-php": "^3.2"
   },
   "require-dev": {

package.json

@@ -12,9 +12,9 @@
   },
   "devDependencies": {
     "@inertiajs/vue3": "^1.0.7",
-    "@popperjs/core": "^2.11.7",
+    "@popperjs/core": "^2.11.8",
     "@sentry/tracing": "^7.11.1",
-    "@sentry/vue": "^7.11.1",
+    "@sentry/vue": "^7.54.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.7",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
@@ -23,29 +23,29 @@
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "charts.css": "^0.9.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.11.1",
+    "eslint-plugin-vue": "^9.14.1",
     "husky": "^8.0.3",
-    "laravel-vite-plugin": "^0.7.4",
-    "laravel-vue-i18n": "^2.4.3",
+    "laravel-vite-plugin": "^0.7.8",
+    "laravel-vue-i18n": "^2.5.1",
     "lint-staged": "^13.2.2",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",
     "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
-    "sass": "^1.62.1",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "sass": "^1.63.3",
     "tailwindcss": "^3.3.2",
     "tiny-emitter": "^2.1.0",
     "uploadcare-vue": "^1.0.0",
-    "v-calendar": "^3.0.3",
-    "vite": "^4.3.5",
+    "v-calendar": "next",
+    "vite": "^4.3.9",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vuedraggable-es": "^4.1.1",
-    "ziggy-js": "1.5.2"
+    "ziggy-js": "1.6.0"
   },
   "lint-staged": {
     "*.js|resources/**/*.{vue,js}": [

resources/js/Pages/Vault/Contact/Index.vue

@@ -80,14 +80,14 @@ const update = () => {
               <div class="flex items-center">
                 <dropdown
                   v-model="form.sort_order"
-                  :data="props.data.contact_sort_orders"
+                  :data="data.contact_sort_orders"
                   :required="false"
                   :dropdown-class="'block w-full me-2'"
                   @change="update()" />
 
                 <pretty-link
                   v-if="layoutData.vault.permission.at_least_editor"
-                  :href="props.data.url.contact.create"
+                  :href="data.url.contact.create"
                   :text="$t('Add a contact')"
                   class="ms-3"
                   :icon="'plus'" />

resources/js/Pages/Vault/Group/Edit.vue

@@ -117,7 +117,7 @@ const update = () => {
           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
             <dropdown
               v-model="form.group_type_id"
-              :data="props.data.group_types"
+              :data="data.group_types"
               :required="true"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block w-full'"
@@ -126,7 +126,7 @@ const update = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>

resources/js/Pages/Vault/Group/Show.vue

@@ -118,7 +118,7 @@ const destroy = () => {
           <div class="flex items-center">
             <ul class="list">
               <li class="me-4 inline">
-                <Link :href="props.data.url.edit" class="text-blue-500 hover:underline">{{ $t('Edit') }}</Link>
+                <Link :href="data.url.edit" class="text-blue-500 hover:underline">{{ $t('Edit') }}</Link>
               </li>
               <li class="inline" @click="deletingGroup = true">
                 <span class="inline cursor-pointer text-red-500 hover:text-red-900">{{ $t('Delete') }}</span>

resources/js/Shared/Modules/Addresses.vue

@@ -183,9 +183,7 @@ const destroy = () => {
         class="mb-6 rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
         <!-- radio button: choose existing or create new address -->
-        <div
-          v-if="props.data.addresses_in_vault.length > 0"
-          class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
+        <div v-if="data.addresses_in_vault.length > 0" class="mb-2 border-b border-gray-200 p-5 dark:border-gray-700">
           <div class="mb-2 flex items-center">
             <input
               id="chooseExisting"

resources/js/Shared/Modules/CreateLifeEvent.vue

@@ -258,7 +258,7 @@ const store = () => {
         <div v-if="!editDate" class="flex items-center justify-between">
           <div>
             <span class="text-sm">{{ $t('Date of the event:') }}</span>
-            {{ props.lifeEvent ? props.lifeEvent.happened_at : props.data.current_date_human_format }}
+            {{ lifeEvent ? lifeEvent.happened_at : data.current_date_human_format }}
           </div>
 
           <p @click="editDate = true" class="cursor-pointer text-sm text-blue-500 hover:underline">
@@ -292,9 +292,9 @@ const store = () => {
 
         <!-- current contact -->
         <div class="mb-4 flex items-center">
-          <avatar :data="props.data.contact.avatar" :class="'me-2 h-5 w-5'" />
+          <avatar :data="data.contact.avatar" :class="'me-2 h-5 w-5'" />
 
-          <span>{{ props.data.contact.name }}</span>
+          <span>{{ data.contact.name }}</span>
         </div>
 
         <!-- all other participants -->

resources/js/Shared/Modules/FeedItems/Note.vue

@@ -15,28 +15,28 @@ defineProps({
       v-if="!contactViewMode"
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <Avatar
-        :data="props.data.contact.avatar"
+        :data="data.contact.avatar"
         :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
-        <Link :href="props.data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
-          props.data.contact.name
+        <Link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
+          data.contact.name
         }}</Link>
       </div>
     </div>
 
     <div class="px-3 pb-2 pt-2">
       <!-- the note still exists in the system -->
-      <div v-if="props.data.note.object">
-        <div v-if="props.data.note.object.title" class="mb-2 block">{{ props.data.note.object.title }}</div>
-        <div>{{ props.data.note.object.body }}</div>
+      <div v-if="data.note.object">
+        <div v-if="data.note.object.title" class="mb-2 block">{{ data.note.object.title }}</div>
+        <div>{{ data.note.object.body }}</div>
       </div>
 
       <!-- the note was deleted -->
       <span
         v-else
         class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:me-0">
-        <span>{{ props.data.note.description }}</span>
+        <span>{{ data.note.description }}</span>
       </span>
     </div>
   </div>

resources/js/Shared/Modules/Goals.vue

@@ -215,7 +215,7 @@ export default {
       axios
         .post(this.data.url.store, this.form)
         .then((response) => {
-          this.flash($t('The goal has been created'), 'success');
+          this.flash(this.$t('The goal has been created'), 'success');
           this.localGoals.unshift(response.data.data);
           this.createGoalModalShown = false;
         })
@@ -230,7 +230,7 @@ export default {
       axios
         .put(goal.url.streak_update, this.form)
         .then((response) => {
-          this.flash($t('The goal has been edited'), 'success');
+          this.flash(this.$t('The goal has been edited'), 'success');
           this.localGoals[this.localGoals.findIndex((x) => x.id === goal.id)] = response.data.data;
           this.editedGoalId = 0;
         })

resources/js/Shared/Modules/LifeEvent.vue

@@ -137,8 +137,8 @@ const toggleLifeEventVisibility = (lifeEvent) => {
     <div>
       <!-- add a timeline event -->
       <create-life-event
-        :data="props.data"
-        :layout-data="props.layoutData"
+        :data="data"
+        :layout-data="layoutData"
         :open-modal="createLifeEventModalShown"
         :create-timeline-event="true"
         @close-modal="createLifeEventModalShown = false"
@@ -200,8 +200,8 @@ const toggleLifeEventVisibility = (lifeEvent) => {
               class="mb-2 ms-6 rounded-lg border-gray-200 dark:border-gray-700">
               <template v-if="lifeEvent.edit">
                 <create-life-event
-                  :data="props.data"
-                  :layout-data="props.layoutData"
+                  :data="data"
+                  :layout-data="layoutData"
                   :open-modal="lifeEvent.edit"
                   :life-event="lifeEvent"
                   @close-modal="lifeEvent.edit = false"
@@ -338,8 +338,8 @@ const toggleLifeEventVisibility = (lifeEvent) => {
               </span>
 
               <create-life-event
-                :data="props.data"
-                :layout-data="props.layoutData"
+                :data="data"
+                :layout-data="layoutData"
                 :open-modal="showAddLifeEventModalForTimelineEventId == timelineEvent.id"
                 :create-timeline-event="false"
                 :timeline-event="timelineEvent"

resources/js/Shared/Modules/Notes.vue

@@ -323,7 +323,7 @@ export default {
       this.editedNoteId = note.id;
       this.form.title = note.title;
       this.form.body = note.body;
-      this.form.emotion = note.emotion.id;
+      this.form.emotion = note.emotion?.id;
     },
 
     showTitleField() {
@@ -363,7 +363,7 @@ export default {
         .put(note.url.update, this.form)
         .then((response) => {
           this.loadingState = '';
-          this.flash($t('The note has been edited'), 'success');
+          this.flash(this.$t('The note has been edited'), 'success');
           this.localNotes[this.localNotes.findIndex((x) => x.id === note.id)] = response.data.data;
           this.editedNoteId = 0;
         })

resources/js/Shared/Modules/Pets.vue

@@ -211,7 +211,7 @@ export default {
       axios
         .post(this.data.url.store, this.form)
         .then((response) => {
-          this.flash($t('The pet has been added'), 'success');
+          this.flash(this.$t('The pet has been added'), 'success');
           this.localPets.unshift(response.data.data);
           this.loadingState = '';
           this.addPetModalShown = false;
@@ -229,7 +229,7 @@ export default {
         .put(pet.url.update, this.form)
         .then((response) => {
           this.loadingState = '';
-          this.flash($t('The pet has been edited'), 'success');
+          this.flash(this.$t('The pet has been edited'), 'success');
           this.localPets[this.localPets.findIndex((x) => x.id === pet.id)] = response.data.data;
           this.editedPetId = 0;
         })

resources/js/Shared/Modules/Posts.vue

@@ -31,11 +31,11 @@ defineProps({
     </div>
 
     <!-- posts -->
-    <div v-if="props.data.length > 0">
+    <div v-if="data.length > 0">
       <ul class="mb-4 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
         <!-- body of the post -->
         <li
-          v-for="post in props.data"
+          v-for="post in data"
           :key="post.id"
           class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
           <Link :href="post.url.show" class="mb-2 block text-blue-500 hover:underline">{{ post.title }}</Link>
@@ -69,7 +69,7 @@ defineProps({
 
     <!-- blank state -->
     <div
-      v-if="props.data.length == 0"
+      v-if="data.length == 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_posts.svg" :alt="$t('Notes')" class="mx-auto mt-4 h-20 w-20" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no posts yet.') }}</p>

resources/js/sentry.js

@@ -26,13 +26,14 @@ const myTransport = (options) => {
 const install = (app, options) => {
   if (options.dsn !== undefined) {
     Sentry.init({
+      app,
       dsn: options.dsn,
       tunnel: '/sentry/tunnel',
       environment: options.environment || null,
       release: options.release || '',
       sendDefaultPii: options.sendDefaultPii || false,
       tracesSampleRate: options.tracesSampleRate || 0.0,
-      integrations: [options.tracesSampleRate > 0 ? new BrowserTracing() : null],
+      integrations: options.tracesSampleRate > 0 ? [new BrowserTracing()] : [],
       transport: myTransport,
     });
     app.mixin(Sentry.createTracingMixins({ trackComponents: true }));