fix: Fix Sentry issues from Vite migration (#10262)

Fixes the following issues

- https://chatwoot-p3.sentry.io/issues/5966466083
- https://chatwoot-p3.sentry.io/issues/5966497518
- https://chatwoot-p3.sentry.io/issues/5966555379

For the first one, I am not sure if the fix is 100% correct, since I was
not able to reproduce, but I am confident it will work.

For both, 1st and 2nd issues, the problem came from the fact that we set
individual records to `undefined` when the intent was to remove it,
explicitly using delete fixes the issue.

### Whats up with the store changes?

Glad you asked, this comes down to Vue reactivity, previously Vue didn't
track undefined strictly, it just kinda ignored it, in Vue 3, the
reactivity changed significantly when they introduced ES6 proxies. The
Proxy tracks all property changes, including those set to undefined, so
properties remain enumerable.

So to delete a record, we actually have to the delete it using the
delete keyword, or replace the parent object with a new object splicing
the object to be deleted out.

I am assuming it worked earlier because VueX 3 reactivity was using
Object.defineProperty. Setting it to undefined might have "deleted" it
earlier

---------

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/store/modules/contacts/mutations.js

@@ -1,4 +1,5 @@
 import types from '../../mutation-types';
+import * as Sentry from '@sentry/vue';
 
 export const mutations = {
   [types.SET_CONTACT_UI_FLAG]($state, data) {
@@ -48,12 +49,23 @@ export const mutations = {
   [types.DELETE_CONTACT]: ($state, id) => {
     const index = $state.sortOrder.findIndex(item => item === id);
     $state.sortOrder.splice(index, 1);
-    $state.records[id] = null;
+    delete $state.records[id];
   },
 
   [types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
     Object.values($state.records).forEach(element => {
-      const availabilityStatus = data[element.id];
+      let availabilityStatus;
+      try {
+        availabilityStatus = data[element.id];
+      } catch (error) {
+        Sentry.setContext('contact is undefined', {
+          records: $state.records,
+          data: data,
+        });
+        Sentry.captureException(error);
+
+        return;
+      }
       if (availabilityStatus) {
         $state.records[element.id].availability_status = availabilityStatus;
       } else {

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -33,7 +33,7 @@ export const mutations = {
       // On reconnect, if there is existing notification with same primary_actor_id,
       // it will be deleted and the new one will be added. So it will solve with duplicate notification
       if (existingNotification) {
-        $state.records[existingNotification.id] = undefined;
+        delete $state.records[existingNotification.id];
       }
 
       $state.records[notification.id] = {
@@ -72,7 +72,7 @@ export const mutations = {
   },
   [types.DELETE_NOTIFICATION]($state, data) {
     const { notification, unread_count: unreadCount, count } = data;
-    $state.records[notification.id] = undefined;
+    delete $state.records[notification.id];
     $state.meta.unreadCount = unreadCount;
     $state.meta.count = count;
   },
@@ -83,7 +83,7 @@ export const mutations = {
   [types.DELETE_READ_NOTIFICATIONS]: $state => {
     Object.values($state.records).forEach(item => {
       if (item.read_at) {
-        $state.records[item.id] = undefined;
+        delete $state.records[item.id];
       }
     });
   },