AngularJS integration for the new Javascript SDK

[miluoshi]

I couldn't find AngularJS integration for new unified Javascript SDK. The legacy AngularJS plugin doesn't work the same way as an Integration with the new SDK so I converted the plugin myself using TypeScript in case anyone needs it in the future. The functionality is the same as an old plugin. I took inspiration from the way the Vue plugin was converted to Vue integration and used the same pattern.

import * as Sentry from '@sentry/browser'
import { Integration, SentryEvent } from '@sentry/types'

// See https://github.com/angular/angular.js/blob/v1.4.7/src/minErr.js
const angularPattern = /^\[((?:[$a-zA-Z0-9]+:)?(?:[$a-zA-Z0-9]+))\] (.*?)\n?(\S+)$/

function normalizeData(event: SentryEvent) {
  // We only care about mutating an exception
  // eslint-disable-next-line lodash/prefer-get
  const exception = event.exception && event.exception.values && event.exception.values[0]
  if (exception) {
    const matches = angularPattern.exec(exception.value || '')

    if (matches) {
      // This type now becomes something like: $rootScope:inprog
      exception.type = matches[1]
      exception.value = matches[2]

      event.message = exception.type + ': ' + exception.value
      // auto set a new tag specifically for the angular error url
      event.extra = { ...event.extra, angularDocs: matches[3].substr(0, 250) }
    }
  }

  return event
}

/**
 * AngularJS integration
 *
 * Provides an $exceptionHandler for AngularJS
 */
export class AngularIntegration implements Integration {
  public name: string = AngularIntegration.id
  public static id: string = 'AngularJS'

  public static moduleName = 'ngSentry'

  private readonly angular: ng.IAngularStatic

  public constructor(options: { angular?: ng.IAngularStatic } = {}) {
    this.angular = options.angular || (window as Window & { angular: ng.IAngularStatic }).angular
  }

  public setupOnce(): void {
    if (!this.angular) {
      console.error('AngularIntegration is missing an angular instance')
      return
    }

    function $exceptionHandlerDecorator($delegate: ng.IExceptionHandlerService) {
      const $exceptionHandler: ng.IExceptionHandlerService = (exception, cause) => {
        Sentry.withScope(scope => {
          if (cause) scope.setExtra('cause', cause)
          scope.addEventProcessor((event, _hint) => normalizeData(event) || event)
          Sentry.captureException(exception)
        })
        $delegate(exception, cause)
      }
      return $exceptionHandler
    }

    this.angular
      .module(AngularIntegration.moduleName, [])
      .config(['$provide', ($provide: ng.auto.IProvideService) => {
        $provide.decorator('$exceptionHandler', ['$delegate', $exceptionHandlerDecorator])
      }])
  }
}

You can then use it in your AngularJS app like this:

import angular from 'angular'
import { AngularIntegration } from './utils/sentry'

Sentry.init({
  dsn: __YOUR_DSN__,
  integrations: [new AngularIntegration({ angular })]
})

angular.module('common', [
  // other modules...
  AngularIntegration.moduleName
])

[kamilogorek]

Thanks @miluoshi, awesome work! Will keep it open for everyone else and integrate it into our code base one day. Cheers!

[matt-senseye]

This was really helpful for me, thanks @miluoshi!

[kamilogorek]

@miluoshi pulled your integration to 0e43b69 :)