From e0ef007047078cf6cfdf3cf37d3f64e81f2273b9 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 14 Oct 2024 23:14:59 +0530
Subject: [PATCH] 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>
---
 .../store/modules/contacts/mutations.js          | 16 ++++++++++++++--
 .../store/modules/notifications/mutations.js     |  6 +++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/store/modules/contacts/mutations.js b/app/javascript/dashboard/store/modules/contacts/mutations.js
index 13e3ac2e5..41a763be9 100644
--- a/app/javascript/dashboard/store/modules/contacts/mutations.js
+++ b/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 {
diff --git a/app/javascript/dashboard/store/modules/notifications/mutations.js b/app/javascript/dashboard/store/modules/notifications/mutations.js
index 333190d1a..2fb365beb 100644
--- a/app/javascript/dashboard/store/modules/notifications/mutations.js
+++ b/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];
       }
     });
   },