传统的 JavaScript 开发经历了无数次的失败和尝试，而 AngularJS 的出现为我们带来了一套先进的前端开发框架。尽管 AngularJS 的代码质量和编程方式很棒，但是即使是最有经验的开发人员也会遇到一些常见的错误。这里就介绍 AngularJS 开发中最常见的错误之一：没有跟踪调用堆栈。
问题描述
如果你曾经开发过 AngularJS 程序，你可能会遇到这类错误：
TypeError: cannot read property ‘x’ of undefined
这个错误信息可以告诉你你访问了一个未定义的变量，但是它没有告诉你这个错误在什么地方发生了，也没有告诉你这个未定义的变量它的值是什么。这就是没有跟踪调用堆栈的问题，它会给我们带来很多不便，比如：
- 难以定位错误
- 难以调试
- 增加代码测试工作量
问题根源
在 JavaScript 中，错误通常会被抛出并传递到调用栈中，如果在调用栈中有一个 try-catch 语句，那么错误就会被捕获和处理。但是，在 AngularJS 中，我们通常使用了依赖注入（Dependency Injection）这个特性，它使得我们很难追踪错误所在的代码位置和调用堆栈。
如果使用了依赖注入这个特性，那么 AngularJS 会把错误信息通过 $exceptionHandler 这个服务对象传递出来，但是它只是提供了一个简单的错误信息，并没有为你提供错误的详细信息以及错误发生的位置。
解决方案
为了跟踪错误的详细信息和调用堆栈，我们可以加入几行代码来进行处理：
-- -------------------- ---- -------
--------
----------------
------------------- -------- ---------- -
--------------------------------------- ------------- -------- ----------- -
------ -------- ----------- ------ -
-------------------- -------
-- -----------
-----------------------------
--
----
----以上代码是 AngularJS 的代码装饰器（Decorator Pattern）的一个例子。它通过 $provide 服务和 $exceptionHandler 服务来传递错误信息和调用堆栈信息。这样，我们就可以在控制台中查看到完整的错误信息和调用堆栈信息，方便我们定位问题和进行调试。
例子
下面是一个错误的例子：
angular.module('myApp', ['ngRoute']).
controller('myController', ['$scope', function ($scope) {
// 当 $scope.$apply() 被调用时，它会抛出一个错误。
$scope.$apply();
}]);当我们执行上面的代码时，它会抛出一个错误，但是我们并不知道这个错误是在哪里发生的。如果我们使用上面的代码装饰器，我们就可以得到完整的错误信息和调用堆栈信息：
-- -------------------- ---- -------
---------- ------ ---- -------- --------- -- ----
-- ------------- --------------------------------------------------------------------
-- ------------ --------------------------------------------------------------------
-- --------- ------------------------------------
-- ----------- --------------------------------------------------------------------
-- ------------ --------------------------------------------------------------------
-- ----------------------------- ------------------------------------------------------------------------------
-- --------------------------------------- ---------------------------------------------------------------------
-- --------------------------------- ----------------------------------------------------------------------以上信息告诉了我们错误的详细信息和调用堆栈信息。我们可以看到错误是在控制器中的第 10 行代码中发生的。
结论
AngularJS 是一个非常优秀的前端框架，但是即使是最有经验的开发人员也会遇到一些常见的错误。其中一个常见的错误就是没有跟踪调用堆栈。
为了避免这个问题，我们可以使用上面的代码装饰器来打印错误信息和调用堆栈信息。这样，我们就可以方便的定位问题和进行调试。希望这篇文章对 AngularJS 开发者能有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67727b526d66e0f9aad9a713