From 6dfa21d4f905b17c10ae78f7ad14b232c6917c89 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Sat, 29 Jun 2024 14:25:50 +0200
Subject: [PATCH] Improve frontend error messages

---
 CHANGELOG.md |  6 ++++++
 src/utils.js | 20 +++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 86fbcc4..d6aa1f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [unreleased] - 2024-06-29
+
+### Changed
+
+ - Further improve error messages in browser popup
+
 ## [2.1.1] - 2024-04-21
 
 ### Changed
diff --git a/src/utils.js b/src/utils.js
index f1a77a3..a069bf8 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -41,22 +41,32 @@ function getDetails(error) {
 	try {
 		const html = error.response?.request?.responseText
 		if (!html) {
-			return ''
+			throw Error('Not an HTML response')
 		}
 
 		const parser = new DOMParser()
 		const htmlDoc = parser.parseFromString(html, 'text/html')
-		const details = t('google_synchronization', 'Details')
-		return `<details><summary>${details}</summary>${htmlDoc.querySelector('main').innerHTML}</details>`
+		return htmlDoc.querySelector('main').innerHTML
 	} catch (e) {
-		return ''
+		const json = JSON.stringify(error, Object.getOwnPropertyNames(error), 2)
+		return `<pre><code>${json}</code></pre>`
 	}
 }
 
 export function showServerError(error, message) {
+	// In the worst case, I can instruct people to dig through the browser console
+	// in GitHub issues.
+	console.error(error)
+
+	const summary = t('google_synchronization', 'Details')
+	const details = getDetails(error)
+
 	showError(`
 		<div style="padding: 10px;">
 			<h2>${message}: ${error.message}</h2>
-			${getDetails(error)}
+			<details>
+				<summary>${summary}</summary>
+				${details}
+			</details>
 		</div>`, { isHTML: true })
 }