feat(desktop): display the reason and code for the disconnection

cli/src/lib/conn.ts

@@ -49,8 +49,8 @@ const conn = (options: ConnectOptions) => {
     basicLog.close()
   })
 
-  client.on('disconnect', () => {
-    basicLog.disconnect()
+  client.on('disconnect', (packet: IDisconnectPacket) => {
+    basicLog.disconnect(packet)
   })
 }
 
@@ -78,7 +78,7 @@ const benchConn = async (options: BenchConnectOptions) => {
   const start = Date.now()
 
   for (let i = 1; i <= count; i++) {
-    ;((i: number, connOpts: mqtt.IClientOptions) => {
+    ; ((i: number, connOpts: mqtt.IClientOptions) => {
       const opts = { ...connOpts }
 
       opts.clientId = clientId.includes('%i') ? clientId.replaceAll('%i', i.toString()) : `${clientId}_${i}`
@@ -124,8 +124,8 @@ const benchConn = async (options: BenchConnectOptions) => {
         benchLog.close(connectedCount, count, opts.clientId!)
       })
 
-      client.on('disconnect', () => {
-        basicLog.disconnect(opts.clientId!)
+      client.on('disconnect', (packet: IDisconnectPacket) => {
+        basicLog.disconnect(packet, opts.clientId!)
       })
     })(i, connOpts)
 

cli/src/lib/pub.ts

@@ -142,8 +142,8 @@ const multisend = (
     reconnectPeriod ? sender.cork() : process.exit(1)
   })
 
-  client.on('disconnect', () => {
-    basicLog.disconnect()
+  client.on('disconnect', (packet: IDisconnectPacket) => {
+    basicLog.disconnect(packet)
   })
 }
 
@@ -354,8 +354,8 @@ const multiPub = async (commandType: CommandType, options: BenchPublishOptions |
         benchLog.close(connectedCount, count, opts.clientId!)
       })
 
-      client.on('disconnect', () => {
-        basicLog.disconnect(opts.clientId!)
+      client.on('disconnect', (packet: IDisconnectPacket) => {
+        basicLog.disconnect(packet, opts.clientId!)
       })
     })(i, connOpts)
 

cli/src/lib/sub.ts

@@ -145,8 +145,8 @@ const sub = (options: SubscribeOptions) => {
     !outputModeClean && basicLog.close()
   })
 
-  client.on('disconnect', () => {
-    !outputModeClean && basicLog.disconnect()
+  client.on('disconnect', (packet: IDisconnectPacket) => {
+    !outputModeClean && basicLog.disconnect(packet)
   })
 }
 
@@ -286,8 +286,8 @@ const benchSub = async (options: BenchSubscribeOptions) => {
         benchLog.close(connectedCount, count, opts.clientId!)
       })
 
-      client.on('disconnect', () => {
-        basicLog.disconnect(opts.clientId!)
+      client.on('disconnect', (packet: IDisconnectPacket) => {
+        basicLog.disconnect(packet, opts.clientId!)
       })
     })(i, connOpts)
 

cli/src/types/global.d.ts

@@ -155,6 +155,15 @@ declare global {
   interface LsOptions {
     scenarios: boolean
   }
+
+  interface IDisconnectPacket {
+    cmd: 'disconnect',
+    qos: QoS
+    dup: boolean
+    retain: boolean
+    reasonCode: number,
+    length: number
+  }
 }
 
 export {}

cli/src/utils/mqttErrorReason.ts

@@ -0,0 +1,48 @@
+const mqttErrorReason: Record<number, string> = {
+  4: 'Disconnect with Will Message',
+  16: 'No matching subscribers',
+  17: 'No subscription existed',
+  24: 'Continue authentication',
+  25: 'Re-authenticate',
+  128: 'Unspecified error',
+  129: 'Malformed Packet',
+  130: 'Protocol Error',
+  131: 'Implementation specific error',
+  132: 'Unsupported Protocol Version',
+  133: 'Client Identifier not valid',
+  134: 'Bad User Name or Password',
+  135: 'Not authorized',
+  136: 'Server unavailable',
+  137: 'Server busy',
+  138: 'Banned',
+  139: 'Server shutting down',
+  140: 'Bad authentication method',
+  141: 'Keep Alive timeout',
+  142: 'Session taken over',
+  143: 'Topic Filter invalid',
+  144: 'Topic Name invalid',
+  145: 'Packet Identifier in use',
+  146: 'Packet Identifier not found',
+  147: 'Receive Maximum exceeded',
+  148: 'Topic Alias invalid',
+  149: 'Packet too large',
+  150: 'Message rate too high',
+  151: 'Quota exceeded',
+  152: 'Administrative action',
+  153: 'Payload format invalid',
+  154: 'Retain not supported',
+  155: 'QoS not supported',
+  156: 'Use another server',
+  157: 'Server moved',
+  158: 'Shared Subscriptions not supported',
+  159: 'Connection rate exceeded',
+  160: 'Maximum connect time',
+  161: 'Subscription Identifiers not supported',
+  162: 'Wildcard Subscriptions not supported',
+}
+
+const getErrorReason = (code: number) => {
+  return mqttErrorReason[code] ?? 'Unknown error'
+}
+
+export default getErrorReason

cli/src/utils/signale.ts

@@ -1,6 +1,7 @@
 import { Signale } from 'signale'
 import chalk from 'chalk'
 import { inspect } from 'util'
+import getErrorReason from './mqttErrorReason'
 
 const option = {
   config: {
@@ -30,8 +31,7 @@ const basicLog = {
       signale.await('Connecting...')
     } else {
       signale.await(
-        `Connecting using configuration file, host: ${host}, port: ${port}${topic ? `, topic: ${topic}` : ''}${
-          message ? `, message: ${message}` : ''
+        `Connecting using configuration file, host: ${host}, port: ${port}${topic ? `, topic: ${topic}` : ''}${message ? `, message: ${message}` : ''
         }`,
       )
     }
@@ -48,8 +48,11 @@ const basicLog = {
   close: () => signale.error('Connection closed'),
   reconnecting: () => signale.await('Reconnecting...'),
   reconnectTimesLimit: () => signale.error('Exceed the maximum reconnect times limit, stop retry'),
-  disconnect: (clientId?: string) =>
-    signale.warn(`${clientId ? `Client ID: ${clientId}, ` : ''}The Broker has actively disconnected`),
+  disconnect: (packet: IDisconnectPacket, clientId?: string) => {
+    const { reasonCode } = packet
+    const reason = reasonCode === 0 ? 'Normal disconnection' : getErrorReason(reasonCode)
+    signale.warn(`${clientId ? `Client ID: ${clientId}, ` : ''}The Broker has actively disconnected, Reason: ${reason} (Code: ${reasonCode})`)
+  }
 }
 
 const benchLog = {

src/lang/connections.ts

@@ -846,11 +846,11 @@ export default {
     hu: 'Üzenetmegőrzés kezelése',
   },
   onDisconnect: {
-    zh: '服务器已主动断开连接',
-    en: 'The Broker has actively disconnected',
-    tr: 'Sunucu aktif bir şekilde bağlantıyı kesmiştir',
-    ja: 'サーバーから積極的に接続が切断されました',
-    hu: 'A kiszolgáló aktívan bontotta a kapcsolatot',
+    zh: '服务器已主动断开连接, Reason: {reason} (Code: {reasonCode})',
+    en: 'The Broker has actively disconnected, Reason: {reason} (Code: {reasonCode})',
+    tr: 'Sunucu aktif bir şekilde bağlantıyı kesmiştir, Reason: {reason} (Code: {reasonCode})',
+    ja: 'サーバーから積極的に接続が切断されました, Reason: {reason} (Code: {reasonCode})',
+    hu: 'A kiszolgáló aktívan bontotta a kapcsolatot, Reason: {reason} (Code: {reasonCode})',
   },
   hideConnections: {
     zh: '隐藏连接列表',

src/views/connections/ConnectionsDetail.vue

@@ -230,7 +230,12 @@
       <div class="connections-body">
         <div ref="filterBar" class="filter-bar" :style="{ top: bodyTopValue, left: detailLeftValue }">
           <div class="message-type">
-            <el-select class="received-type-select" size="mini" v-model="receivedMsgType" @change="handleReceivedMsgTypeChange">
+            <el-select
+              class="received-type-select"
+              size="mini"
+              v-model="receivedMsgType"
+              @change="handleReceivedMsgTypeChange"
+            >
               <el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
                 <el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex', 'CBOR']" :key="type" :value="type">
                 </el-option>
@@ -343,6 +348,7 @@ import getContextmenuPosition from '@/utils/getContextmenuPosition'
 import { deserializeBufferToProtobuf, printObjectAsString, serializeProtobufToBuffer } from '@/utils/protobuf'
 import { jsonStringify } from '@/utils/jsonUtils'
 import { LeftValues, BodyTopValues, MsgTopValues, DetailLeftValues } from '@/utils/styles'
+import getErrorReason from '@/utils/mqttErrorReason'
 
 type CommandType =
   | 'searchContent'
@@ -1097,7 +1103,14 @@ export default class ConnectionsDetail extends Vue {
 
   // Emitted after receiving disconnect packet from broker. MQTT 5.0 feature.
   private onDisconnect(packet: IDisconnectPacket) {
-    this.notifyMsgWithCopilot(this.$tc('connections.onDisconnect'), JSON.stringify(packet), () => {}, 'warning')
+    const reasonCode = packet.reasonCode!
+    const reason = reasonCode === 0 ? 'Normal disconnection' : getErrorReason('5.0', reasonCode)
+    this.notifyMsgWithCopilot(
+      this.$t('connections.onDisconnect', { reason, reasonCode }) as string,
+      JSON.stringify(packet),
+      () => {},
+      'warning',
+    )
     const logMessage = 'Received disconnect packet from Broker. MQTT.js onDisconnect trigger'
     this.$log.warn(logMessage)
   }

web/src/lang/connections.ts

@@ -425,8 +425,8 @@ export default {
     ja: '保持メッセージの取り扱い',
   },
   onDisconnect: {
-    zh: '服务器已主动断开连接',
-    en: 'The Broker has actively disconnected',
-    ja: 'サーバーから積極的に接続が切断されました',
+    zh: '服务器已主动断开连接, Reason: {reason} (Code: {reasonCode})',
+    en: 'The Broker has actively disconnected, Reason: {reason} (Code: {reasonCode})',
+    ja: 'サーバーから積極的に接続が切断されました, Reason: {reason} (Code: {reasonCode})',
   },
 }

web/src/views/connections/ConnectionsDetail.vue

@@ -209,6 +209,7 @@ import { hasMessagePayloadID, hasMessageHeaderID } from '@/utils/historyRecordUt
 import historyMessageHeaderService from '@/utils/api/historyMessageHeaderService'
 import historyMessagePayloadService from '@/utils/api/historyMessagePayloadService'
 import { jsonParse, jsonStringify } from '@/utils/jsonUtils'
+import getErrorReason from '@/utils/mqttErrorReason'
 
 type MessageType = 'all' | 'received' | 'publish'
 type CommandType = 'searchByTopic' | 'clearHistory' | 'disconnect' | 'deleteConnect'
@@ -735,8 +736,10 @@ export default class ConnectionsDetail extends Vue {
 
   // Emitted after receiving disconnect packet from broker. MQTT 5.0 feature.
   private onDisconnect(packet: IDisconnectPacket) {
+    const reasonCode = packet.reasonCode!
+    const reason = reasonCode === 0 ? 'Normal disconnection' : getErrorReason('5.0', reasonCode)
     this.$notify({
-      title: this.$tc('connections.onDisconnect'),
+      title: this.$t('connections.onDisconnect', { reason, reasonCode }) as string,
       message: '',
       type: 'warning',
       duration: 3000,