feat: Add router instrumentation for @sentry/ember

This will add routing instrumentation for Ember transitions to @sentry/ember.

The import will be dynamically loading depending on configuration settings with  to not increase bundle size.

Author: k-fish

packages/ember/addon/index.ts

@@ -21,7 +21,7 @@ export function InitSentryForEmber(_runtimeConfig: BrowserOptions | undefined) {
     if (config.ignoreEmberOnErrorWarning) {
       return;
     }
-    next(null, function () {
+    next(null, function() {
       warn(
         'Ember.onerror found. Using Ember.onerror can hide some errors (such as flushed runloop errors) from Sentry. Use Sentry.captureException to capture errors within Ember.onError or remove it to have errors caught by Sentry directly. This error can be silenced via addon configuration.',
         !Ember.onerror,
@@ -33,9 +33,11 @@ export function InitSentryForEmber(_runtimeConfig: BrowserOptions | undefined) {
   });
 }
 
+export function addTracing() {}
+
 function createEmberEventProcessor(): void {
   if (addGlobalEventProcessor) {
-    addGlobalEventProcessor((event) => {
+    addGlobalEventProcessor(event => {
       event.sdk = {
         ...event.sdk,
         name: 'sentry.javascript.ember',
@@ -54,4 +56,5 @@ function createEmberEventProcessor(): void {
   }
 }
 
+export default Sentry;
 export * from '@sentry/browser';

packages/ember/addon/instance-initializers/sentry-performance.ts

@@ -0,0 +1,74 @@
+import ApplicationInstance from '@ember/application/instance';
+import environmentConfig from 'ember-get-config';
+import Sentry from '@sentry/ember';
+
+export function initialize(appInstance: ApplicationInstance): void {
+  const config = environmentConfig['@sentry/ember'];
+  if (config['disablePerformance']) {
+    return;
+  }
+  instrumentForPerformance(appInstance);
+}
+
+function getTransitionInformation(transition: any, router: any) {
+  const fromRoute = transition?.from?.name;
+  const toRoute = transition ? transition.to.name : router.currentRouteName;
+  return {
+    fromRoute,
+    toRoute,
+  };
+}
+
+export async function instrumentForPerformance(appInstance: ApplicationInstance) {
+  const config = environmentConfig['@sentry/ember'];
+  const sentryConfig = config.sentry;
+  const tracing = await import('@sentry/tracing');
+
+  const router = appInstance.lookup('service:router');
+
+  sentryConfig['integrations'] = [
+    new tracing.Integrations.BrowserTracing({
+      routingInstrumentation: (startTransaction, startTransactionOnPageLoad) => {
+        let activeTransaction: any;
+        if (startTransactionOnPageLoad && window.location) {
+          const routeInfo = router.recognize(window.location.pathname);
+          activeTransaction = startTransaction({
+            name: `route:${routeInfo.name}`,
+            op: 'pageload',
+            tags: {
+              url: window.location.pathname,
+              toRoute: routeInfo.name,
+              'routing.instrumentation': '@sentry/ember',
+            },
+          });
+        }
+
+        router.on('routeWillChange', (transition: any) => {
+          const { fromRoute, toRoute } = getTransitionInformation(transition, router);
+          activeTransaction = startTransaction({
+            name: `route:${toRoute}`,
+            op: 'navigation',
+            tags: {
+              fromRoute,
+              toRoute,
+              'routing.instrumentation': '@sentry/ember',
+            },
+          });
+        });
+        router.on('routeDidChange', () => {
+          if (activeTransaction) {
+            activeTransaction.finish();
+          }
+        });
+      },
+      idleTimeout: 2000,
+    }),
+  ];
+
+  const browserClient = new Sentry.BrowserClient(sentryConfig);
+  Sentry.getCurrentHub().bindClient(browserClient);
+}
+
+export default {
+  initialize,
+};

packages/ember/app/instance-initializers/sentry-performance.js

@@ -0,0 +1 @@
+export { default, initialize } from '@sentry/ember/instance-initializers/sentry-performance';

packages/ember/index.js

@@ -1,5 +1,10 @@
 'use strict';
 
 module.exports = {
-  name: require('./package').name
+  name: require('./package').name,
+  options: {
+    babel: {
+      plugins: [ require.resolve('ember-auto-import/babel-plugin') ]
+    }
+  }
 };

packages/ember/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@sentry/browser": "5.20.1",
+    "@sentry/tracing": "5.20.1",
     "@sentry/types": "5.20.1",
     "@sentry/utils": "5.20.1",
     "ember-get-config": "^0.2.4",

packages/ember/tests/dummy/app/app.js

@@ -20,7 +20,9 @@ class TestFetchTransport extends Transports.FetchTransport {
   }
 }
 
-InitSentryForEmber({ transport: TestFetchTransport });
+InitSentryForEmber({
+  transport: TestFetchTransport,
+});
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

packages/ember/tests/dummy/app/controllers/application.js

@@ -1,63 +1,3 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import EmberError from '@ember/error';
-import { scheduleOnce } from '@ember/runloop';
-import RSVP from 'rsvp';
 
-export default class ApplicationController extends Controller {
-  @tracked showComponents;
-
-  @action
-  createError() {
-    this.nonExistentFunction();
-  }
-
-  @action
-  createEmberError() {
-    throw new EmberError('Whoops, looks like you have an EmberError');
-  }
-
-  @action
-  createCaughtEmberError() {
-    try {
-      throw new EmberError('Looks like you have a caught EmberError');
-    } catch(e) {
-      console.log(e);
-    }
-  }
-
-  @action
-  createFetchError() {
-    fetch('http://doesntexist.example');
-  }
-
-  @action
-  createAfterRenderError() {
-    function throwAfterRender() {
-      throw new Error('After Render Error');
-    }
-    scheduleOnce('afterRender', throwAfterRender);
-  }
-
-  @action
-  createRSVPRejection() {
-    const promise = new RSVP.Promise((resolve, reject) => {
-      reject('Promise rejected');
-    });
-    return promise;
-  }
-
-  @action
-  createRSVPError() {
-    const promise = new RSVP.Promise(() => {
-      throw new Error('Error within RSVP Promise');
-    });
-    return promise;
-  }
-
-  @action
-  toggleShowComponents() {
-    this.showComponents = !this.showComponents;
-  }
-}
+export default class ApplicationController extends Controller {}

packages/ember/tests/dummy/app/controllers/index.js

@@ -0,0 +1,63 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import EmberError from '@ember/error';
+import { scheduleOnce } from '@ember/runloop';
+import RSVP from 'rsvp';
+
+export default class IndexController extends Controller {
+  @tracked showComponents;
+
+  @action
+  createError() {
+    this.nonExistentFunction();
+  }
+
+  @action
+  createEmberError() {
+    throw new EmberError('Whoops, looks like you have an EmberError');
+  }
+
+  @action
+  createCaughtEmberError() {
+    try {
+      throw new EmberError('Looks like you have a caught EmberError');
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  @action
+  createFetchError() {
+    fetch('http://doesntexist.example');
+  }
+
+  @action
+  createAfterRenderError() {
+    function throwAfterRender() {
+      throw new Error('After Render Error');
+    }
+    scheduleOnce('afterRender', throwAfterRender);
+  }
+
+  @action
+  createRSVPRejection() {
+    const promise = new RSVP.Promise((resolve, reject) => {
+      reject('Promise rejected');
+    });
+    return promise;
+  }
+
+  @action
+  createRSVPError() {
+    const promise = new RSVP.Promise(() => {
+      throw new Error('Error within RSVP Promise');
+    });
+    return promise;
+  }
+
+  @action
+  toggleShowComponents() {
+    this.showComponents = !this.showComponents;
+  }
+}

packages/ember/tests/dummy/app/router.js

@@ -7,4 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
+  this.route('tracing');
 });

packages/ember/tests/dummy/app/styles/app.css

@@ -17,7 +17,7 @@ body {
   background-repeat: repeat;
   height: 100%;
   margin: 0;
-  font-family: Rubik,Avenir Next,Helvetica Neue,sans-serif;
+  font-family: Rubik, Avenir Next, Helvetica Neue, sans-serif;
   font-size: 16px;
   line-height: 24px;
   color: var(--foreground-color);
@@ -43,7 +43,7 @@ body {
 .box {
   background-color: #fff;
   border: 0;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.1);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   display: flex;
   width: 100%;
@@ -54,8 +54,8 @@ body {
   padding-top: 20px;
   width: 60px;
   background: #564f64;
-  background-image: linear-gradient(-180deg,rgba(52,44,62,0),rgba(52,44,62,.5));
-  box-shadow: 0 2px 0 0 rgba(0,0,0,.1);
+  background-image: linear-gradient(-180deg, rgba(52, 44, 62, 0), rgba(52, 44, 62, 0.5));
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
   border-radius: 4px 0 0 4px;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -73,12 +73,37 @@ body {
   background-image: url('/assets/images/sentry-logo.svg');
 }
 
+.nav {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  padding-top: 20px;
+  padding-bottom: 0px;
+}
+
+.nav a {
+  padding-left: 10px;
+  padding-right: 10px;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--foreground-color);
+}
+
+.nav a.active {
+  border-bottom: 4px solid #6c5fc7;
+}
+
 section.content {
   flex: 1;
   padding-bottom: 40px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 600;
 }
 
@@ -101,7 +126,8 @@ div.section {
   padding-top: 20px;
 }
 
-.content-container h3, .content-container h4 {
+.content-container h3,
+.content-container h4 {
   margin-top: 0px;
 }
 
@@ -113,7 +139,7 @@ button {
   border-radius: 3px;
   font-weight: 600;
   padding: 8px 16px;
-  transition: all .1s;
+  transition: all 0.1s;
 
   border: 1px solid transparent;
   border-radius: 3px;
@@ -139,8 +165,8 @@ button.primary {
 
   display: inline-block;
 
-  text-shadow: 0 -1px 0 rgba(0,0,0,.15);
-  box-shadow: 0 2px 0 rgba(0,0,0,.08);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
 
   text-transform: none;
   overflow: visible;
@@ -154,7 +180,6 @@ button.primary:hover {
 button.primary:focus {
   background: #5b4cc0;
   border-color: #3a2f87;
-  box-shadow: inset 0 2px 0 rgba(0,0,0,.12);
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
   outline: none;
 }
-