I am building a small tool for a no-code platform that I wish can send all the errors from the front-end to a server. Here's the code I wrote so far to get the errors during run-time:

// In this function I want to catch XHR (APIs) errors and other general errors
document.addEventListener("DOMContentLoaded", function(){
    window.onerror = function (msg, source, lineNo, columnNo, error) {
    report_error_bhelper(msg, "onerror")
    }
    
    $.ajaxSetup({
      cache: false,
      error: function(jqXHR, exception) {
      var msg = jqXHR + exception
      report_error_bhelper(msg, "XHR")
      }
  });
});

// In this function I catch all "error" and "warn" console logs
(function() {
    var exError = console.error;
    var exWarn = console.warn;
    console.error = function(msg) {
        exError.apply(this, arguments);
        console.log('Error detected, loggin error to Bubble Helper...')
        report_error_bhelper(msg, "error")
    }
        console.warn = function(msg) {
        exWarn.apply(this, arguments);
        console.log('Warning detected, loggin error to Bubble Helper...')
        report_error_bhelper(msg, "warn")
    }
})()

The second part of the code works really well and I got all my errors sent, but I am not able to catch other errors, especially when HXR requests fails.

I am missing something? I would love some tips!

I've tried implementing the "window.onerror" at different level (when DOM is loaded, raw in the code, ...) but it seems like I won't get the errors