Unable to Catch Error on Asynchronized promise (power bi report, promise)

Question

First of all, I'd like to mention that I'm not an expert in JavaScript development, so there might be some inaccuracies in my understanding. Please feel free to correct me if needed.

I'm currently attempting to catch an unexpected error occurring within an asynchronous promise, specifically when updating the filter of a Power BI embedded report. However, I'm encountering difficulty in capturing this error within the catch block.

Here's a snippet of my code:

return new Promise((resolve, reject) => {
    let rep_res = report.updateFilters(models.FiltersOperations.Add, [filter, filter2])
        .then(() => {
            resolve('Filter Applied');
        })
        .catch((error) => {
            reject("Failed to apply filters: " + error);
        });
});

The error occurs after logging "Filter Applied" in the console and is as follows:

Error : Error: \<rect\> attribute x: Expected length, "NaN".

I've confirmed that this error originates from the updateFilters function because removing the code associated with it eliminates the error.

The filter and filter2 objects appear to be correct, as the error only occurs with a specific report.

I've consulted the Power BI documentation regarding the addition of filters to reports, but I couldn't find any guidance on error handling.

powerbi documentation to add reports: https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/control-report-filters#add-new-filters-to-the-report-filters

In an attempt to resolve this issue, I've tried several approaches, including:

• Storing the response of the then method and the promise itself in variables
• Implementing try-catch blocks
• Using setTimeout to address asynchronous behavior
• Utilizing window.onerror
• Adding a setTimeout function before resolving the promise

Any assistance or insights into resolving this issue would be greatly appreciated. Thank you.

Regards, Uzair