Skip to content

Commit 6c4f8dc

Browse files
kaandesukaandesu
authored
Merge pull request #91 from kaandesu/fix/uncaught-promise
fix: caught failure on connection lost callback
2 parents a5a5f59 + 2892c11 commit 6c4f8dc

File tree

4 files changed

+98
-29
lines changed

4 files changed

+98
-29
lines changed

‎.changeset/hungry-jars-double.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'vue-paho-mqtt': patch
3+
---
4+
5+
fixed caught failure on connection lost callback

‎src/App.vue

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,26 @@
33
<div class="wrapper">
44
<section class="mqtt-fields">
55
<div class="field-view">
6-
<div data-step="1" data-intro="Step 1: Connect or disconnect to the MQTT broker! 🔗 ">
7-
<button class="mqtt-button connect" @click="$mqtt.connect()">
6+
<div
7+
data-step="1"
8+
data-intro="Step 1: Connect or disconnect to the MQTT broker! 🔗 "
9+
>
10+
<button class="mqtt-button connect" @click="handleClick()">
811
CONNECT
912
</button>
1013
<button class="mqtt-button disconnect" @click="$mqtt.disconnect()">
1114
DISCONNECT
1215
</button>
13-
<span>MQTT status: <label> {{ $mqtt.status() }} </label></span>
16+
<span
17+
>MQTT status: <label> {{ $mqtt.status() }} </label></span
18+
>
1419
</div>
1520
<div class="hr" />
16-
<div class="settings" data-step="2"
17-
data-intro="Step 2: Configure & update the client settings! <i>(changes will apply on reconnect)</i> ⚙️">
21+
<div
22+
class="settings"
23+
data-step="2"
24+
data-intro="Step 2: Configure & update the client settings! <i>(changes will apply on reconnect)</i> ⚙️"
25+
>
1826
<span class="field-row">
1927
<span>Host:</span>
2028
<input placeholder="enter mqtt host" v-model="host" />
@@ -30,7 +38,11 @@
3038
<span class="field-row">
3139
<span>Use SSL:</span>
3240
<select class="optionField" v-model="useSSL">
33-
<option :key="index" v-for="(option, index) in sslOptions" :value="option">
41+
<option
42+
:key="index"
43+
v-for="(option, index) in sslOptions"
44+
:value="option"
45+
>
3446
{{ option }}
3547
</option>
3648
</select>
@@ -41,7 +53,11 @@
4153
</span>
4254
<span class="field-row">
4355
<span>Password:</span>
44-
<input placeholder="enter mqtt password" v-model="password" type="password"/>
56+
<input
57+
placeholder="enter mqtt password"
58+
v-model="password"
59+
type="password"
60+
/>
4561
</span>
4662
<span class="field-row">
4763
<span>Main Topic:</span>
@@ -56,14 +72,19 @@
5672
</button>
5773
</div>
5874
<div class="hr" />
59-
<div class="settings" data-step="4"
60-
data-intro="Step 4: Enter the topic, payload,and select the QoS mode and click publish! 📦">
61-
<div style="
75+
<div
76+
class="settings"
77+
data-step="4"
78+
data-intro="Step 4: Enter the topic, payload,and select the QoS mode and click publish! 📦"
79+
>
80+
<div
81+
style="
6282
font-weight: bold;
6383
font-size: 20px;
6484
margin-bottom: -15px;
6585
margin-top: -15px;
66-
">
86+
"
87+
>
6788
Publish Data
6889
</div>
6990
<span>
@@ -73,39 +94,66 @@
7394
<span class="field-row">
7495
<span>Publish Mode: </span>
7596
<select style="margin: -15px 0" v-model="pubMode">
76-
<option v-bind:key="option.value" v-for="option in options" v-bind:value="option.value">
97+
<option
98+
v-bind:key="option.value"
99+
v-for="option in options"
100+
v-bind:value="option.value"
101+
>
77102
{{ option.text }}
78103
</option>
79104
</select>
80105
</span>
81-
<button class="pub" @click="$mqtt.publish(pubTopic, pubData, pubMode as MqttMode)">
106+
<button
107+
class="pub"
108+
@click="$mqtt.publish(pubTopic, pubData, pubMode as MqttMode)"
109+
>
82110
Publish
83111
</button>
84112
</div>
85113
<div class="hr" />
86114
<button class="unsub" @click="unsubAll()">Unsubscribe All</button>
87115
<div class="hr" />
88116
<span class="field-row">
89-
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" height="25" alt="github" />
90-
<a href="https://github.com/kaandesu/vue-paho-mqtt/" target="_blank" rel="noopener noreferrer"
91-
style="font-size: 15px; font-weight: bold"><i>kaandesu/vue-paho-mqtt</i></a>
117+
<img
118+
src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
119+
height="25"
120+
alt="github"
121+
/>
122+
<a
123+
href="https://github.com/kaandesu/vue-paho-mqtt/"
124+
target="_blank"
125+
rel="noopener noreferrer"
126+
style="font-size: 15px; font-weight: bold"
127+
><i>kaandesu/vue-paho-mqtt</i></a
128+
>
92129
<button class="help" @click="startIntro()">?</button>
93130
</span>
94131
</div>
95132
</section>
96-
<section class="subview" data-step="3"
97-
data-intro="Step 3: Enter a topic you want to subscribe to, and click subscribe! You can subscribe multiple topics at once! <i>On the bottom of the card you can see the data arrived!</i> 👀">
133+
<section
134+
class="subview"
135+
data-step="3"
136+
data-intro="Step 3: Enter a topic you want to subscribe to, and click subscribe! You can subscribe multiple topics at once! <i>On the bottom of the card you can see the data arrived!</i> 👀"
137+
>
98138
<div v-for="(card, index) in subList" :key="index" class="sub-card">
99139
<input placeholder="enter topic name" v-model="card.topic" />
100140
<div class="button-section">
101141
<div class="row">
102-
<button :disabled="card.topic == ''" @click="subscribe(card.topic, index)" class="btn">
142+
<button
143+
:disabled="card.topic == ''"
144+
@click="subscribe(card.topic, index)"
145+
class="btn"
146+
>
103147
Subscribe
104148
</button>
105-
<button :disabled="card.topic == ''" @click="
106-
$mqtt.unsubscribe(card.topic);
107-
card.subData = '---';
108-
" class="btn">
149+
<button
150+
:disabled="card.topic == ''"
151+
@click="
152+
$mqtt.unsubscribe(card.topic);
153+
card.subData = '---';
154+
"
155+
class="btn"
156+
>
109157
Unsubscribe
110158
</button>
111159
</div>
@@ -115,8 +163,12 @@
115163
</section>
116164
</div>
117165
<div class="title">
118-
<img :class="$mqtt.status() === 'connected' ? '' : 'img-red'" src="/assets/logo.png" height="100"
119-
alt="Vue-Paho-Mqtt-Logo" />
166+
<img
167+
:class="$mqtt.status() === 'connected' ? '' : 'img-red'"
168+
src="/assets/logo.png"
169+
height="100"
170+
alt="Vue-Paho-Mqtt-Logo"
171+
/>
120172
<h3>Vue Paho Mqtt Plugin - Live Demo</h3>
121173
</div>
122174
</main>
@@ -164,6 +216,14 @@ const subscribe = (topic: string, index: number) => {
164216
});
165217
};
166218
219+
const handleClick = async () => {
220+
try {
221+
await $mqtt.connect();
222+
} catch (e) {
223+
console.error('test error:', e);
224+
}
225+
};
226+
167227
const updateAll = () => {
168228
$mqtt.host(host.value);
169229
$mqtt.port(parseInt(port.value));
@@ -316,7 +376,7 @@ onMounted(() => {
316376
/* Firefox */
317377
}
318378
319-
span>label {
379+
span > label {
320380
font-size: 17px;
321381
font-weight: bold;
322382
}

‎src/pahoMqttPlugin/functions/onConnectionLost.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,12 @@ export const onConnectionLostCallback = (responseObject: {
4242
console.warn('%cmqtt connection lost', 'color:red;');
4343
setTimeout(async () => {
4444
if (!client || !client.isConnected()) {
45-
await connectClient();
46-
console.timeEnd('reconnecting...');
45+
try {
46+
console.log('reconnecting...');
47+
await connectClient();
48+
} catch (error: any) {
49+
console.error(error);
50+
}
4751
}
4852
}, getMqttOptions().reconnectTimeout);
4953
}

‎src/pahoMqttPlugin/utils/connectClient.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const connectClient = ({
8787
if (onConnect) onConnect();
8888
},
8989
onFailure: async () => {
90-
reject();
90+
reject('mqtt connection failed');
9191
await onFailureCallback();
9292
if (onFailure) onFailure();
9393
},

0 commit comments

Comments
 (0)