From 9defc149d55ba921902b7608ecb45cdc0d395db1 Mon Sep 17 00:00:00 2001
From: Matheus Cristian <mathues@email.com>
Date: Tue, 15 Oct 2024 17:17:57 -0300
Subject: [PATCH] feat(treat-unhandled-rejection): backs again to the global
 event handler

---
 src/App.vue                                   |  4 ----
 src/main.ts                                   |  1 +
 src/utils/TreatUnhandledRejection.ts          | 14 +++++++++++--
 .../__tests__/TreatUnhandledRejection.spec.ts | 21 ++++++++++++++++---
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2cdf749..614d473 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,14 +16,10 @@
 </template>
 
 <script setup lang="ts">
-import { onErrorCaptured } from 'vue';
 import TestTranslations from '@/components/TestTranslations.vue';
 import { useAlertStore } from './stores/Alert';
 import { useAuthStore } from './stores/Auth';
 import { useI18n } from 'vue-i18n';
-import { onUnhandledRejection } from '@/utils/TreatUnhandledRejection';
-
-onErrorCaptured(onUnhandledRejection);
 
 const { locale } = useI18n();
 const alertStore = useAlertStore();
diff --git a/src/main.ts b/src/main.ts
index 6d85842..0808a9f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import './assets/main.css';
+import '@/utils/TreatUnhandledRejection';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
diff --git a/src/utils/TreatUnhandledRejection.ts b/src/utils/TreatUnhandledRejection.ts
index 8de6c8f..ff3c261 100644
--- a/src/utils/TreatUnhandledRejection.ts
+++ b/src/utils/TreatUnhandledRejection.ts
@@ -3,13 +3,21 @@ import { useAlertStore } from '@/stores/Alert';
 import { AxiosError, HttpStatusCode } from 'axios';
 import { get } from 'lodash';
 
-export const onUnhandledRejection = (error: Error | AxiosError) => {
+export const onUnhandledRejection = ({
+  reason: error,
+}: Pick<PromiseRejectionEvent, 'reason'>) => {
   const alertStore = useAlertStore();
 
   if (error instanceof AxiosError) {
+    const errorMessage = get(error, 'response.data.error');
     const statusCode = get(error, 'response.status');
 
-    if (statusCode === HttpStatusCode.Unauthorized) {
+    if (errorMessage && typeof errorMessage === 'string') {
+      alertStore.add({
+        type: 'error',
+        text: errorMessage,
+      });
+    } else if (statusCode === HttpStatusCode.Unauthorized) {
       alertStore.add({
         type: 'error',
         text: i18n.global.t('common.errors.unauthorized'),
@@ -30,3 +38,5 @@ export const onUnhandledRejection = (error: Error | AxiosError) => {
     }
   }
 };
+
+window.addEventListener('unhandledrejection', onUnhandledRejection);
diff --git a/src/utils/__tests__/TreatUnhandledRejection.spec.ts b/src/utils/__tests__/TreatUnhandledRejection.spec.ts
index 82b203c..73147c9 100644
--- a/src/utils/__tests__/TreatUnhandledRejection.spec.ts
+++ b/src/utils/__tests__/TreatUnhandledRejection.spec.ts
@@ -41,11 +41,11 @@ describe('TreatUnhandledRejection', () => {
   ])(
     'Axios status $status should alert $alertText',
     ({ status, alertText }) => {
-      onUnhandledRejection(
-        new AxiosError('Error', AxiosError.ERR_BAD_RESPONSE, {}, null, {
+      onUnhandledRejection({
+        reason: new AxiosError('Error', AxiosError.ERR_BAD_RESPONSE, {}, null, {
           status,
         }),
-      );
+      });
 
       expect(alertStore.add).toHaveBeenCalledWith({
         type: 'error',
@@ -53,4 +53,19 @@ describe('TreatUnhandledRejection', () => {
       });
     },
   );
+
+  describe('when error is Axios and it has a response error string', () => {
+    it('should alert the response error', () => {
+      onUnhandledRejection({
+        reason: new AxiosError('Error', AxiosError.ERR_BAD_RESPONSE, {}, null, {
+          data: { error: 'Error message' },
+        }),
+      });
+
+      expect(alertStore.add).toHaveBeenCalledWith({
+        type: 'error',
+        text: 'Error message',
+      });
+    });
+  });
 });