# MQTT Explorer v0.2.0 - MQTT swiss-army-knife

**URL:** <https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308>\
**Category:** General\
**Created:** [27 January 2019 13:30 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308 "2019-01-27T13:30:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [27 January 2019 13:30 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/1 "2019-01-27T13:30:14Z")

</div>

I'm a huge fan of Node-Red. I use it a lot for Home-Automation and use MQTT to integrate other services like zigbee2mqtt, but also to decouple the UI from device integrations.

Maintaining a nice topic hierarchy is a key requirement to maintain control over your project.

Last few weeks I conjured up a nice tool to du just that:  
See what is going on, delete old retained topics, refactor the topic hierarchy.

A little bit displeased how traditional tools like MQTT.fx or MQTTLens work, I conjured up a little tool to help with the effort. The main goal was to visualize the topic hierarchy and make it navigatable.

> **[MQTT Explorer](https://mqtt-explorer.com)**
>
> An all-round MQTT client that provides a structured topic overview

  
 ![ui-test%20(3)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/ce455c4867a616b51611dcdad64be683e50ea30f.gif)

I hope you enjoy and you'll forgive my off-topicness 😉

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 January 2019 16:48 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/2 "2019-01-27T16:48:24Z")

</div>

Interesting. I'll give it a go when I get time. Though it will need to be very interesting to displace my usual MQTT tool - MQTTspy.

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [27 January 2019 16:49 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/3 "2019-01-27T16:49:51Z")

</div>

Excellent!

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [27 January 2019 16:56 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/4 "2019-01-27T16:56:40Z")

</div>

I love the history graph, well done @thomasnordquist.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [27 January 2019 17:16 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/5 "2019-01-27T17:16:20Z")

</div>

Nicely done!

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [27 January 2019 17:44 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/6 "2019-01-27T17:44:12Z")

</div>

MQTTspy has its own perks and purposes, MQTT-Explorer will most certainly not try to mimic the feature set of this or other tools.

MQTT-Explorer is mainly intended for visualization, maintenance, topic refactorings, device/service integration and debugging purposes.  
There are still features missing, but the app is growing and new features are coming regulary 😉

Also: Feature request and bug reports are always welcome

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 January 2019 17:54 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/7 "2019-01-27T17:54:30Z")

</div>

What does the electron-telemetry library do ?

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [27 January 2019 19:07 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/8 "2019-01-27T19:07:11Z")

</div>

Since this is a sensitive topic I'll explain it in great detail:

It helps me to keep track of software quality and "acceptance".  
This App is for Windows, Linux and Mac users. As I learned quite early: if something works for one person it most certainly fails for others.

**electron-telemetry** is a small project that records errors, events, the used architecture and operating system, how much memory the app uses (so I can detect memory leaks). The information recorded is limited to technical data (for instance not even the IP is logged).  
It's source can be found here: [https://github.com/thomasnordquist/electron-telemetry](https://github.com/thomasnordquist/electron-telemetry)

**Firebase** is "the standard" for mobile apps, for electron apps there is not really a good free product on the market to ensure that your users are crash free. I used "nucleus" before but since version 0.1.1 I decided to do the reporting myself.

This is the processed view of the data using Metabase:

 ![50](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/36d3e804c8a93dc7fbbbeb8b91e9a0a21924ff30.png)

This is a snapshot from the server logs

```auto
{ system: { arch: 'x64', platform: 'darwin' },
  appVersion: '0.0.7',
  events: { HELLO_EVENT: [1547714886134] },
  now: 1547714886135,
  transactionId: '1767d251-f492-4f2c-aa62-88add3acc26b' }
{ errors:
   [ { time: 1547714887921,
       message: 'He\'s dead Jim!',
       stack:
        'Error: He\'s dead Jim!\n at ./src/tracking.ts.exports.default (./mqtt-explorer/app/build/bundle.js:142765:11)\n at new Promise (<anonymous>)\n at Object../src/tracking.ts (./mqtt-explorer/app/build/bundle.js:142764:1)\n at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n at Object../src/index.tsx (./mqtt-explorer/app/build/bundle.js:142618:1)\n at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n at ../backend/node_modules/charenc/charenc.js.charenc.utf8.stringToBytes (./mqtt-explorer/app/build/bundle.js:84:18)\n at ./mqtt-explorer/app/build/bundle.js:87:10' } ],
  now: 1547714887921,
  transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }

```

The transactionId is a "Universal Unique Identifier", the transactionId is used do avoid duplicate entries. A event like `HELLO_EVENT` or `CONNECTION_SET_CONNECTED` ONLY contains a timestamp, and no other data, so I know the order of events.

