From e5eeda6000ba44a77b298f23353a9fd018e63e61 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 19 Dec 2025 14:21:51 +0800
Subject: [PATCH 1/3] chore: implement ui part of the error handler for adding
 or editing projects

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../git/components/git-settings-drawer.vue    | 62 ++++++++++++++++++-
 .../components/form/lf-project-group-form.vue |  6 +-
 .../modules/integration/integration-store.js  |  8 ++-
 .../src/modules/lf/segments/store/actions.js  | 17 ++---
 .../shared/helpers/error-message.helper.ts    | 14 +++++
 5 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/shared/helpers/error-message.helper.ts

diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 45ea16bbdf..18af74c31a 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -76,7 +76,7 @@
 <script setup>
 import useVuelidate from '@vuelidate/core';
 import {
-  computed, onMounted, reactive, ref,
+  computed, h, onMounted, reactive, ref,
 } from 'vue';
 import git from '@/config/integrations/git/config';
 import AppArrayInput from '@/shared/form/array-input.vue';
@@ -86,6 +86,8 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import { ToastStore } from '@/shared/message/notification';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -156,6 +158,7 @@ const connect = async () => {
     isUpdate,
     segmentId: props.segmentId,
     grandparentId: props.grandparentId,
+    errorHandler,
   })
     .then(() => {
       trackEvent({
@@ -172,6 +175,63 @@ const connect = async () => {
       loading.value = false;
     });
 };
+
+const errorHandler = (error) => {
+  const errorMessage = error?.response?.data;
+
+  const pattern = new RegExp(
+    'Trying to update repo (?<repo>[^\\s]+) mapping with integrationId (?<IId>[^\\s]+) '
+    + 'but it is already mapped to integration (?<eId>[^\\s!]+)',
+  );
+  const match = errorMessage.match(pattern);
+
+  if (match?.groups) {
+    const { repo, eId } = match.groups;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customErrorMessage(integration.segment, repo);
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  } else {
+    ToastStore.error('There was an error mapping github repos');
+  }
+};
+
+const customErrorMessage = (segment, githubRepo) => {
+  ToastStore.error(
+    h(
+      'span',
+      {
+        class: 'whitespace-normal',
+      },
+      [
+        'The github repo',
+        ' ',
+        h('strong', githubRepo),
+        ' ',
+        'is already connected with project',
+        ' ',
+        h(
+          'a',
+          {
+            href: getSegmentLink(segment),
+            class: 'text-blue-500 underline hover:text-blue-600',
+          },
+          segment.name || 'Unknown Project',
+        ),
+      ],
+    ),
+    {
+      title: 'Conflict Detected',
+    },
+  );
+};
+
+const getSegmentLink = (segment) => `/integrations/${segment.grandparentId}/${segment.id}`;
+
 </script>
 
 <script>
diff --git a/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue b/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
index 81cad45c84..b8bd905736 100644
--- a/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
+++ b/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
@@ -150,6 +150,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { segmentService } from '@/modules/lf/segments/segments.service';
 import { TanstackKey } from '@/shared/types/tanstack';
 import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import { AxiosError } from 'axios';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 import { ToastStore } from '@/shared/message/notification';
 
@@ -273,8 +275,8 @@ const onSuccess = () => {
   ToastStore.success(`Project Group ${props.id ? 'updated' : 'created'} successfully`);
 };
 
-const onError = () => {
-  ToastStore.error(`Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`);
+const onError = (err: AxiosError) => {
+  ToastStore.error(getAxiosErrorMessage(err, `Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`));
 };
 
 const updateMutation = useMutation({
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index 2feebdcde7..37203700ac 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -541,7 +541,7 @@ export default {
     async doGitConnect(
       { commit },
       {
-        remotes, isUpdate, segmentId, grandparentId,
+        remotes, isUpdate, segmentId, grandparentId, errorHandler,
       },
     ) {
       try {
@@ -571,7 +571,11 @@ export default {
           },
         });
       } catch (error) {
-        Errors.handle(error);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          Errors.handle(error);
+        }
         commit('CREATE_ERROR');
       }
     },
diff --git a/frontend/src/modules/lf/segments/store/actions.js b/frontend/src/modules/lf/segments/store/actions.js
index db921f94ed..1683085967 100644
--- a/frontend/src/modules/lf/segments/store/actions.js
+++ b/frontend/src/modules/lf/segments/store/actions.js
@@ -5,6 +5,7 @@ import { router } from '@/router';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import { storeToRefs } from 'pinia';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const isAdminOnly = () => {
   const authStore = useAuthStore();
@@ -199,8 +200,8 @@ export default {
         ToastStore.success('Project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -210,8 +211,8 @@ export default {
         ToastStore.success('Project updated successfully');
         this.updateProjectList(id, data);
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -242,8 +243,8 @@ export default {
         ToastStore.success('Sub-project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -253,8 +254,8 @@ export default {
         ToastStore.success('Sub-project updated successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },
diff --git a/frontend/src/shared/helpers/error-message.helper.ts b/frontend/src/shared/helpers/error-message.helper.ts
new file mode 100644
index 0000000000..af4e46e942
--- /dev/null
+++ b/frontend/src/shared/helpers/error-message.helper.ts
@@ -0,0 +1,14 @@
+import { AxiosError } from 'axios';
+
+export const getAxiosErrorMessage = (
+  error: AxiosError,
+  defaultMessage: string = 'Something went wrong',
+): string => {
+  if (error && error.response && error.response.data) {
+    const errMsg = error.response.data && typeof error.response.data === 'string'
+      ? error.response.data
+      : error.message;
+    return errMsg;
+  }
+  return error.message || defaultMessage;
+};

From 0bf9f24d1a8c6566d72de8081d1a2d90ae1fc3a4 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Fri, 19 Dec 2025 14:21:51 +0800
Subject: [PATCH 2/3] chore: implement ui part of the error handler for adding
 or editing projects

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../git/components/git-settings-drawer.vue    | 62 ++++++++++++++++++-
 .../components/form/lf-project-group-form.vue |  6 +-
 .../modules/integration/integration-store.js  |  8 ++-
 .../src/modules/lf/segments/store/actions.js  | 17 ++---
 .../shared/helpers/error-message.helper.ts    | 14 +++++
 5 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/shared/helpers/error-message.helper.ts

diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 45ea16bbdf..18af74c31a 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -76,7 +76,7 @@
 <script setup>
 import useVuelidate from '@vuelidate/core';
 import {
-  computed, onMounted, reactive, ref,
+  computed, h, onMounted, reactive, ref,
 } from 'vue';
 import git from '@/config/integrations/git/config';
 import AppArrayInput from '@/shared/form/array-input.vue';
@@ -86,6 +86,8 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import { ToastStore } from '@/shared/message/notification';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -156,6 +158,7 @@ const connect = async () => {
     isUpdate,
     segmentId: props.segmentId,
     grandparentId: props.grandparentId,
+    errorHandler,
   })
     .then(() => {
       trackEvent({
@@ -172,6 +175,63 @@ const connect = async () => {
       loading.value = false;
     });
 };
+
+const errorHandler = (error) => {
+  const errorMessage = error?.response?.data;
+
+  const pattern = new RegExp(
+    'Trying to update repo (?<repo>[^\\s]+) mapping with integrationId (?<IId>[^\\s]+) '
+    + 'but it is already mapped to integration (?<eId>[^\\s!]+)',
+  );
+  const match = errorMessage.match(pattern);
+
+  if (match?.groups) {
+    const { repo, eId } = match.groups;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customErrorMessage(integration.segment, repo);
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  } else {
+    ToastStore.error('There was an error mapping github repos');
+  }
+};
+
+const customErrorMessage = (segment, githubRepo) => {
+  ToastStore.error(
+    h(
+      'span',
+      {
+        class: 'whitespace-normal',
+      },
+      [
+        'The github repo',
+        ' ',
+        h('strong', githubRepo),
+        ' ',
+        'is already connected with project',
+        ' ',
+        h(
+          'a',
+          {
+            href: getSegmentLink(segment),
+            class: 'text-blue-500 underline hover:text-blue-600',
+          },
+          segment.name || 'Unknown Project',
+        ),
+      ],
+    ),
+    {
+      title: 'Conflict Detected',
+    },
+  );
+};
+
+const getSegmentLink = (segment) => `/integrations/${segment.grandparentId}/${segment.id}`;
+
 </script>
 
 <script>
diff --git a/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue b/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
index 81cad45c84..b8bd905736 100644
--- a/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
+++ b/frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue
@@ -150,6 +150,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { segmentService } from '@/modules/lf/segments/segments.service';
 import { TanstackKey } from '@/shared/types/tanstack';
 import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import { AxiosError } from 'axios';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 import { ToastStore } from '@/shared/message/notification';
 
@@ -273,8 +275,8 @@ const onSuccess = () => {
   ToastStore.success(`Project Group ${props.id ? 'updated' : 'created'} successfully`);
 };
 
-const onError = () => {
-  ToastStore.error(`Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`);
+const onError = (err: AxiosError) => {
+  ToastStore.error(getAxiosErrorMessage(err, `Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`));
 };
 
 const updateMutation = useMutation({
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index 2feebdcde7..37203700ac 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -541,7 +541,7 @@ export default {
     async doGitConnect(
       { commit },
       {
-        remotes, isUpdate, segmentId, grandparentId,
+        remotes, isUpdate, segmentId, grandparentId, errorHandler,
       },
     ) {
       try {
@@ -571,7 +571,11 @@ export default {
           },
         });
       } catch (error) {
-        Errors.handle(error);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          Errors.handle(error);
+        }
         commit('CREATE_ERROR');
       }
     },
diff --git a/frontend/src/modules/lf/segments/store/actions.js b/frontend/src/modules/lf/segments/store/actions.js
index db921f94ed..1683085967 100644
--- a/frontend/src/modules/lf/segments/store/actions.js
+++ b/frontend/src/modules/lf/segments/store/actions.js
@@ -5,6 +5,7 @@ import { router } from '@/router';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import { storeToRefs } from 'pinia';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const isAdminOnly = () => {
   const authStore = useAuthStore();
@@ -199,8 +200,8 @@ export default {
         ToastStore.success('Project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -210,8 +211,8 @@ export default {
         ToastStore.success('Project updated successfully');
         this.updateProjectList(id, data);
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -242,8 +243,8 @@ export default {
         ToastStore.success('Sub-project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -253,8 +254,8 @@ export default {
         ToastStore.success('Sub-project updated successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },
diff --git a/frontend/src/shared/helpers/error-message.helper.ts b/frontend/src/shared/helpers/error-message.helper.ts
new file mode 100644
index 0000000000..af4e46e942
--- /dev/null
+++ b/frontend/src/shared/helpers/error-message.helper.ts
@@ -0,0 +1,14 @@
+import { AxiosError } from 'axios';
+
+export const getAxiosErrorMessage = (
+  error: AxiosError,
+  defaultMessage: string = 'Something went wrong',
+): string => {
+  if (error && error.response && error.response.data) {
+    const errMsg = error.response.data && typeof error.response.data === 'string'
+      ? error.response.data
+      : error.message;
+    return errMsg;
+  }
+  return error.message || defaultMessage;
+};

From 019eac638250392e137339f5ff61c742cbe5d753 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 22 Dec 2025 15:43:25 +0800
Subject: [PATCH 3/3] chore: unifiy repo error parsing

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../components/gerrit-settings-drawer.vue     | 21 +++++++
 .../git/components/git-settings-drawer.vue    | 51 ++---------------
 .../settings/github-settings-drawer.vue       | 28 ++++++++--
 .../settings/github-settings-drawer.vue       | 52 +++--------------
 .../modules/integration/integration-store.js  |  7 ++-
 .../shared/helpers/error-message.helper.ts    | 56 +++++++++++++++++++
 6 files changed, 120 insertions(+), 95 deletions(-)

diff --git a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
index a71d89e099..b0de5d0007 100644
--- a/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
+++ b/frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue
@@ -119,6 +119,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import { ToastStore } from '@/shared/message/notification';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -192,6 +195,7 @@ const connect = async () => {
     enableGit: form.enableGit,
     segmentId: props.segmentId,
     grandparentId: props.grandparentId,
+    errorHandler,
   })
     .then(() => {
       trackEvent({
@@ -210,6 +214,23 @@ const connect = async () => {
       loading.value = false;
     });
 };
+
+const errorHandler = (error: any) => {
+  const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping gerrit repositories');
+
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customRepoErrorMessage(integration.segment, repo, 'gerrit');
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  }
+};
 </script>
 
 <script lang="ts">
diff --git a/frontend/src/config/integrations/git/components/git-settings-drawer.vue b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
index 18af74c31a..a63182d45a 100644
--- a/frontend/src/config/integrations/git/components/git-settings-drawer.vue
+++ b/frontend/src/config/integrations/git/components/git-settings-drawer.vue
@@ -76,7 +76,7 @@
 <script setup>
 import useVuelidate from '@vuelidate/core';
 import {
-  computed, h, onMounted, reactive, ref,
+  computed, onMounted, reactive, ref,
 } from 'vue';
 import git from '@/config/integrations/git/config';
 import AppArrayInput from '@/shared/form/array-input.vue';
@@ -88,6 +88,7 @@ import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import { ToastStore } from '@/shared/message/notification';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -178,60 +179,20 @@ const connect = async () => {
 
 const errorHandler = (error) => {
   const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping git repositories');
 
-  const pattern = new RegExp(
-    'Trying to update repo (?<repo>[^\\s]+) mapping with integrationId (?<IId>[^\\s]+) '
-    + 'but it is already mapped to integration (?<eId>[^\\s!]+)',
-  );
-  const match = errorMessage.match(pattern);
-
-  if (match?.groups) {
-    const { repo, eId } = match.groups;
+  if (parsedError) {
+    const { repo, eId } = parsedError;
     // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
     IntegrationService.find(eId)
       .then((integration) => {
-        customErrorMessage(integration.segment, repo);
+        customRepoErrorMessage(integration.segment, repo, 'git');
       })
       .catch(() => {
         ToastStore.error(errorMessage);
       });
-  } else {
-    ToastStore.error('There was an error mapping github repos');
   }
 };
-
-const customErrorMessage = (segment, githubRepo) => {
-  ToastStore.error(
-    h(
-      'span',
-      {
-        class: 'whitespace-normal',
-      },
-      [
-        'The github repo',
-        ' ',
-        h('strong', githubRepo),
-        ' ',
-        'is already connected with project',
-        ' ',
-        h(
-          'a',
-          {
-            href: getSegmentLink(segment),
-            class: 'text-blue-500 underline hover:text-blue-600',
-          },
-          segment.name || 'Unknown Project',
-        ),
-      ],
-    ),
-    {
-      title: 'Conflict Detected',
-    },
-  );
-};
-
-const getSegmentLink = (segment) => `/integrations/${segment.grandparentId}/${segment.id}`;
-
 </script>
 
 <script>
diff --git a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
index ba11b20765..2938e2d8ac 100644
--- a/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue
@@ -106,6 +106,7 @@ import {
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -221,15 +222,30 @@ const connect = () => {
 
       isDrawerVisible.value = false;
     })
-    .catch(() => {
-      ToastStore.error(
-        props.integration?.id
-          ? 'There was error updating settings'
-          : 'There was error connecting GitHub',
-      );
+    .catch((error) => {
+      errorHandler(error);
     });
 };
 
+const errorHandler = (error: any) => {
+  const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, props.integration?.id
+    ? 'There was error updating settings'
+    : 'There was error connecting GitHub');
+
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customRepoErrorMessage(integration.segment, repo, 'github');
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  }
+};
+
 const fetchGithubMappings = () => {
   if (!props.integration) return;
   IntegrationService.fetchGitHubMappings(props.integration).then(
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
index b3befa5dc7..ab46827e4d 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue
@@ -200,7 +200,7 @@
 
 <script lang="ts" setup>
 import {
-  computed, h, onMounted, ref,
+  computed, onMounted, ref,
 } from 'vue';
 import { ToastStore } from '@/shared/message/notification';
 import github from '@/config/integrations/github/config';
@@ -224,6 +224,7 @@ import LfSvg from '@/shared/svg/svg.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -346,63 +347,28 @@ const connect = () => {
         });
       })
       .catch((error) => {
-        handleMessage(error);
+        errorHandler(error);
       });
   });
 };
 
-const handleMessage = (error: any) => {
+const errorHandler = (error: any) => {
   const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping github repositories');
 
-  const pattern = /github repo (?<repo>[^\s]+) mapping with integrationId (?<IId>[^\s]+) but it is already mapped to integration (?<eId>[^\s!]+)/;
-  const match = errorMessage.match(pattern);
-
-  if (match?.groups) {
-    const { repo, eId } = match.groups;
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
     IntegrationService.find(eId)
       .then((integration) => {
-        customErrorMessage(integration.segment, repo);
+        customRepoErrorMessage(integration.segment, repo, 'github');
       })
       .catch(() => {
         ToastStore.error(errorMessage);
       });
-  } else {
-    ToastStore.error('There was an error mapping github repos');
   }
 };
 
-const customErrorMessage = (segment: any, githubRepo: string) => {
-  ToastStore.error(
-    h(
-      'span',
-      {
-        class: 'whitespace-normal',
-      },
-      [
-        'The github repo',
-        ' ',
-        h('strong', githubRepo),
-        ' ',
-        'is already connected with project',
-        ' ',
-        h(
-          'a',
-          {
-            href: getSegmentLink(segment),
-            class: 'text-blue-500 underline hover:text-blue-600',
-          },
-          segment.name || 'Unknown Project',
-        ),
-      ],
-    ),
-    {
-      title: 'Conflict Detected',
-    },
-  );
-};
-
-const getSegmentLink = (segment: any) => `/integrations/${segment.grandparentId}/${segment.id}`;
-
 // Fetching subprojects
 const subprojects = ref<SubProject[]>([]);
 const loading = ref(false);
diff --git a/frontend/src/modules/integration/integration-store.js b/frontend/src/modules/integration/integration-store.js
index 37203700ac..e2edccdb10 100644
--- a/frontend/src/modules/integration/integration-store.js
+++ b/frontend/src/modules/integration/integration-store.js
@@ -632,6 +632,7 @@ export default {
         enableGit,
         segmentId,
         grandparentId,
+        errorHandler,
       },
     ) {
       try {
@@ -669,7 +670,11 @@ export default {
           },
         });
       } catch (error) {
-        Errors.handle(error);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          Errors.handle(error);
+        }
         commit('CREATE_ERROR');
       }
     },
diff --git a/frontend/src/shared/helpers/error-message.helper.ts b/frontend/src/shared/helpers/error-message.helper.ts
index af4e46e942..5c378d1025 100644
--- a/frontend/src/shared/helpers/error-message.helper.ts
+++ b/frontend/src/shared/helpers/error-message.helper.ts
@@ -1,4 +1,6 @@
 import { AxiosError } from 'axios';
+import { h } from 'vue';
+import { ToastStore } from '../message/notification';
 
 export const getAxiosErrorMessage = (
   error: AxiosError,
@@ -12,3 +14,57 @@ export const getAxiosErrorMessage = (
   }
   return error.message || defaultMessage;
 };
+
+export const parseDuplicateRepoError = (
+  errorMessage: string,
+  defaultMessage: string,
+): { repo: string; eId: string } | null => {
+  const pattern = new RegExp(
+    'Trying to update repo (?<repo>[^\\s]+) mapping with integrationId (?<IId>[^\\s]+) '
+      + 'but it is already mapped to integration (?<eId>[^\\s!]+)',
+  );
+  const match = errorMessage.match(pattern);
+
+  if (match?.groups) {
+    const { repo, eId } = match.groups;
+
+    return { repo, eId };
+  }
+  ToastStore.error(defaultMessage);
+  return null;
+};
+
+const getSegmentLink = (segment: any) => `/integrations/${segment.grandparentId}/${segment.id}`;
+export const customRepoErrorMessage = (
+  segment: any,
+  githubRepo: string,
+  integrationName: string,
+) => {
+  ToastStore.error(
+    h(
+      'span',
+      {
+        class: 'whitespace-normal',
+      },
+      [
+        `The ${integrationName} repo`,
+        ' ',
+        h('strong', githubRepo),
+        ' ',
+        'is already connected with project',
+        ' ',
+        h(
+          'a',
+          {
+            href: getSegmentLink(segment),
+            class: 'text-blue-500 underline hover:text-blue-600',
+          },
+          segment.name || 'Unknown Project',
+        ),
+      ],
+    ),
+    {
+      title: 'Conflict Detected',
+    },
+  );
+};