AngularJS exception not showing full stack trace

When you’re debugging an AngularJS application and encounter an exception, but the full stack trace is not shown, it becomes significantly harder to identify the root cause of the issue. This is usually due to AngularJS’s internal error handling mechanism, minification, or browser limitations.

Let’s walk through step-by-step how to get the full stack trace for AngularJS exceptions, including tips for development and debugging environments.

---

Why the Full Stack Trace May Not Be Shown

AngularJS wraps exceptions using the $exceptionHandler service, which by default logs errors to the console in a basic way. Some reasons why stack traces are limited:

1. Custom exception handlers override or truncate stack traces.
2. Console logs only the message, not the stack.
3. Minification in production makes stack traces unreadable.
4. Try/catch in AngularJS internals can mask real traces.
5. Third-party libraries may interfere with error propagation.

---

Step-by-Step Fixes and Enhancements

1. Enable Debug Mode

Make sure AngularJS is not in production mode. If you use libraries like ng-annotate or ng-strict-di, disable optimizations:

<script src="angular.js"></script> <!-- NOT angular.min.js -->

Use the unminified version of AngularJS during development to get readable stack traces.

---

2. Override $exceptionHandler

Create a custom provider that logs full stack traces:

app.factory('$exceptionHandler', function($log) {
  return function(exception, cause) {
    $log.error('Exception:', exception);
    $log.error('Cause:', cause);
    $log.error('Stack Trace:', exception.stack);
  };
});

• exception.stack gives the full trace.
• This will work if the browser supports the Error.stack property (most modern browsers do).

---

3. Force Throw in Try/Catch to Expose Full Error

Sometimes AngularJS internally catches errors, which means you see only partial info. You can manually add breakpoints or:

try {
  // something suspicious
} catch (e) {
  console.error(e.stack);
  throw e;
}

This exposes the complete trace and ensures DevTools catches it.

---

4. Use window.onerror for Global Capturing

Sometimes exceptions aren’t caught by Angular but bubble up:

window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error:', error);
  console.error('Stack:', error?.stack || 'no stack trace available');
};

This is a good fallback for exceptions outside Angular’s scope (like native JS errors or external script failures).

---

5. Use Developer Tools Breakpoints

In Chrome:

1. Open Sources tab.
2. Enable Pause on exceptions.
3. Watch where the error originates — this gives you the full call stack with file names and line numbers.

---

6. Install Source Maps for Production

If you’re seeing minified stack traces (like at a (app.min.js:1)), add source maps to your build pipeline:

• Ensure your *.js.map files are generated and included.
• Your build tool (Webpack, Gulp, Grunt) should support source map generation.
• In index.html:

<!-- Automatically loaded if the browser finds sourceMappingURL -->
<script src="app.min.js"></script>

---

7. Check AngularJS Version

Older versions of AngularJS (prior to 1.3) had poor error messaging. Upgrade if possible to 1.5+ for improved dev tools compatibility and debugging.

---

8. Use Logging Libraries

Tools like StackTrace.js can help extract deeper stack traces:

npm install stacktrace-js

Example usage:

StackTrace.fromError(error).then(function(stackframes) {
  var stringifiedStack = stackframes.map(function(sf) {
    return sf.toString();
  }).join('\n');
  console.log(stringifiedStack);
});

---

9. Test in Multiple Browsers

Some browsers truncate error stacks:

Browser	Stack Trace Support
Chrome	Full Stack
Firefox	Good support
Safari	Sometimes partial
Edge	Decent support
IE 11	Poor support

For the best debugging experience, test in Chrome or Firefox.

---

10. Avoid Swallowing Errors in Promises

AngularJS uses $q for promises. Avoid catching errors silently:

// BAD
someService.doSomething().then(function(res) {
  // logic
}, function(err) {
  // error ignored
});

// BETTER
someService.doSomething()
  .then(function(res) {
    // logic
  })
  .catch(function(err) {
    console.error(err.stack || err);
  });

---

Best Practices

Practice	Why It Helps
Use angular.js instead of angular.min.js	Better stack traces
Use $exceptionHandler override	Full trace logging
Use console.trace()	Logs call history
Use breakpoints and DevTools	Visual trace and call stack
Enable source maps	Translate minified traces
Don’t suppress promise errors	Avoids silent failures
Don’t catch-and-ignore errors	Keeps trace visible

---

Anti-Patterns to Avoid

• Overriding $exceptionHandler and only logging exception.message.
• Swallowing exceptions in try/catch blocks.
• Using minified files in development.
• Ignoring DevTools pause-on-exception feature.

---