feat(treat-unhandled-rejection): backs again to the global event handler

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();

src/main.ts

@@ -1,4 +1,5 @@
 import './assets/main.css';
+import '@/utils/TreatUnhandledRejection';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';

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);

src/utils/__tests__/TreatUnhandledRejection.spec.ts

@@ -41,16 +41,31 @@ 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',
         text: alertText,
       });
     },
   );
+
+  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',
+      });
+    });
+  });
 });