Dealing with all errors across all pages in Angular using a comprehensive error handling approach

I am currently using AngularJS and attempting to capture all errors across all pages. However, I am encountering an issue where it does not catch errors in some instances. For example, when I trigger a ReferenceError in one of the controllers, it is not being caught.

$rootScope.$on("$stateChangeStart", function() {
  
  window.onerror = function( msg, url, line, col, error ) {
    
    var extra = !col ? '' : '\ncolumn: ' + col;
    extra += !error ? '' : '\nerror: ' + error;
    
    var data = {
      msg : msg,
      url : url,
      line: line + extra
    }
    alert('error');
    
    var suppressErrorAlert = true;
    
    return suppressErrorAlert;
  };
}

What steps can I take to resolve this issue and ensure that all errors are properly captured?

Answer â„–1

It's best practice to avoid using window.onerror and instead utilize $exceptionHandler in Angular. This global factory captures errors occurring within controllers, services, and more.

All unhandled exceptions in angular expressions are managed by this service.

angular.module('exceptionOverride', []).factory('$exceptionHandler', 

function() {
  return function(exception, cause) {
    exception.message += ' (caused by "' + cause + '")';
    throw exception;
  };
});

In this scenario, the standard behavior of $exceptionHandler is overwritten so that any angular exceptions result in a hard failure rather than just being logged to the console.

For more information: https://docs.angularjs.org/api/ng/service/$exceptionHandler

Check out this informative blog post:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How is it that this JavaScript task does not trigger an error: const a = (1, 2, 3, 4);

let x = (5, 6, 7, 8); console.log(x); let y = 5, 6, 7, 8; console.log(y); In the example above, x will be assigned a value of 8, while the second line will result in an error. What is the reason behind the success of the first assignment? How does it qua ...

Best practices for correctly parsing a date in UTC format using the date-fns library

My log file contains timestamps in a non-ISO format: 2020-12-03 08:30:00 2020-12-03 08:40:00 ... The timestamps are in UTC, as per the log provider's documentation. I am attempting to parse them using date-fns: const toParse = "2020-12-03 08:40 ...

Latest Information Regarding Mongodb Aggregate Operations

Struggling to toggle a boolean value within an object that is part of a subdocument in an array. Finding it difficult to update a specific object within the array. Document: "_id" : ObjectId("54afaabd88694dc019d3b628") "Invitation" : [ { "__ ...

The functionality of AngularJS ng-disable is failing to work on an anchor tag

I am currently facing a challenge in my AngularJS project where I need to disable an icon within an ng-repeat scenario based on a condition. Specifically, I want to check if the owner is null and then disable the icon accordingly. However, despite verifyin ...

React video recording not displaying in the video element

I'm currently developing a React application that facilitates webcam interviews with candidates. As part of this process, candidates have the option to "Start Again" or "Complete" their interviews. One challenge I am facing is displaying the recorded ...

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I ...

Transmit Array of Preferred Values to Controller in MVC Framework

After setting up a view with a search box and buttons labeled "Add" (btn-default) and "Edit" (breadcrumb), I encountered an issue when attempting to pass selected values from the search box to another controller upon clicking the Edit button. Unfortunately ...

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Overview Situation: const Link = styled.a` border: solid 1px black; border-radius: 5px; padding: 5px; margin: 10px 5px; `; type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; const LinkAsButton = styled(Link).attrs<ButtonP ...

React button synchronization issue with start stop functionality

My React timer module has one input field and three buttons: Start (to begin the timer), Pause (to temporarily stop the timer), and Stop (to completely halt the timer). The issue I am encountering is that when I input a value, start the timer, then press t ...

Modify the code to interpret a new JSON structure

I have a piece of code that is designed to read JSON data: $.getJSON("data.json", function(data){ var output = ''; $.each(data, function(index, value){ output += '<li>' + value.title + '</li>'; } ...

Is Formik Compatible with TextareaAutosize?

I've implemented react-textarea-autosize and formik in my project, but I'm having trouble connecting the change events of formik to TextareaAutosize. Can anyone guide me on how to do this properly? <Formik initialValues={{ ...

Updating the image source through ajax by retrieving the location from the database

Is there a way to dynamically change the image source using AJAX? I have the location saved in my database and I want to set the img src from the value of something like data[0]['patient_photo']. Below is the HTML code for the image: <img id= ...

Fixing Typescript assignment error: "Error parsing module"

Trying to assign an object to the variable initialState, where the type of selectedActivity is Activity | undefined. After using the Nullish Coalescing operator (??), the type of emptyActivity becomes Activity. However, upon execution of this line, an err ...

Running an Angular-made Chrome extension within an iframe: A guide

I'm currently working on creating a Chrome extension that displays its content in a sidebar rather than the default popup. I've come to realize that in order to achieve this, I need to use an iframe due to the limitations of the default chrome ex ...

Guide to adding a new Vue-Grid-Item with a button

Currently, I am working on a software project for the Research department at my university, specifically focusing on an Atomic Layer Deposition system. The main goal of this program is to allow users to create and customize their own 'recipe' for ...

Accessing a local JSON data file via an AJAX call

function fetchColor() { var promise = $.Deferred(); $.ajax ({ url: 'ajax/color/Red.json', dataType: 'json', type: 'get', success: function(data){ promise.resolve(data); ...

Is it beneficial to create two distinct node applications—one to serve a webservice and another to consume that webservice in order to display it on a browser?

Is it more efficient to run two separate node instances for different purposes (webservice engine/data engine and webservice consumer), or is it better to combine both functions in the same application? ...

Utilizing the js-yaml library to parse a YAML document

Currently, I'm utilizing js-yaml to analyze and extract the data from a yaml file in node js. The yaml file consists of key-value pairs, with some keys having values formatted like this: key : {{ val1 }} {{ val2 }} However, the parsing process enco ...

"Empty $stateParams Issue Encountered in Angular UI-Router While Using My Directive

I have developed a unique directive in my angular application for a custom navbar. The controller of this directive utilizes $stateParams to access a variable named lang, as shown below: .config(function($stateProvider, $urlRouterProvider, LANG) { $u ...

Graph your data with a stunning Fusioncharts area range graph combined with a sleek

My goal is to create a visual representation of an area range graph with a corresponding mid line. You can view the image below for reference: https://i.sstatic.net/8KDbF.png While I have successfully incorporated the low and high values, I am encounterin ...