feat: Tracing setup (#12952)

* feat: Fronted tracing setup

* ref: Remove tracing middleware

* feat: Add trace context

* feat: Update sdk dependecies

* fix: Mock getCurrentHub

package.json

@@ -18,8 +18,8 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "@sentry/browser": "5.0.8",
-    "@sentry/integrations": "^5.0.8",
+    "@sentry/browser": "5.2.0-beta.0",
+    "@sentry/integrations": "5.2.0-beta.0",
     "algoliasearch": "^3.32.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.0",

requirements-base.txt

@@ -57,7 +57,7 @@ requests-oauthlib==0.3.3
 requests[security]>=2.20.0,<2.21.0
 selenium==3.141.0
 semaphore>=0.4.32,<0.5.0
-sentry-sdk>=0.7.0
+sentry-sdk>=0.7.14
 setproctitle>=1.1.7,<1.2.0
 simplejson>=3.2.0,<3.9.0
 six>=1.10.0,<1.11.0

src/sentry/conf/server.py

@@ -236,7 +236,6 @@ MIDDLEWARE_CLASSES = (
     # TODO(dcramer): kill this once we verify its safe
     # 'sentry.middleware.social_auth.SentrySocialAuthExceptionMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
-    'sentry.middleware.tracing.SentryTracingMiddleware',
     'sentry.debug.middleware.DebugMiddleware',
 )
 

src/sentry/interfaces/contexts.py

@@ -168,6 +168,16 @@ class MonitorContextType(ContextType):
     }
 
 
