Improve frontend error messages

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

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 })
 }