~emersion/public-inbox

Add error reporting on connect and main page v4 SUPERSEDED

bbworld1: 1
 Add error reporting on connect and main page

 4 files changed, 37 insertions(+), 12 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~emersion/public-inbox/patches/11766/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH v4] Add error reporting on connect and main page Export this patch

---

Okay, the unrelated changes should be gone. This should be the last one.
Please let be know if you have any feedback.

 components/app.js     | 22 ++++++++++++++++------
 components/connect.js |  1 +
 lib/client.js         | 11 +++++------
 style.css             | 15 +++++++++++++++
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/components/app.js b/components/app.js
index 52a35f0..95d6a58 100644
--- a/components/app.js
+++ b/components/app.js
@@ -80,6 +80,7 @@ export default class App extends Component {
		status: Status.DISCONNECTED,
		buffers: new Map(),
		activeBuffer: null,
		error: null
	};
	pendingHistory = Promise.resolve(null);
	endOfHistory = new Map();
@@ -333,6 +334,12 @@ export default class App extends Component {
			this.handleMessage(event.detail.message);
		});

		this.client.addEventListener("error", (event) => {
			this.setState({
				error: event.detail
			});
		});

		this.createBuffer(SERVER_BUFFER);
		this.switchBuffer(SERVER_BUFFER);
	}
@@ -436,7 +443,7 @@ export default class App extends Component {
				var after = receipt;
				var before = { time: msg.tags.time || irc.formatDate(new Date()) };
				this.fetchHistoryBetween(channel, after, before, CHATHISTORY_MAX_SIZE).catch((err) => {
					console.error("Failed to fetch history:", err);
					this.setState({ error: "Failed to fetch history:" + err });
					this.receipts.delete(channel);
					this.saveReceipts();
				});
@@ -580,20 +587,20 @@ export default class App extends Component {

		var cmd = commands[name];
		if (!cmd) {
			console.error("Unknwon command '" + name + "'");
			this.setState({ error: "Unknown command '" + name + "'" });
			return;
		}

		try {
			cmd(this, args);
		} catch (err) {
			console.error(err);
		} catch (error) {
			this.setState({ error });
		}
	}

	privmsg(target, text) {
		if (target == SERVER_BUFFER) {
			console.error("Cannot send message in server buffer");
			this.setState({ error: "Cannot send message in server buffer" });
			return;
		}

@@ -762,7 +769,7 @@ export default class App extends Component {
		if (this.state.status != Status.REGISTERED) {
			return html`
				<section id="connect">
					<${Connect} params=${this.state.connectParams} disabled=${this.state.status != Status.DISCONNECTED} onSubmit=${this.handleConnectSubmit}/>
					<${Connect} error=${this.state.error} params=${this.state.connectParams} disabled=${this.state.status != Status.DISCONNECTED} onSubmit=${this.handleConnectSubmit}/>
				</section>
			`;
		}
@@ -808,6 +815,9 @@ export default class App extends Component {
			</>
			${memberList}
			<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit} autocomplete=${this.autocomplete}/>
			${this.state.error ? html`
				<p id="error-msg">${this.state.error} <a href="#" onClick=${this.dismissError}>&times;</a></p>
			`: ""}
		`;
	}
}
diff --git a/components/connect.js b/components/connect.js
index 97589e0..e990417 100644
--- a/components/connect.js
+++ b/components/connect.js
@@ -140,6 +140,7 @@ export default class Connect extends Component {
				</details>

				<br/>
				<p style=${{color: "red"}}>${this.props.error || ""}</p>

				<button disabled=${this.props.disabled}>Connect</button>
			</form>
diff --git a/lib/client.js b/lib/client.js
index 01fd67b..8d511f6 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -36,11 +36,10 @@ export default class Client extends EventTarget {
		try {
			this.ws = new WebSocket(params.url);
		} catch (err) {
			console.error("Failed to create connection:", err);
			this.dispatchEvent(new CustomEvent("error", { detail: "Failed to create connection: " + err }));
			setTimeout(() => this.dispatchEvent(new CustomEvent("close")), 0);
			return;
		}

		this.ws.addEventListener("open", this.handleOpen.bind(this));
		this.ws.addEventListener("message", this.handleMessage.bind(this));

@@ -50,7 +49,7 @@ export default class Client extends EventTarget {
		});

		this.ws.addEventListener("error", () => {
			console.error("Connection error");
			this.dispatchEvent(new CustomEvent("error", { detail: "Connection error: could not open WebSocket connection" }));
		});
	}

@@ -95,7 +94,7 @@ export default class Client extends EventTarget {
			this.registered = true;
			break;
		case irc.ERR_PASSWDMISMATCH:
			console.error("Password mismatch");
			this.dispatchEvent(new CustomEvent("error", { detail: "Password mismatch" }));
			this.close();
			break;
		case "CAP":
@@ -121,7 +120,7 @@ export default class Client extends EventTarget {
		case irc.ERR_SASLTOOLONG:
		case irc.ERR_SASLABORTED:
		case irc.ERR_SASLALREADY:
			console.error("SASL error:", msg);
			this.dispatchEvent(new CustomEvent("error", { detail: "SASL error: " + msg }));
			this.close();
			break;
		case "PING":
@@ -258,7 +257,7 @@ export default class Client extends EventTarget {

		// For now only PLAIN is supported
		if (challengeStr != "+") {
			console.error("Expected an empty challenge, got:", challengeStr);
			this.dispatchEvent(new CustomEvent("error", { detail: "Expected an empty challenge, got: " + challengeStr }));
			this.send({ command: "AUTHENTICATE", params: ["*"] });
			return;
		}
diff --git a/style.css b/style.css
index 3d1166f..e184687 100644
--- a/style.css
+++ b/style.css
@@ -234,3 +234,18 @@ details summary {
#buffer .nick-16 {
	color: #ec273e;
}

#error-msg {
	color: white;
	background-color: red;
	position: fixed;
	bottom: 2rem;
	right: 0;
	padding: 0.5rem;
	margin: 0.5rem;
}

#error-msg a {
	color: white;
	text-decoration: none;
}
-- 
2.27.0