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

emqx · Mar 30, 2024 · c5bb6ee · c5bb6ee
1 parent 9fc879b
commit c5bb6ee
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/utils/mqttErrorReason.ts b/src/utils/mqttErrorReason.ts
@@ -6,7 +6,6 @@ const MqttErrorReason: Record<string, { [code: number]: string }> = {
     128: 'Not authorized',
   },
   '5.0': {
-    0: 'Normal disconnection',
     4: 'Disconnect with Will Message',
     16: 'No matching subscribers',
     17: 'No subscription existed',

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -1104,7 +1104,7 @@ 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 = getErrorReason('5.0', reasonCode)
+    const reason = reasonCode === 0 ? 'Normal disconnection' : getErrorReason('5.0', reasonCode)
     this.notifyMsgWithCopilot(
       this.$t('connections.onDisconnect', [reason, reasonCode]) as string,
       JSON.stringify(packet),

diff --git a/web/src/lang/connections.ts b/web/src/lang/connections.ts
@@ -425,8 +425,8 @@ export default {
     ja: '保持メッセージの取り扱い',
   },
   onDisconnect: {
-    zh: '服务器已主动断开连接',
-    en: 'The Broker has actively disconnected',
-    ja: 'サーバーから積極的に接続が切断されました',
+    zh: '服务器已主动断开连接, Reason: {0} (Code: {1})',
+    en: 'The Broker has actively disconnected, Reason: {0} (Code: {1})',
+    ja: 'サーバーから積極的に接続が切断されました, Reason: {0} (Code: {1})',
   },
 }
diff --git a/web/src/views/connections/ConnectionsDetail.vue b/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,