fix(ui): Fix Messages interface in Group Details (#11417)

This was crashing because `formatted` was an empty string and it was attempting to fetch an annotated `message` that did not exist. This fixes the message interface and makes sure `Annotated` does not return undefined.

Also add an error boundary for MetaData so that we can fail gracefully in the future

Fixes JAVASCRIPT-4Z1

src/sentry/static/sentry/app/components/events/interfaces/message.jsx

@@ -20,7 +20,12 @@ class MessageInterface extends React.Component {
       <EventDataSection group={group} event={event} type="message" title={t('Message')}>
         <pre className="plain">
           <Annotated object={data} prop="formatted">
-            {formatted => formatted || <Annotated object={data} prop="message" />}
+            {formatted =>
+              typeof formatted !== 'undefined' ? (
+                formatted
+              ) : (
+                <Annotated object={data} prop="message" />
+              )}
           </Annotated>
         </pre>
 

src/sentry/static/sentry/app/components/events/meta/annotated.jsx

@@ -38,7 +38,7 @@ Annotated.propTypes = {
 };
 
 Annotated.defaultProps = {
-  children: value => value,
+  children: value => (typeof value === 'undefined' ? null : value),
   required: false,
 };
 

src/sentry/static/sentry/app/components/events/meta/metaData.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import _ from 'lodash';
 
 import {getMeta} from 'app/components/events/meta/metaProxy';
+import ErrorBoundary from 'app/components/errorBoundary';
 
 /**
  * Retrieves metadata from an object (object should be a proxy that
@@ -26,6 +27,11 @@ export default class MetaData extends React.Component {
 
     let value = object[prop];
     let meta = getMeta(object, prop);
-    return required && _.isNil(value) && !meta ? null : children(value, meta);
+
+    return (
+      <ErrorBoundary mini>
+        {required && _.isNil(value) && !meta ? null : children(value, meta)}
+      </ErrorBoundary>
+    );
   }
 }

tests/js/spec/components/events/__snapshots__/crashContent.spec.jsx.snap

@@ -93,50 +93,54 @@ exports[`CrashContent renders with meta data 1`] = `
               prop="value"
               required={true}
             >
-              <pre
-                className="exc-message"
-                style={
-                  Object {
-                    "marginTop": 0,
-                  }
-                }
+              <ErrorBoundary
+                mini={true}
               >
-                <AnnotatedText
-                  chunks={Array []}
-                  errors={Array []}
-                  props={Object {}}
-                  remarks={
-                    Array [
-                      Array [
-                        "device_id",
-                        "p",
-                        11,
-                        51,
-                      ],
-                    ]
+                <pre
+                  className="exc-message"
+                  style={
+                    Object {
+                      "marginTop": 0,
+                    }
                   }
-                  value="python err A949AE01EBB07300D62AE0178F0944DD21F8C98C err"
                 >
-                  <span>
-                    <Tooltip
-                      title="Pseudonymized due to PII rule \\"device_id\\""
-                    >
-                      <Redaction
-                        className="tip"
+                  <AnnotatedText
+                    chunks={Array []}
+                    errors={Array []}
+                    props={Object {}}
+                    remarks={
+                      Array [
+                        Array [
+                          "device_id",
+                          "p",
+                          11,
+                          51,
+                        ],
+                      ]
+                    }
+                    value="python err A949AE01EBB07300D62AE0178F0944DD21F8C98C err"
+                  >
+                    <span>
+                      <Tooltip
                         title="Pseudonymized due to PII rule \\"device_id\\""
                       >
-                        <span
-                          className="tip css-ielfiw-Redaction e1p1th7g1"
+                        <Redaction
+                          className="tip"
                           title="Pseudonymized due to PII rule \\"device_id\\""
                         >
-                          python err A949AE01EBB07300D62AE0178F0944DD21F8C98C err
-                        </span>
-                      </Redaction>
-                    </Tooltip>
-                     
-                  </span>
-                </AnnotatedText>
-              </pre>
+                          <span
+                            className="tip css-ielfiw-Redaction e1p1th7g1"
+                            title="Pseudonymized due to PII rule \\"device_id\\""
+                          >
+                            python err A949AE01EBB07300D62AE0178F0944DD21F8C98C err
+                          </span>
+                        </Redaction>
+                      </Tooltip>
+                       
+                    </span>
+                  </AnnotatedText>
+                </pre>
+              </ErrorBoundary>
             </MetaData>
           </Annotated>
           <StacktraceContent

tests/js/spec/components/events/meta/annotated.spec.jsx

@@ -39,6 +39,13 @@ describe('Annotated', () => {
       expect(mock).toHaveBeenCalledWith('foo');
     });
 
+    it('does not error if prop does not exist on object', () => {
+      let obj = {
+        value: 'foo',
+      };
+      mount(<Annotated object={obj} prop="invalid" />);
+    });
+
     it('renders a number', () => {
       let obj = {
         value: 0,