How can you retrieve the original file name and line number in exceptions that are generated in Angular controllers?

When an error occurs in my Angular controller, a stack trace is generated that typically looks like the following:

TypeError: undefined is not a function
    at new <anonymous> (…/dist/script.js:854:5)
    at invoke (…/dist/base-script.js:13441:17)
    at Object.instantiate (…/dist/base-script.js:13452:23)
    at …/dist/base-script.js:16789:28
    at …/dist/base-script.js:16159:34
    at forEach (…/dist/base-script.js:9709:20)
    at nodeLinkFn (…/dist/base-script.js:16146:11)
    at compositeLinkFn (…/dist/base-script.js:15582:13)
    at publicLinkFn (…/dist/base-script.js:15477:30)
    at link (…/dist/base-script.js:30282:38) <div ng-include="activeTab" class="ng-scope">

The minified scripts script.js and base-script.js are used in this scenario.

To determine which specific line of source code is causing the issue, what steps can I take?

I want to note that source maps are being compiled and functioning correctly, allowing Chrome to display the original source lines when an "native" error is thrown (i.e., Angular does not intercept errors).

javascriptangularjs

Answer №2

One interesting discovery is that you can potentially replace $exceptionHandler with a custom function that throws errors again:

angular.module('myapp', []).factory('$exceptionHandler', function($log) {
  return function (exception, cause) {
    if (cause) {
      $log.error('exception cause:', cause);
    }
    throw exception;
  };
});

While this approach may lead to unforeseen side effects, it does simplify the debugging process.

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

Endless AngularJS loop using ng-view

I recently started experimenting with AngularJS for a new project I am working on, but I have encountered a problem when dealing with routes and views. For the sake of simplicity, I have minimized this example to its basic form, yet the issue persists. Th ...

javascriptangularjsinfinite-loop

Guide on making a Vue.js show/hide button for each element on a webpage

There is a feature to toggle between displaying "more" or "less" text, but currently the @click event affects all elements causing them to show all the text at once. I realize that I need to pass a unique value to distinguish each element, but I am curren ...

javascripthtmlvue.jsvuejs2vue-component

How to eliminate the comma from the final element in a JavaScript Vue.js array?

I'm looking to remove the comma from the last element in Vue, but I'm unsure how to do so since the index of the last element is unknown. <td v-if="category.sub_category.length > 0"> <template v-for=&q ...

javascriptvue.js

PHP isn't getting the AJAX POST data from the JavaScript file

I've been stuck on this issue for hours now, unable to find a solution. Here is the javascript code snippet: function sendMovement(cel) { var name = "test"; $.ajax({ type: 'POST', url: '../game.php', ...

javascriptphpajaxweb

Exploring the functionalities of can-deactivate without incorporating routing

I'm facing an issue with a parent component and multiple child components. The parent component contains a form, while each child component also has its own form. Unfortunately, all child components share the same route as the parent component and hav ...

javascriptnode.jsangularmean-stack

ajax is providing identical data when called too frequently

Using my barcode scanner triggers the function below, but scanning multiple barcodes quickly results in duplicate data being processed. The issue seems to be related to the async setting - when it's false, the process slows down significantly. Is the ...

javascriptajaxloopsexit

Modify the appearance of a nested div using CSS hover on the main JSX container

Within the material-ui table component, I am dynamically mapping rows and columns. The className is set to clickableRow. The TableRow also includes a hover options div on the right side: const generateTableHoverOptions = () => { if (selected) { ...

javascripthtmlcssmaterial-uijsx

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

javascripthtmlreactjscarouselantd

Displaying Firebase snap.val using the ng-repeat directive

Just a quick question: I'm attempting to iterate through data in my $scope.discover using ng-repeat. Here is the code snippet I am using to fill that scope: const businessKey = '-KQ1hFH0qrvKSrymmn9d'; const rootRef = firebas ...

angularjsfirebasefirebase-realtime-database

Implementing a vertical tabindex change in Material UI Dialogue table

My material UI dialogue contains a table: <Dialog open={open} onClose={handleClose} maxWidth={'xl'} aria-labelledby='scroll-dialog-title' aria-describedby='scroll-dialog-description' disa ...

javascriptcssreactjsmaterial-ui

Can data be transferred between browsers, such as from Google Chrome to Mozilla Firefox?

I have a dilemma with two separate pages—one for Admin and the other for User. The Admin page is named index.html <!DOCTYPE html> <html lang="en"> <head> <style> * { padding: 0; ...

javascriptphphtmlnode.jsweb

How come only the final element is being displayed from an array in JavaScript, rather than all of the elements present

I am facing an issue while attempting to extract specific information from a JSON data and create a new array with key-value pairs. However, instead of getting all the elements, it only returns the last one. Here is my current code snippet: const input = ...

javascriptarraysjsonobjectmapping

How can I complete this .js file and .ejs file in NodeJS (Express) to query the object ID in my browser?

My goal is to query an objectID from MongoDB using NodeJS and then retrieve it on my local host through http://localhost:3000/objectSearch?objectid= I've searched everywhere, but I can't seem to figure it out. If someone could provide me wi ...

javascriptnode.jsmongodbexpress

Execute Cheerio selector once the page has finished loading

Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...

javascripthtmlnode.jsweb-scrapingcheerio

Avoid allowing image uploads that are too large in size

Is there a way to block an image from being uploaded if it exceeds a specified size limit? Currently, I am using angular-base64-upload and although my error message appears when the image is too large, the image still gets uploaded. I'm puzzled as to ...

javascriptangularjsnpm

Transfer information from an Express route to a function exported from a Node module

I'm new to using node.js and I've been told that I need to use middleware, but I'm having trouble understanding its purpose and the proper way to implement it. I have data that is being sent from my view to an express route. ROUTE - route.j ...

javascriptnode.jsangularjsexpress

Issue with Inline JavaScript in `href` tag not functioning correctly in Firefox

I am encountering an issue with this inline JavaScript not working in Firefox. I need to figure out how to make it function correctly in Firefox. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> ...

javascripthtmlcssfirefox

When setting the form action attribute in jQuery, the parameter being passed may be null

My goal is to redirect my form action to another page with a URL parameter. Here's the code I'm using: ui.setFormActionToTargetPage = function () { $('form').get(0).setAttribute('action', 'myTargetPage.html?id=' ...

javascriptjqueryhtml

Explore within another map and analyze the node to spot the differences

I have some questions about iterating through a JavaScript Object and using array functions in JavaScript. Let's assume I have the following variables: var json1 = "[{"id": 1, "name":"x"}, {"id": 2, "name":"y"}]"; var json2 = "[{"id": 1, "name":"x"}, ...

javascriptarraysjson

AngularJS is restricting the use of square brackets within the URL parameter, specifically the character '[.'

My goal is to connect to an external API Everything works smoothly when my parameters are set up like this $http.post('http://api.myprivatebox.com/users.json', { email : email, password : password}).then(function (results) { console.log( ...

javascriptphpjqueryangularjsangularjs-http