From 21c4fbc5f174bf418a0239e6b090d6b1c52ae932 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Thu, 9 Apr 2026 10:47:55 -0400
Subject: [PATCH] fix: rejig AP errors UX

---
 .../en-GB/admin/settings/activitypub.json     |  2 +-
 public/src/admin/federation/errors.js         | 22 ++++++++
 src/controllers/admin/federation.js           |  4 +-
 src/views/admin/federation/errors.tpl         | 54 ++++++++++---------
 4 files changed, 54 insertions(+), 28 deletions(-)
 create mode 100644 public/src/admin/federation/errors.js

diff --git a/public/language/en-GB/admin/settings/activitypub.json b/public/language/en-GB/admin/settings/activitypub.json
index c86caee393..3cb41ede38 100644
--- a/public/language/en-GB/admin/settings/activitypub.json
+++ b/public/language/en-GB/admin/settings/activitypub.json
@@ -77,6 +77,6 @@
 	"analytics.hourly": "Hourly",
 	"analytics.daily": "Daily",
 
-	"errors.intro": "The following errors were recorded by this instance within the last 24 hours.",
+	"errors.intro": "The following %1 error(s) were recorded by this instance within the last 24 hours.",
 	"errors.payload-gone": "The payload for this error no longer exists."
 }
\ No newline at end of file
diff --git a/public/src/admin/federation/errors.js b/public/src/admin/federation/errors.js
new file mode 100644
index 0000000000..edc626d06f
--- /dev/null
+++ b/public/src/admin/federation/errors.js
@@ -0,0 +1,22 @@
+'use strict';
+
+export function init() {
+	const errorsEl = document.getElementById('errors');
+	if (errorsEl) {
+		errorsEl.addEventListener('toggle', handleToggle, true);
+	}
+}
+
+function handleToggle(e) {
+	const payloadEl = document.getElementById('payload');
+
+	if (e.target.open) {
+		const index = e.target.getAttribute('data-index');
+		const error = ajaxify.data.errors[index];
+		console.log(error);
+
+		payloadEl.innerText = error.body;
+	} else {
+		payloadEl.innerText = '';
+	}
+}
\ No newline at end of file
diff --git a/src/controllers/admin/federation.js b/src/controllers/admin/federation.js
index 2b67efecd1..29be877ec5 100644
--- a/src/controllers/admin/federation.js
+++ b/src/controllers/admin/federation.js
@@ -91,13 +91,15 @@ federationController.errors = async function (req, res) {
 	const errorObj = await db.getObjects(ids.map(id => `ap.errors:${id}`));
 	const errors = ids.map((id, idx) => {
 		let { body, stack } = errorObj[idx];
+		let hostname = 'Invalid hostname';
 		try {
 			body = JSON.stringify(JSON.parse(body), null, 4);
+			({ hostname } = new URL(id));
 		} catch (e) {
 			// noop
 		}
 
-		return { id, body, stack };
+		return { id, body, stack, hostname };
 	});
 
 	res.render('admin/federation/errors', {
diff --git a/src/views/admin/federation/errors.tpl b/src/views/admin/federation/errors.tpl
index 6b6afdb51f..174d58dcc7 100644
--- a/src/views/admin/federation/errors.tpl
+++ b/src/views/admin/federation/errors.tpl
@@ -1,28 +1,30 @@
-<div class="acp-page-container">
-	<!-- IMPORT admin/partials/settings/header.tpl -->
-
-	<div class="row m-0">
-		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
-			<div class="mb-4">
-				<p class="lead">[[admin/settings/activitypub:errors.intro]]</p>
-				{{{ each errors }}}
-				<details class="mb-3">
-					<summary>{./id}</summary>
-
-					{{{ if ./stack }}}
-					<pre class="m-2 border p-2"><code>{./stack}</code></pre>
-					{{{ end }}}
-
-					{{{ if ./body }}}
-					<pre class="m-2 border p-2"><code>{./body}</code></pre>
-					{{{ else }}}
-					<em>[[admin/settings/activitypub:errors.payload-gone]]</em>
-					{{{ end }}}
-				</details>
-				{{{ end }}}
-			</div>
-		</div>
-
-		<!-- IMPORT admin/partials/settings/toc.tpl -->
+<div component="settings/main/header" class="row border-bottom py-2 m-0 mb-3 sticky-top acp-page-main-header align-items-center">
+	<div class="col-12 col-md-8 px-0 mb-1 mb-md-0">
+		<h4 class="fw-bold tracking-tight mb-0">{title}</h4>
+	</div>
+</div>
+
+<p class="lead">[[admin/settings/activitypub:errors.intro, {errors.length}]]</p>
+
+<div class="row flex-column-reverse flex-md-row">
+	<div class="col-12 col-md-4" id="errors">
+		{{{ each errors }}}
+		<details class="mb-3" data-index="{@index}">
+			<summary>{./id}</summary>
+
+			{{{ if ./stack }}}
+			<pre class="m-2 border p-2"><code>{./stack}</code></pre>
+			{{{ end }}}
+
+			{{{ if ./body }}}
+			<!-- <pre class="m-2 border p-2"><code>{./body}</code></pre> -->
+			{{{ else }}}
+			<em>[[admin/settings/activitypub:errors.payload-gone]]</em>
+			{{{ end }}}
+		</details>
+		{{{ end }}}
+	</div>
+	<div class="col-12 col-md-8">
+		<pre class="m-2 p-2 border"><code id="payload"></code></pre>
 	</div>
 </div>