fix(ui): Fix rendering HTTP breadcrumb when URL is not a string (#12706)

* refactor to use styled components
* attempt to stringify url objects

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbs/category.jsx

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'react-emotion';
+
+import overflowEllipsis from 'app/styles/overflowEllipsis';
 
 class Category extends React.Component {
   static propTypes = {
@@ -22,12 +25,18 @@ class Category extends React.Component {
     } else {
       title = value;
     }
-    return (
-      <span className="crumb-category" title={title}>
-        {title}
-      </span>
-    );
+    return <CrumbCategory title={title}>{title}</CrumbCategory>;
   }
 }
 
 export default Category;
+
+const CrumbCategory = styled('span')`
+  font-size: 95%;
+  font-weight: bold;
+  text-transform: none;
+  padding-right: 10px;
+  color: ${p => p.theme.gray5};
+
+  ${overflowEllipsis}
+`;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbs/httpRenderer.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {t} from 'app/locale';
 import CrumbTable from 'app/components/events/interfaces/breadcrumbs/crumbTable';
 import SummaryLine from 'app/components/events/interfaces/breadcrumbs/summaryLine';
 
@@ -10,11 +11,15 @@ class HttpRenderer extends React.Component {
   };
 
   renderUrl = url => {
-    return typeof url === 'string' && url.match(/^https?:\/\//) ? (
-      <a href={url}>{url}</a>
-    ) : (
-      <em>{url}</em>
-    );
+    if (typeof url === 'string') {
+      return url.match(/^https?:\/\//) ? <a href={url}>{url}</a> : <em>{url}</em>;
+    }
+
+    try {
+      return JSON.stringify(url);
+    } catch (e) {
+      return t('Invalid URL');
+    }
   };
 
   render() {

src/sentry/static/sentry/less/group-detail.less

@@ -2424,15 +2424,6 @@ ul.crumbs {
       font-style: normal;
     }
 
-    span.crumb-category {
-      font-size: 95%;
-      font-weight: bold;
-      text-transform: none;
-      .truncate;
-      padding-right: 10px;
-      color: @gray-darker;
-    }
-
     span.timing {
       font-size: 90%;
       padding-left: 6px;

tests/js/spec/components/events/interfaces/breadcrumbComponents/httpRenderer.spec.jsx

@@ -41,7 +41,24 @@ describe('HttpRenderer', function() {
         />
       );
 
-      expect(httpRendererWrapper.find('.crumb-category').text()).toEqual('xhr');
+      expect(httpRendererWrapper.find('CrumbCategory').text()).toEqual('xhr');
+    });
+
+    it("shouldn't blow up if url is not a string", function() {
+      const httpRendererWrapper = mount(
+        <HttpRenderer
+          crumb={{
+            category: 'xhr',
+            type: 'http',
+            data: {
+              method: 'GET',
+              url: {},
+            },
+          }}
+        />
+      );
+
+      expect(httpRendererWrapper.find('CrumbCategory').text()).toEqual('xhr');
     });
   });
 });