Angular debug component

_debug.scss

.debug {
  &__heading {
    margin-bottom: 20px;
  }

  &__message {
    background: $gray-lightest;
    margin-bottom: 20px;
    padding: 20px;
  }

  &__source {
    font-weight: bold;
    margin-bottom: 20px;
  }

  &__trace-nav {
    font-size: rem-calc(14);
  }

  &__trace-source {
    font-weight: bold;
  }

  &__close-button {
    @extend .button;
    @extend .small;
    margin: 0;
  }
}

debug.js

angular.module('app')
  .service('debugService', function($log, $injector) {
    this.renderException = function(data) {
      return $injector.get('$modal').open({
        templateUrl: 'components/debug/modal.html',
        controller: 'DebugController',
        resolve: {
          data: function() {
            return data;
          }
        }
      });
    };
  })
  .controller('DebugController', function($log, $scope, data, $modalInstance) {
    $scope.data = data;

    $scope.close = function() {
      $modalInstance.dismiss();
    };
  })
  .factory('exceptionInterceptor', function($log, $q, DEBUG, debugService) {
    return {
      responseError: function(response) {
        if (DEBUG && response.status === 500) {
          debugService.renderException(response.data);
        }

        return $q.reject(response);
      }
    };
  })
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('exceptionInterceptor');
  });

modal.html

<div class="debug">
  <h3 class="debug__heading">
    Server Error
    <small class="debug__exception">{{ data.exception }}</small>
  </h3>

  <div class="debug__message">{{ data.message || 'No message' }}</div>

  <div class="debug__source">{{ data.file }}({{ data.line }})</div>

  <div class="debug__trace">
    <h5 class="debug__trace-heading">Stack Trace</h5>

    <ol class="debug__trace-nav">
      <li class="debug__trace-item" ng-repeat="item in data.trace" ng-if="item.file">
        <span class="debug__trace-source">{{ item.file }}({{ item.line }})</span>
        <span class="debug__trace-function">{{ item.class ? item.class + '::' : '' }}{{ item.function }}</span>
      </li>
    </ol>

  </div>

  <button type="button" class="debug__close-button" ng-click="close()">Close</button>

</div>