fix(ui): Render message params

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

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import KeyValueList from 'app/components/events/interfaces/keyValueList';
 import Annotated from 'app/components/events/meta/annotated';
 import EventDataSection from 'app/components/events/eventDataSection';
 import SentryTypes from 'app/sentryTypes';
 import {t} from 'app/locale';
+import {objectIsEmpty} from 'app/utils';
 
 class MessageInterface extends React.Component {
   static propTypes = {
@@ -13,29 +15,33 @@ class MessageInterface extends React.Component {
     data: PropTypes.object.isRequired,
   };
 
+  renderParams() {
+    let {params} = this.props.data;
+    if (objectIsEmpty(params)) {
+      return null;
+    }
+
+    // NB: Always render params, regardless of whether they appear in the
+    // formatted string due to structured logging frameworks, like Serilog. They
+    // only format some parameters into the formatted string, but we want to
+    // display all of them.
+
+    if (Array.isArray(params)) {
+      params = params.map((value, i) => [`#${i}`, value]);
+    }
+
+    return <KeyValueList data={params} isSorted={false} isContextData />;
+  }
+
   render() {
     let {data, group, event} = this.props;
 
     return (
       <EventDataSection group={group} event={event} type="message" title={t('Message')}>
         <pre className="plain">
-          <Annotated object={data} prop="formatted">
-            {formatted =>
-              typeof formatted !== 'undefined' ? (
-                formatted
-              ) : (
-                <Annotated object={data} prop="message" />
-              )}
-          </Annotated>
+          <Annotated object={data} prop="formatted" />
         </pre>
-
-        {data.params &&
-          !data.formatted && (
-            <div>
-              <h5>{t('Params')}</h5>
-              <pre className="plain">{JSON.stringify(data.params, null, 2)}</pre>
-            </div>
-          )}
+        {this.renderParams()}
       </EventDataSection>
     );
   }