+@contexttype
+class TraceContextType(ContextType):
+    type = 'trace'
+    indexed_fields = {
+        '': u'{trace_id}',
+        'span': u'{span_id}',
+        'ctx': u'{trace_id}-{span_id}',
+    }
+
+
 class Contexts(Interface):
     """
     This interface stores context specific information.

src/sentry/middleware/tracing.py

@@ -1,25 +0,0 @@
-from __future__ import absolute_import
-
-import six
-from uuid import uuid1
-
-import sentry_sdk
-
-from sentry import logging
-
-
-class SentryTracingMiddleware(object):
-    def process_request(self, request):
-        span_id = six.text_type(uuid1())
-        transaction_id = request.META.get('HTTP_X_TRANSACTION_ID') or six.text_type(uuid1())
-        request_id = request.META.get('HTTP_X_REQUEST_ID')
-        with sentry_sdk.configure_scope() as scope:
-            scope.set_tag('span_id', span_id)
-            scope.set_tag('transaction_id', transaction_id)
-            if request_id is not None:
-                scope.set_tag('request_id', request_id)
-                logging.bind('sentry', request_id=request_id)
-            else:
-                # Need to be explicitly unbound when not set
-                # otherwise it'll carry onto future requests
-                logging.unbind('sentry', 'request_id')

src/sentry/static/sentry/app/api.jsx

@@ -12,7 +12,6 @@ import {openSudo, redirectToProject} from 'app/actionCreators/modal';
 import {uniqueId} from 'app/utils/guid';
 import GroupActions from 'app/actions/groupActions';
 import createRequestError from 'app/utils/requestError/createRequestError';
-import * as tracing from 'app/utils/tracing';
 
 export class Request {
   constructor(xhr) {
@@ -208,8 +207,6 @@ export class Client {
         contentType: 'application/json',
         headers: {
           Accept: 'application/json; charset=utf-8',
-          'X-Transaction-ID': tracing.getTransactionId(),
-          'X-Span-ID': tracing.getSpanId(),
         },
         success: (...args) => {
           const [resp] = args || [];

src/sentry/static/sentry/app/index.js

@@ -20,13 +20,12 @@ import * as ReactEmotion from 'react-emotion';
 import Reflux from 'reflux';
 import * as Router from 'react-router';
 import * as Sentry from '@sentry/browser';
-import {ExtraErrorData} from '@sentry/integrations';
+import {ExtraErrorData, Tracing} from '@sentry/integrations';
 import createReactClass from 'create-react-class';
 import jQuery from 'jquery';
 import moment from 'moment';
 
 import {metric} from 'app/utils/analytics';
-import * as tracing from 'app/utils/tracing';
 import ConfigStore from 'app/stores/configStore';
 import Main from 'app/main';
 import ajaxCsrfSetup from 'app/utils/ajaxCsrfSetup';
@@ -38,7 +37,13 @@ import plugins from 'app/plugins';
 // window.__SENTRY__OPTIONS will be emmited by sdk-config.html before loading this script
 Sentry.init({
   ...window.__SENTRY__OPTIONS,
-  integrations: [new ExtraErrorData()],
+  integrations: [
+    new ExtraErrorData(),
+    new Tracing({
+      tracingOrigins: ['localhost', 'sentry.io', /^\//],
+      autoStartOnDomReady: false,
+    }),
+  ],
 });
 
 Sentry.configureScope(scope => {
@@ -48,14 +53,6 @@ Sentry.configureScope(scope => {
   if (window.__SENTRY__VERSION) {
     scope.setTag('sentry_version', window.__SENTRY__VERSION);
   }
-
-  // There's no setTransaction API *yet*, so we have to be explicit here
-  scope.addEventProcessor(event => {
-    return {
-      ...event,
-      transaction: tracing.getRoute(),
-    };
-  });
 });
 
 function __raven_deprecated() {

src/sentry/static/sentry/app/utils/tracing.jsx

@@ -1,40 +0,0 @@
-import {uniqueId} from './guid';
-
-let spanId = null;
-let transactionId = null;
-let route = null;
-
-export function startTransaction() {
-  spanId = uniqueId();
-  transactionId = uniqueId();
-  if (window.Sentry) {
-    window.Sentry.configureScope(function(scope) {
-      scope.setTag('span_id', spanId);
-      scope.setTag('transaction_id', transactionId);
-    });
-  }
-  return {spanId, transactionId};
-}
-
-export function setRoute(currentRoute) {
-  route = currentRoute;
-  return route;
-}
-
-export function getRoute() {
-  return route;
-}
-
-export function getTransactionId() {
-  if (!transactionId) {
-    startTransaction();
-  }
-  return transactionId;
-}
-
-export function getSpanId() {
-  if (!spanId) {
-    startTransaction();
-  }
-  return spanId;
-}

src/sentry/static/sentry/app/views/app.jsx

@@ -7,6 +7,8 @@ import React from 'react';
 import Reflux from 'reflux';
 import createReactClass from 'create-react-class';
 import keydown from 'react-keydown';
+import {getCurrentHub} from '@sentry/browser';
+import {Tracing} from '@sentry/integrations';
 
 import {openCommandPalette} from 'app/actionCreators/modal';
 import {t} from 'app/locale';
@@ -25,7 +27,6 @@ import NewsletterConsent from 'app/views/newsletterConsent';
 import OrganizationsStore from 'app/stores/organizationsStore';
 import theme from 'app/utils/theme';
 import getRouteStringFromRoutes from 'app/utils/getRouteStringFromRoutes';
-import * as tracing from 'app/utils/tracing';
 
 function getAlertTypeForProblem(problem) {
   switch (problem.severity) {
@@ -157,12 +158,8 @@ const App = createReactClass({
   },
 
   updateTracing() {
-    tracing.startTransaction();
-
     const route = getRouteStringFromRoutes(this.props.routes);
-    if (route) {
-      tracing.setRoute(route);
-    }
+    Tracing.startTrace(getCurrentHub(), route);
   },
 
   onConfigStoreChange(config) {

tests/js/setup.js

@@ -110,6 +110,7 @@ jest.mock('@sentry/browser', () => {
     captureException: jest.fn(),
     showReportDialog: jest.fn(),
     lastEventId: jest.fn(),
+    getCurrentHub: jest.spyOn(SentryBrowser, 'getCurrentHub'),
     withScope: jest.spyOn(SentryBrowser, 'withScope'),
   };
 });