**So now I can see:**"Oh, there have been two crashes the last day".  
Then I can click on the log entry below and see something like: _CONNECTION\_SET\_CONNECTED, CONNECTION\_FAILED, SHOW\_ERROR, CONNECTION\_SET\_DISCONNECTED_ and a stacktrace (of bundled JavaScript, which is still kind of hard to understand).  
This then allows me to instantly fix the error if I figured out what is going on: [https://github.com/thomasnordquist/MQTT-Explorer/commit/e0d7f45ab88a23650e7f4b40950f488886299289](https://github.com/thomasnordquist/MQTT-Explorer/commit/e0d7f45ab88a23650e7f4b40950f488886299289)

This is the beauty of open source. I could always simply tell you "I do not store personal data".  
**BUT** It's all open for everyone to see 😉

**P.S.:** It also motivates if I see that someone uses my software 😋

---

<div class="post-metadata">

**Author:** ![bapowell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bapowell/32/50_2.png) [@bapowell](https://discourse.nodered.org/u/bapowell)\
**Post date:** [27 January 2019 21:31 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/9 "2019-01-27T21:31:26Z")

</div>

Looks very useful. Also appreciate the detailed explanation about the support data you're collecting (electron-telemetry).

I have been wanting to create a nearly identical tool, but using Node-RED itself and likely Julian's uibuilder for the UI (particularly to achieve the topic hierarchy view). But I have simply been too busy with other work to get around to it.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 January 2019 22:38 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/10 "2019-01-27T22:38:42Z")

</div>

> [@bapowell](#):
>
> I have been wanting to create a nearly identical tool, but using Node-RED itself and likely Julian's uibuilder for the UI (particularly to achieve the topic hierarchy view). But I have simply been too busy with other work to get around to it.

😄

I've thought about this myself as well. Now that VueJS has reached a reasonable level of maturity, it is now my favourite front-end library for this kind of thing. You can even use built components with Vue and uibuilder now so that you can build a proper VueJS app with uibuilder providing the links to and from Node-RED. See the [WIKI for using webpack and Vue with uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Using-VueJS-with-Webpack).

You will soon (time permitting) be able to edit your front-end files (index.html|js|css, etc) from within the Node-RED admin ui as well making life even easier. I also intend to build in the ability to run a build step from within Node-RED. Check out the [design nodes in Issue 43](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/43).

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [27 January 2019 22:49 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/11 "2019-01-27T22:49:10Z")

</div>

Very useful tool 🙂  
Its let me quickly visualise some dead topics on my own broker

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d4ef8294e69f176865fdf469d49e147a121f129e.png)

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [19 February 2019 16:19 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/12 "2019-02-19T16:19:36Z")

</div>

MQTT Explorer becomes mature.  
Version 0.2.0 brings many new features:

- Recursive deletion of retained topics. (Deletes a topic and all sub-topics with a click)
- Can store different connection profiles
- Allows custom subscriptions (not just the "#" wildcard root subscription)
- Configurations persist across app starts
- Setting to disable the activity indicator (blinky topics)

There also have been some bugfixes and the binary size has been reduced by ~60%.

And there is now also a small demo video (3.5MB)

> **[MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/#demo)**
>
> Tool to visualize your MQTT topics, a MQTT swiss-army knife

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2019 16:35 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/13 "2019-02-19T16:35:44Z")

</div>

> [@thomasnordquist](#):
>
> Recursive deletion of retained topics. (Deletes a topic and all sub-topics with a click)

Can you do a wildcard delete? That would be useful. It is a pain, as you know, to remove a whole bunch of retained topics.

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [19 February 2019 16:37 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/14 "2019-02-19T16:37:57Z")

</div>

Well done again @thomasnordquist, excellent tool!

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [19 February 2019 18:07 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/15 "2019-02-19T18:07:15Z")

</div>

That is basically what it does.  
Selecting a topic ("sensors" for instance) and deleting its child topics would be like deleting "sensors/#"

You can also first filter the topics with the search function and then delete all topics in the filtered tree.  
This becomes even more useful once I added some more filter options. (regex, match topic only, match only messages etc.)

The recursive delete feature is however limited to delete 50 topics per click, which should be enough for most use-cases. I added the limit so one can not simply "nuke" a complete broker by accident. I might remove the limit if people complain.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2019 20:15 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/16 "2019-02-19T20:15:31Z")

</div>

> [@thomasnordquist](#):
>
> Selecting a topic ("sensors" for instance) and deleting its child topics would be like deleting "sensors/#"

Neat, thanks. I'll download the new version.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [22 February 2019 05:15 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/17 "2019-02-22T05:15:12Z")

</div>

Nice project, thanks. My devices only seem to show some unreadable data ? Is this an encoding issue ?

 ![19](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b9498d4f7aeab8965f31874a4c234a8a6bc7594d.jpeg)

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [22 February 2019 10:08 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/18 "2019-02-22T10:08:25Z")

</div>

Thanks for reporting @bakman2.  
Which language is your Operating System?  
What should the values read?  
Are the values readable in any other MQTT client?  
How did you install the app ? (.exe, .dmg, snap, AppImage)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [22 February 2019 10:24 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/19 "2019-02-22T10:24:59Z")

</div>

- MacOS
- Values should be readable strings, I am using NR and can read them there.
- DMG

---

<div class="post-metadata">

**Author:** ![thomasnordquist](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thomasnordquist/32/5446_2.png) [@thomasnordquist](https://discourse.nodered.org/u/thomasnordquist)\
**Post date:** [22 February 2019 11:49 UTC](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308/20 "2019-02-22T11:49:34Z")

</div>

Do you have some information for me what piece of software is publishing these topics.  
It might help me to narrow the issue down, which format the data is encoded.

What do you mean with "NR"?

It is a little bit puzzeling to me that no characters seem to de decoded well. The data should be decoded as utf8 by default, utf8 is "kind-of" backward compatible to most popular string encodings. At least to some degree.

[Next page](https://discourse.nodered.org/t/mqtt-explorer-v0-2-0-mqtt-swiss-army-knife/7308.md?page=2)