Skip to content

Fix UI freeze and timestamp format in Usage Report (Issue #4787) #1275

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
Kavindu21123 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix UI freeze and timestamp format in Usage Report (Issue #4787) #1275

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
34 changes: 18 additions & 16 deletions portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,25 +236,27 @@ export default function UsageReport() {
const [selectedEndDate, setSelectedEndDate] = useState(endDate);

const fetchTransactionData = () => {
if (!selectedStartDate || !selectedEndDate) {
return;
}

setLoading(true);

if (selectedStartDate && selectedEndDate) {
const api = new API();
api.getTransactionCount({
startTime: selectedStartDate.unix().toString(),
endTime: selectedEndDate.unix().toString(),
const api = new API();
api.getTransactionCount({
startTime: selectedStartDate.valueOf().toString(),
endTime: selectedEndDate.valueOf().toString(),
})
.then((result) => {
setTransactionCount(result.body.count);
})
.then((result) => {
setTransactionCount(result.body.count);
})
.catch((error) => {
console.error('Error fetching transaction count:', error);
throw error;
})
.finally(() => {
setLoading(false);
});
}
.catch((error) => {
console.error('Error fetching transaction count:', error);
throw error;
})
Comment on lines +253 to +256

@coderabbitai coderabbitai Bot Mar 13, 2026

Copy link
Copy Markdown
Contributor

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

🌐 Web query:

In JavaScript Promises, what happens when an error is thrown inside catch() and the resulting Promise is not awaited or otherwise handled?

💡 Result:

If you throw inside a .catch() handler, the promise returned by that .catch() becomes rejected with the thrown error (equivalent to returning a rejected promise). [1]

If you then don’t await it or attach another rejection handler (e.g. another .catch()), it becomes an unhandled promise rejection:

  • Browsers: the global unhandledrejection event fires, and if it isn’t handled, you’ll typically see an error logged to the console. [2]
  • Node.js: by default (--unhandled-rejections=throw, the default since Node 15), Node emits unhandledRejection, and if you don’t handle that event, it raises it as an uncaught exception (which commonly terminates the process). [3]

Sources: [1] MDN Promise.prototype.catch() (www-igm.univ-mlv.fr), [2] MDN unhandledrejection event (developer.mozilla.org), [3] Node.js CLI --unhandled-rejections docs (nodejs.org)

Citations:

🏁 Script executed:

cat -n portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx | sed -n '240,270p'

Repository: wso2/apim-apps

Length of output: 1166

Remove the rethrow in this catch block to prevent unhandled Promise rejections.

The promise chain from api.getTransactionCount() (line 246) is not awaited or returned by fetchTransactionData(). When useEffect calls fetchTransactionData() at line 264 without awaiting, the promise becomes unhandled. Rethrowing in the catch block at line 255 creates a rejected promise that has no handler, resulting in an unhandled rejection error at runtime.

Since the error is already logged, simply removing the throw allows the promise to resolve, preventing the unhandled rejection while preserving the error logging and the finally block execution.

Proposed fix 
             .catch((error) => {
                 console.error('Error fetching transaction count:', error);
-                throw error;
             })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.catch((error) => {
console.error('Error fetching transaction count:', error);
throw error;
})
.catch((error) => {
console.error('Error fetching transaction count:', error);
})
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx`
around lines 253 - 256, In fetchTransactionData, remove the rethrow inside the
catch for the api.getTransactionCount() promise: currently the catch logs the
error then does "throw error", which causes an unhandled rejection because
fetchTransactionData()'s promise is not awaited/returned from the useEffect
call; update the catch in the api.getTransactionCount() chain to only log the
error (console.error) and not rethrow so the promise resolves and the finally
block still runs (i.e., edit the catch in the fetchTransactionData function that
wraps api.getTransactionCount()).

.finally(() => {
setLoading(false);
});
};

useEffect(() => {
Expand Down