feat(msg-left-item):support json error display

emqx · Aug 1, 2023 · 14afc32 · 14afc32
1 parent edc294c
commit 14afc32
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 27 deletions.
diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="msg-left-item">
-    <div v-if="functionName || schemaName">
+    <div v-if="functionName || schemaName" class="msg-tag">
       <el-tag size="mini">
         <span>&nbsp;{{ $t('connections.usedScript') }}</span>
 
@@ -15,12 +15,32 @@
         ></el-tag
       >
     </div>
+    <div v-if="msgError" class="msg-tag">
+      <el-tag size="mini">
+        <b style="color: #f56c6c">{{ msgError }}</b>
+      </el-tag>
+    </div>
+    <span
+      v-if="!functionName && !schemaName && !msgError"
+      class="topic-color"
+      :style="{
+        background: color,
+        height: 'calc(100% - 44px)',
+        top: '11px',
+      }"
+    >
+    </span>
     <span
+      v-else
       class="topic-color"
       :style="{
         background: color,
-        height: functionName || schemaName ? 'calc(100% - 62px)' : 'calc(100% - 44px)',
-        top: functionName || schemaName ? '32px' : '11px',
+        height:
+          ((functionName || schemaName) && !msgError) || (msgError && !schemaName && !functionName)
+            ? 'calc(100% - 62px)'
+            : 'calc(100% - 84px)',
+        top:
+          ((functionName || schemaName) && !msgError) || (msgError && !schemaName && !functionName) ? '32px' : '55px',
       }"
     ></span>
     <div ref="leftPayload" class="left-payload payload" @contextmenu.prevent="customMenu($event)">
@@ -98,6 +118,10 @@ export default class MsgLeftItem extends Vue {
     return this.meta ? JSON.parse(this.meta).msgType : null
   }
 
+  get msgError() {
+    return this.meta ? JSON.parse(this.meta).msgError : null
+  }
+
   private mounted() {
     try {
       if (this.payload && this.msgType === 'JSON') {
@@ -125,6 +149,9 @@ export default class MsgLeftItem extends Vue {
     background: var(--color-bg-tags);
     border-color: var(--color-border-right_metainfo);
   }
+  .msg-tag:nth-child(2) {
+    margin-top: 2px;
+  }
   .topic-color {
     height: calc(100% - 62px);
     display: inline-block;

diff --git a/src/utils/validFormatJson.ts b/src/utils/validFormatJson.ts
@@ -1,18 +1,11 @@
-import { TranslateResult } from 'vue-i18n'
-
-export default (jsonStrValue: string, warnMessage?: TranslateResult) => {
+export default (jsonStrValue: string) => {
   try {
     const jsonValue = JSON.parse(jsonStrValue)
     if (jsonValue) {
       return JSON.stringify(jsonValue, null, 2)
     }
     return undefined
   } catch (error) {
-    const err = error as Error
-    let errorMessage = err.toString()
-    if (warnMessage) {
-      errorMessage = `${warnMessage} ${errorMessage}`
-    }
-    throw errorMessage
+    throw error
   }
 }
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -536,12 +536,18 @@ export default class ConnectionsDetail extends Vue {
     }
   }
 
-  private updateReceivedMsgType(message: MessageModel, msgType: PayloadType) {
+  private updateMetaMsgType(message: MessageModel, msgType: PayloadType) {
     const metaObj = JSON.parse(message.meta || '{}')
     metaObj['msgType'] = msgType
     message.meta = JSON.stringify(metaObj)
   }
 
+  private updateMetaError(message: MessageModel, error: string) {
+    const metaObj = JSON.parse(message.meta || '{}')
+    metaObj['msgError'] = error
+    message.meta = JSON.stringify(metaObj)
+  }
+
   // Connect
   public async connect(): Promise<boolean | void> {
     this.isReconnect = false
@@ -642,13 +648,16 @@ export default class ConnectionsDetail extends Vue {
     const filterBarOffsetHeight = filterBar.offsetHeight
 
     this.messageListMarginTop = filterBarOffsetHeight > 56 ? filterBarOffsetHeight - 37 : 19
-
-    this.messageListHeight =
-      document.body.offsetHeight -
-      connectionTopbar.offsetHeight -
-      connectionFooter.offsetHeight -
-      filterBarOffsetHeight -
-      8
+    try {
+      this.messageListHeight =
+        document.body.offsetHeight -
+        connectionTopbar.offsetHeight -
+        connectionFooter.offsetHeight -
+        filterBarOffsetHeight -
+        8
+    } catch (error) {
+      // ignore(error)
+    }
   }
 
   // Show context menu
@@ -1112,6 +1121,7 @@ export default class ConnectionsDetail extends Vue {
   private processMessage(topic: string, payload: Buffer, packet: IPublishPacket) {
     const { qos, retain, properties } = packet
     let receviedPayload
+    let jsonMsgError = ''
     if (
       (this.scriptOption?.function && ['all', 'received'].includes(this.scriptOption.apply)) ||
       this.receivedMsgType !== 'Plaintext'
@@ -1120,9 +1130,14 @@ export default class ConnectionsDetail extends Vue {
       if (!schemaPayload) {
         return
       }
-      const convertPayload = this.convertPayloadByType(schemaPayload, this.receivedMsgType, 'received')
+      let convertPayload
+      try {
+        convertPayload = this.convertPayloadByType(schemaPayload, this.receivedMsgType, 'received')
+      } catch (e) {
+        jsonMsgError = (e as Error).toString()
+      }
       if (!convertPayload) {
-        return
+        convertPayload = schemaPayload
       }
       receviedPayload = this.convertPayloadByFunction(convertPayload.toString(), 'received')
       if (this.scriptOption?.schema && this.receivedMsgType === 'Plaintext') {
@@ -1146,7 +1161,10 @@ export default class ConnectionsDetail extends Vue {
     }
     this.updateMeta(receivedMessage, 'function', 'received')
     this.updateMeta(receivedMessage, 'schema', 'received')
-    this.updateReceivedMsgType(receivedMessage, this.receivedMsgType)
+    this.updateMetaMsgType(receivedMessage, this.receivedMsgType)
+    if (this.receivedMsgType === 'JSON' && jsonMsgError) {
+      this.updateMetaError(receivedMessage, jsonMsgError)
+    }
 
     return receivedMessage
   }
@@ -1443,6 +1461,7 @@ export default class ConnectionsDetail extends Vue {
         }
         this.updateMeta(publishMessage, 'function', 'publish')
         this.updateMeta(publishMessage, 'schema', 'publish')
+
         if (this.record.id) {
           // Save message
           const { messageService } = useServices()
@@ -1494,9 +1513,12 @@ export default class ConnectionsDetail extends Vue {
       }
       if (publishType === 'JSON') {
         try {
-          validFormatJson(publishValue.toString(), this.$t('connections.publishMsg'))
+          validFormatJson(publishValue.toString())
         } catch (error) {
-          this.$message.error((error as Error).toString())
+          const err = error as Error
+          let errorMessage = `${this.$t('connections.publishMsg')} ${err.toString()}`
+          this.$message.error(errorMessage)
+          return undefined
         }
       }
       return publishValue
@@ -1511,9 +1533,9 @@ export default class ConnectionsDetail extends Vue {
       if (receiveType === 'JSON') {
         let jsonValue: string | undefined
         try {
-          jsonValue = validFormatJson(receiveValue.toString(), this.$t('connections.receivedMsg'))
+          jsonValue = validFormatJson(receiveValue.toString())
         } catch (error) {
-          this.$message.error((error as Error).toString())
+          throw error
         }
         if (jsonValue) {
           return jsonValue