Skip to content

WEB-862: Handle API errors using userMessageGlobalisationCode with lo… #3411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samruddhikasar05-bit wants to merge 1 commit into
base: dev
Choose a base branch
from
+13 −4
Open

WEB-862: Handle API errors using userMessageGlobalisationCode with lo… #3411

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/app/loans/loans-view/loans-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,19 @@ export class LoansViewComponent implements OnInit {
});
this.datatablesReady = true;
},
error: () => {
// If API fails, keep all datatables (fallback to current behavior)
this.datatablesReady = true;
}
error: (err) => {
this.datatablesReady = true;

const errors = err.error?.errors;

if (errors && errors.length > 0) {
const message = errors
.map(e => this.translate.instant(e.userMessageGlobalisationCode))
.join(' ');
Comment on lines +249 to +251
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify incorrect member usage and compare expected error fields.
rg -nP 'private\s+translate(Service)?\s*=' src/app/loans/loans-view/loans-view.component.ts
rg -nP '\bthis\.translate\.instant\s*\(' src/app/loans/loans-view/loans-view.component.ts
rg -nP 'defaultUserMessage|developerMessage|userMessageGlobalisationCode' src/app/core/http/error-handler.interceptor.ts src/app/loans/loans-view/loans-view.component.ts

Repository: openMF/web-app

Length of output: 605

🏁 Script executed:

# Read the full code section around lines 243-255 to see alert() and complete logic
head -n 255 src/app/loans/loans-view/loans-view.component.ts | tail -n 20

Repository: openMF/web-app

Length of output: 580

🏁 Script executed:

# Also check for other uses of translate service in this file
rg -n 'this\.(translate|translateService)\.' src/app/loans/loans-view/loans-view.component.ts

Repository: openMF/web-app

Length of output: 563

🏁 Script executed:

# Verify the error response structure more thoroughly
cat -n src/app/core/http/error-handler.interceptor.ts | head -n 60 | tail -n 20

Repository: openMF/web-app

Length of output: 885

Fix undeclared translate service reference and add error message fallback with proper notification.

Line 250 uses this.translate.instant(...), but the component declares this.translateService (Line 83). This reference will fail type-checking. Additionally, line 253 uses native alert() instead of a notification service, and the error mapping lacks fallback for defaultUserMessage or developerMessage when userMessageGlobalisationCode is missing.

Proposed fix 
    const message = errors
-      .map(e => this.translate.instant(e.userMessageGlobalisationCode))
+      .map((e: { userMessageGlobalisationCode?: string; defaultUserMessage?: string; developerMessage?: string }) => {
+        const key = e.userMessageGlobalisationCode;
+        return key
+          ? this.translateService.instant(key)
+          : (e.defaultUserMessage ?? e.developerMessage ?? '');
+      })
+      .filter(Boolean)
       .join(' ');
-    alert(message);
+    // Use notification service instead of native alert
+    // this.notificationService.showError(message);
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/loans/loans-view/loans-view.component.ts` around lines 249 - 251,
Replace the incorrect reference this.translate.instant with the injected
translateService (this.translateService.instant) and ensure translateService is
defined on the component (constructor injection already present as
translateService); when building the message from errors use a fallback chain:
prefer error.userMessageGlobalisationCode (translated), otherwise
error.defaultUserMessage, otherwise error.developerMessage, and finally a
generic text; and replace the native alert() call with the app's notification
service (e.g., this.notificationService.error or similar) to display the
assembled message so the UI uses the proper notifier.


alert(message); // or notification service if exists
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for native alerts and existing app-level alert patterns to align this call.
rg -nP '\balert\s*\(' src/app --type=ts
rg -nP 'alertService\.alert|MatSnackBar|MatDialog' src/app/loans src/app/shared --type=ts

Repository: openMF/web-app

Length of output: 30334

Replace native alert() with the app's alertService notification pattern.

Line 253 uses browser alert(), which is blocking and inconsistent with the established pattern in the loans module. Other components in this module use this.alertService.alert({ type: '...', message: ... }) (see sibling components like transactions-tab.component.ts and view-transaction.component.ts). Replace the native alert with the app's alertService for consistent UX behavior.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/loans/loans-view/loans-view.component.ts` at line 253, Replace the
raw browser alert call at the end of the handler with the app's alertService
pattern: remove alert(message) in loans-view.component (the method where
alert(message) is invoked) and call this.alertService.alert({ type:
'<appropriate-type>', message }) instead, matching how
transactions-tab.component.ts and view-transaction.component.ts use
this.alertService; ensure the component has alertService injected in the
constructor if not already.

}
}
});
}

Expand Down