diff --git a/src/sentry/static/sentry/app/components/events/interfaces/message.jsx b/src/sentry/static/sentry/app/components/events/interfaces/message.jsx index 5eff91461b7c91..a93c7f9da315d6 100644 --- a/src/sentry/static/sentry/app/components/events/interfaces/message.jsx +++ b/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 ; + } + render() { let {data, group, event} = this.props; return (
-          
-            {formatted =>
-              typeof formatted !== 'undefined' ? (
-                formatted
-              ) : (
-                
-              )}
-          
+          
         
- - {data.params && - !data.formatted && ( -
-
{t('Params')}
-
{JSON.stringify(data.params, null, 2)}
-
- )} + {this.renderParams()}
); }