diff --git a/src/main.jsx b/src/main.jsx
index 9f28c8b..2a6b667 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import {
Check,
@@ -19,6 +19,7 @@ import {
import "./styles.css";
const DEFAULT_API_URL = "/api";
+const API_HISTORY_LIMIT = 80;
function readStored(key, fallback) {
try {
@@ -87,6 +88,8 @@ function App() {
const [status, setStatus] = useState({ tone: "idle", message: "Ready" });
const [busy, setBusy] = useState(false);
const [copied, setCopied] = useState(false);
+ const [apiHistory, setApiHistory] = useState([]);
+ const apiHistoryEndRef = useRef(null);
const normalizedApiUrl = useMemo(() => normalizeApiUrl(apiUrl), [apiUrl]);
const selectedNote = useMemo(
@@ -122,11 +125,22 @@ function App() {
}
}, [token]);
+ useEffect(() => {
+ apiHistoryEndRef.current?.scrollIntoView({ block: "end" });
+ }, [apiHistory.length]);
+
function setMessage(tone, message) {
setStatus({ tone, message });
}
+ function recordApiCall(entry) {
+ setApiHistory((current) => [...current, entry].slice(-API_HISTORY_LIMIT));
+ }
+
async function apiRequest(path, options = {}) {
+ const method = options.method || "GET";
+ const url = `${normalizedApiUrl}${path}`;
+ const startedAt = performance.now();
const headers = {
Accept: "application/json",
...(options.body ? { "Content-Type": "application/json" } : {}),
@@ -134,20 +148,56 @@ function App() {
...(options.headers || {}),
};
- const response = await fetch(`${normalizedApiUrl}${path}`, {
- ...options,
- headers,
- });
+ try {
+ const response = await fetch(url, {
+ ...options,
+ headers,
+ });
- const text = await response.text();
- const payload = text ? parsePayload(text) : null;
+ const text = await response.text();
+ const payload = text ? parsePayload(text) : null;
+ const elapsedMs = Math.round(performance.now() - startedAt);
- if (!response.ok) {
- const message = payload?.message || payload?.error || text || `${response.status} ${response.statusText}`;
- throw new Error(message);
+ recordApiCall({
+ id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+ method,
+ path,
+ url,
+ ok: response.ok,
+ status: response.status,
+ statusText: response.statusText,
+ elapsedMs,
+ timestamp: new Date().toLocaleTimeString(),
+ request: formatBody(options.body),
+ response: payload,
+ });
+
+ if (!response.ok) {
+ const message = payload?.message || payload?.error || text || `${response.status} ${response.statusText}`;
+ const httpError = new Error(message);
+ httpError.apiLogged = true;
+ throw httpError;
+ }
+
+ return payload;
+ } catch (error) {
+ if (!error?.apiLogged) {
+ recordApiCall({
+ id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+ method,
+ path,
+ url,
+ ok: false,
+ status: "ERR",
+ statusText: "Network error",
+ elapsedMs: Math.round(performance.now() - startedAt),
+ timestamp: new Date().toLocaleTimeString(),
+ request: formatBody(options.body),
+ response: { error: error.message },
+ });
+ }
+ throw error;
}
-
- return payload;
}
async function handleAuth(event) {
@@ -478,6 +528,12 @@ function App() {
Point the app at the API, register or log in, then create, edit, delete, and share notes.
)}
+
+ setApiHistory([])}
+ endRef={apiHistoryEndRef}
+ />
);
@@ -531,6 +587,53 @@ function StatusBadge({ status }) {
return {status.message}
;
}
+function ApiHistoryPanel({ entries, onClear, endRef }) {
+ return (
+
+
+
+
REST history
+
Requests and responses
+
+ {entries.length ? (
+ entries.map((entry) => (
+
+
+ {entry.method}
+ {entry.path}
+
+ {entry.status} {entry.statusText}
+
+
+ {entry.elapsedMs}ms
+
+
+
+
Request
+
{formatDisplay(entry.request)}
+
+
+
Response
+
{formatDisplay(entry.response)}
+
+
+ ))
+ ) : (
+
REST calls will appear here.
+ )}
+
+