feat: Integrate sentry JS and remove raven (#4091)

app/app.js

@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'open-event-frontend/config/environment';
+import './sentry';
 
 const App = Application.extend({
   modulePrefix    : config.modulePrefix,

app/config/environment.d.ts

@@ -13,4 +13,9 @@ declare const config: {
   podModulePrefix: string;
   locationType: string;
   rootURL: string;
+  sentry: {
+    dsn: string;
+    debug: boolean;
+    development: boolean;
+  }
 };

app/helpers/currency-symbol.js

@@ -3,7 +3,8 @@ import { find } from 'lodash-es';
 import { paymentCurrencies } from 'open-event-frontend/utils/dictionary/payment';
 
 export function currencySymbol(params) {
-  return find(paymentCurrencies, ['code', params[0]]).symbol;
+  const currency = find(paymentCurrencies, ['code', params[0]]);
+  return currency ? currency.symbol : 'UNKNOWN';
 }
 
 export default Helper.helper(currencySymbol);

app/sentry.ts

@@ -0,0 +1,26 @@
+import * as Sentry from '@sentry/browser';
+import { Ember } from '@sentry/integrations';
+import config from 'open-event-frontend/config/environment';
+
+Sentry.init({
+    integrations: [new Ember()],
+    beforeSend(event: Sentry.Event) {
+        const exception = event.exception?.values?.[0];
+        const errorValue = exception?.value;
+        if (errorValue?.includes("Ember Data Request") && 
+            errorValue?.includes("404")) {
+            // Ignore 404 errors from Ember Data because 
+            // I don't know how to turn them off
+            return null;
+        }
+
+        if (errorValue?.includes("TransitionAborted") && 
+            exception?.mechanism?.handled) {
+            // Every page load has a handled TransitionAborted for some reason
+            return null;
+        }
+
+        return event;
+    },
+    ...config.sentry
+});

app/services/auth-manager.js

@@ -5,9 +5,10 @@ import { mapKeys } from 'lodash-es';
 
 export default Service.extend({
 
-  session : service(),
-  metrics : service(),
-  store   : service(),
+  session    : service(),
+  metrics    : service(),
+  store      : service(),
+  bugTracker : service(),
 
   currentUser: computed('session.data.currentUserFallback.id', 'currentUserModel', function() {
     if (this.currentUserModel) {
@@ -59,12 +60,18 @@ export default Service.extend({
         distinctId : this.currentUser.id,
         email      : this.currentUser.email
       });
+      this.bugTracker.setUser({
+        id    : this.currentUser.id,
+        email : this.currentUser.email
+      });
     }
   },
 
   identifyStranger() {
     this.metrics.identify(null);
+    this.bugTracker.clearUser();
   },
+
   async loadUser() {
     if (this.currentUserModel) {
       return this.currentUserModel;

app/services/bug-tracker.ts

@@ -0,0 +1,21 @@
+import Service from '@ember/service';
+import * as Sentry from '@sentry/browser';
+
+export default class BugTracker extends Service {
+
+  setUser(user: Sentry.User | null) {
+    Sentry.setUser(user)
+  }
+
+  clearUser() {
+    Sentry.setUser(null);
+  }
+
+}
+
+// DO NOT DELETE: this is how TypeScript knows how to look up your services.
+declare module '@ember/service' {
+  interface Registry {
+    'bug-tracker': BugTracker;
+  }
+}

config/environment.js

@@ -150,8 +150,7 @@ module.exports = function(environment) {
         'https://platform.twitter.com',
         'https://cdn.syndication.twimg.com',
         'http://127.0.0.1:5000',
-        'cdn.omise.co/omise.js',
-        'cdn.ravenjs.com'
+        'cdn.omise.co/omise.js'
       ],
       'font-src': [
         '\'self\'',

ember-cli-build.js

@@ -35,6 +35,9 @@ module.exports = function(defaults) {
       exclude          : ['package.json'],
       extensions       : ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'json']
     },
+    sourcemaps: {
+      enabled: true
+    },
     autoImport: {
       webpack: {
         node: {

package.json

@@ -26,6 +26,9 @@
     "@ember/optional-features": "^1.3.0",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
+    "@sentry/browser": "^5.12.1",
+    "@sentry/integrations": "^5.12.0",
+    "@sentry/node": "^5.12.3",
     "@types/ember": "^3.1.1",
     "@types/ember-data": "^3.1.9",
     "@types/ember-qunit": "^3.4.7",
@@ -70,7 +73,6 @@
     "ember-cli-qunit": "^4.4.0",
     "ember-cli-sass": "^10.0.0",
     "ember-cli-scss-lint": "^2.4.1",
-    "ember-cli-sentry": "^4.1.0",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-string-helpers": "^4.0.6",
     "ember-cli-stripe": "^3.0.0",
@@ -146,7 +148,6 @@
     "@bower_components/js-polyfills": "inexorabletash/polyfill#^0.1.34",
     "@bower_components/open-event-theme": "fossasia/open-event-theme#^0.0.6",
     "@bower_components/pace": "HubSpot/pace#^1.0.2",
-    "@bower_components/raven-js": "getsentry/raven-js#~3.3",
     "@bower_components/semantic-ui-calendar": "mdehoog/semantic-ui-calendar#^0.0.8",
     "@bower_components/tinyColorPicker": "PitPik/tinyColorPicker#^1.1.1",
     "@bower_components/wysihtml": "Voog/wysihtml#^0.5.5",

tests/unit/services/bug-tracker-test.ts

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | bug-tracker', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:bug-tracker');
+    assert.ok(service);
+  });
+});