feat(sentry): add performance instrumentation for dashboard comparison

src/config/discovery.config.js

@@ -175,6 +175,7 @@ require.config({
     router: 'js/apps/discovery/router',
     analytics: 'js/components/analytics',
     utils: 'js/utils',
+    performance: 'js/utils/performance',
     reactify: 'js/plugins/reactify',
     es6: 'js/plugins/es6',
     suit: 'shared/dist/index.umd.development',

src/config/sentry.js

@@ -182,6 +182,11 @@
       tracesSampleRate: window.ENV === 'development' ? 1.0 : 0.75,
       debug: false,
       enableLogs: true,
+      initialScope: {
+        tags: {
+          app: 'bumblebee',
+        },
+      },
       _experiments: {
         enableStandaloneLcpSpans: true,
         enableStandaloneClsSpans: true,

src/js/components/library_controller.js

@@ -8,6 +8,7 @@ define([
   'js/components/api_query',
   'js/mixins/dependon',
   'utils',
+  'performance',
 ], function(
   Backbone,
   GenericModule,
@@ -17,7 +18,8 @@ define([
   ApiFeedback,
   ApiQuery,
   Dependon,
-  utils
+  utils,
+  performance
 ) {
   var LibraryModel = Backbone.Model.extend({
     defaults: function() {
@@ -269,10 +271,15 @@ define([
       var that = this;
 
       var endpoint = ApiTargets.LIBRARIES;
-      return this.composeRequest(endpoint, 'GET').done(function(data) {
-        that._metadataLoaded = true;
-        that.collection.reset(data.libraries);
-      });
+      return performance.trackDeferred(
+        performance.PERF_SPANS.LIBRARY_LIST_LOAD,
+        function() {
+          return that.composeRequest(endpoint, 'GET').done(function(data) {
+            that._metadataLoaded = true;
+            that.collection.reset(data.libraries);
+          });
+        }
+      );
     },
 
     /*
@@ -435,10 +442,15 @@ define([
       var that = this;
 
       var endpoint = ApiTargets.LIBRARIES;
-      return this.composeRequest(endpoint, 'POST', { data: data }).done(
+      return performance.trackDeferred(
+        performance.PERF_SPANS.LIBRARY_CREATE_TOTAL,
         function() {
-          // refresh collection
-          that._fetchAllMetadata();
+          return that.composeRequest(endpoint, 'POST', { data: data }).done(
+            function() {
+              // refresh collection
+              that._fetchAllMetadata();
+            }
+          );
         }
       );
     },
@@ -644,29 +656,32 @@ define([
      */
     addBibcodesToLib: function(data) {
       var that = this;
-      var promise = this._getBibcodes(data).then(function(bibcodes) {
-        // should return success or fail message
-        return that
-          .updateLibraryContents(data.library, {
-            bibcode: bibcodes,
-            action: 'add',
-          })
-          .fail(function() {
-            var message =
-              'Library <b>' +
-              that.collection.get(data.library).title +
-              '</b> could not be updated';
-            that
-              .getBeeHive()
-              .getService('PubSub')
-              .publish(
-                that.getBeeHive().getService('PubSub').ALERT,
-                new ApiFeedback({ code: 0, msg: message, type: 'danger' })
-              );
+      return performance.trackDeferred(
+        performance.PERF_SPANS.LIBRARY_ADD_TOTAL,
+        function() {
+          return that._getBibcodes(data).then(function(bibcodes) {
+            // should return success or fail message
+            return that
+              .updateLibraryContents(data.library, {
+                bibcode: bibcodes,
+                action: 'add',
+              })
+              .fail(function() {
+                var message =
+                  'Library <b>' +
+                  that.collection.get(data.library).title +
+                  '</b> could not be updated';
+                that
+                  .getBeeHive()
+                  .getService('PubSub')
+                  .publish(
+                    that.getBeeHive().getService('PubSub').ALERT,
+                    new ApiFeedback({ code: 0, msg: message, type: 'danger' })
+                  );
+              });
           });
-      });
-
-      return promise;
+        }
+      );
     },
 
     /* fetch the bibcodes, then POST to the create endpoint with the bibcodes

src/js/components/navigator.js

@@ -21,6 +21,7 @@ define([
   'js/components/transition',
   'js/components/transition_catalog',
   'analytics',
+  'performance',
 ], function (
   _,
   $,
@@ -30,6 +31,7 @@ define([
   Transition,
   TransitionCatalog,
   analytics,
+  performance,
 ) {
   // Document Title Constants
   var APP_TITLE = 'Astrophysics Data System';
@@ -108,6 +110,11 @@ define([
     _onCustomEvent: function (ev, data) {
       switch (ev) {
         case 'timing:results-loaded':
+          // End search submit span if one was started
+          if (this._searchSubmitSpan) {
+            this._searchSubmitSpan.end();
+            this._searchSubmitSpan = null;
+          }
           withSentry((sentry) => {
             try {
               const span = sentry.getActiveSpan && sentry.getActiveSpan();
@@ -126,6 +133,13 @@ define([
             } catch (_) {}
           });
           break;
+        case 'timing:search-started':
+          // Start search submit span
+          this._searchSubmitSpan = performance.startRenderSpan(
+            performance.PERF_SPANS.SEARCH_SUBMIT_TOTAL,
+            data
+          );
+          break;
         case 'update-document-title':
           this._updateDocumentTitle(data);
           break;

src/js/modules/orcid/orcid_api.js

@@ -55,6 +55,7 @@ define([
   'js/modules/orcid/work',
   'js/modules/orcid/profile',
   'js/modules/orcid/bio',
+  'performance',
 ], function(
   _,
   Bootstrap,
@@ -72,7 +73,8 @@ define([
   ApiFeedback,
   Work,
   Profile,
-  Bio
+  Bio,
+  performance
 ) {
   var OrcidApi = GenericModule.extend({
     /**
@@ -422,30 +424,39 @@ define([
      */
     _getUserProfile: function() {
       var self = this;
-      var request = this.createRequest(this.getUrl('profile_full'));
 
       // get everything so far in the cache
       var cache = self.getUserProfileCache.splice(0);
 
-      request.done(function(profile) {
-        _.forEach(cache, function(promise) {
-          orcidProfile = new Profile(profile);
-          promise.resolve(
-            orcidProfile.setWorks(
-              _.map(profile, function(profile, idx) {
-                return new Work(profile);
-              })
-            )
-          );
-        });
-      });
+      // Track the profile load with performance span
+      performance.trackDeferred(
+        performance.PERF_SPANS.ORCID_PROFILE_LOAD,
+        function() {
+          var request = self.createRequest(self.getUrl('profile_full'));
+
+          request.done(function(profile) {
+            _.forEach(cache, function(promise) {
+              orcidProfile = new Profile(profile);
+              promise.resolve(
+                orcidProfile.setWorks(
+                  _.map(profile, function(profile, idx) {
+                    return new Work(profile);
+                  })
+                )
+              );
+            });
+          });
 
-      request.fail(function() {
-        var args = arguments;
-        _.forEach(cache, function(promise) {
-          promise.reject.apply(promise, args);
-        });
-      });
+          request.fail(function() {
+            var args = arguments;
+            _.forEach(cache, function(promise) {
+              promise.reject.apply(promise, args);
+            });
+          });
+
+          return request;
+        }
+      );
     },
 
     /**