# Feedback-Formular in der App mit TanStack Start bauen > Ein Feedback-Formular in einer TanStack-Start-App: eine POST-Server-Funktion mit Session-Middleware, die Routen-ID als Kontext und die Seite aus den Request-Headern. Veröffentlicht am 2026-10-25 · https://ikiform.com/de/guides/feedback-form/tanstack-start Schreib eine POST-Server-Funktion für das Feedback und häng eine Function Middleware an, die die Session liest und den Nutzer auf `context` legt. Die Funktion ergänzt die Bewertung um diesen Nutzer, die Seite aus dem `Referer` des Requests und die ID der passenden Route und leitet alles mit einem Secret Key an dein Formular-Backend weiter. Mounte das Formular einmal in deiner Layout-Route für angemeldete Nutzer, dann weiß es von selbst, auf welcher Ansicht es ist. Der [TanStack-Start-Tab der Hauptanleitung](https://ikiform.com/de/guides/feedback-form.md#form) sendet Seiten-Feedback von jedem, wobei die Seite im Browser gesetzt wird. In einer App mit Anmeldung geht es besser: Der Server weiß, wer fragt, und der Router weiß, welche Ansicht offen ist. Konto-Setup, Keys und erlaubte Domains behandelt einmal die [Server-Anleitung der Doku](https://ikiform.com/de/docs/guides/server.md). ## Wer was liefert In Start ist eine Server-Funktion ein HTTP-Endpunkt unter `/_serverFn/`, den deine Komponente über einen generierten Client aufruft. Alles in ihrem Input kann vom Aufrufer umgeschrieben werden. Also enthält der Input nur, was der Nutzer gewählt hat, und alles zur Identität kommt aus Middleware, die vor dem Handler auf dem Server läuft. | Wert | Quelle | Vertrauen | | --- | --- | --- | | `rating`, `comment` | Die `FormData` des Formulars | Die eigenen Worte des Nutzers | | `user_id`, `email` | `context.user`, gesetzt von der Session-Middleware | Auf dem Server aus einem versiegelten Cookie gelesen | | `page` | `getRequestHeader("referer")` im Handler | Der Browser ruft die Funktion von der offenen Seite aus auf, also enthält der Header deren URL | | `screen` | Die `routeId` des tiefsten Treffers, etwa `/_app/projects/$projectId/settings` | Ein Label zum Gruppieren. Wird vor dem Speichern gegen ein Pattern geprüft | Diagramm: Wie eine TanStack-Start-Server-Funktion einer Feedback-Antwort Nutzer und Seite hinzufügt 1. Das Formular sammelt Bewertung und Kommentar, ergänzt die aktuelle Routen-ID und ruft die Server-Funktion auf. 2. Auf dem Server liest die Middleware die Session und reicht den Nutzer als Kontext weiter. 3. Der Validator macht aus den FormData ein typisiertes Objekt und verwirft einen Ansichtsnamen mit falscher Form. 4. Der Handler lehnt einen fehlenden Nutzer ab und ergänzt dann den Nutzer und die Seite aus dem Referer-Header. 5. Er sendet mit dem Secret Key an Ikiform und gibt sent zurück oder einen Fehler, den das Formular anzeigt. Der Nutzer kommt auf dem Server aus dem Cookie. Nichts in den Formulardaten kann ändern, von wem eine Antwort stammt. ## Projekt-Setup Die Struktur geht von dateibasiertem Routing mit einem pfadlosen `_app`-Layout aus, das jede Ansicht für angemeldete Nutzer umschließt. `session.ts` ist der iron-session-Helper aus der Authentifizierungsanleitung von Start; jede Session-Bibliothek, die ein Cookie liest, funktioniert genauso. `findUser` in `users.ts` und `getCurrentUserFn` in `server/user.ts` sind deine eigenen Nutzerabfragen. `Projektstruktur`: ```text src/ components/feedback-form.tsx lib/ session.ts user-middleware.ts users.ts routes/ _app.tsx _app/projects/$projectId/settings.tsx server/ feedback.ts user.ts .env ``` Start liest Variablen ohne Präfix nur auf dem Server aus `process.env`. Alles mit dem Präfix `VITE_` wird für den Browser gebündelt, also darf der Key es nie haben. Lies ihn im Handler, nicht oben im Modul. `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=at-least-32-characters-from-your-auth-setup ``` Füge die Felddefinition im Tab **Fields** des Formulars ein. Das Formular zeigt zwei davon; die Server-Funktion füllt die anderen vier, und das Feld `email` sorgt dafür, dass **Reply** in jeder Benachrichtigung an den Nutzer geht. Formular: In-app feedback - **Wie funktioniert diese Ansicht für dich?** (`rating`, rating, Pflichtfeld) - **Was würde sie besser machen?** (`comment`, textarea) - **Seite** (`page`, url) - **Ansicht** (`screen`, text) - **Nutzer** (`user_id`, text) - **E-Mail** (`email`, email) Sende `rating: 6` oder ein Feld, das die Definition nicht listet, und die Vorschau zeigt den `422`, den deine Server-Funktion bekäme. ## Bauen ### Session-Middleware Eine Function Middleware umschließt jede Server-Funktion, die sie auflistet. Was in `next({ context })` geht, kommt typisiert im Handler an. Sie reicht `null` weiter, statt eine Exception zu werfen, damit der Handler mit einer Meldung antworten kann, die das Formular anzeigt. `src/lib/user-middleware.ts`: ```ts import { createMiddleware } from "@tanstack/react-start"; import { getAppSession } from "./session"; import { findUser } from "./users"; export const userMiddleware = createMiddleware({ type: "function" }).server(async ({ next }) => { const session = await getAppSession(); const user = session.userId ? await findUser(session.userId) : null; return next({ context: { user: user ? { id: user.id, email: user.email } : null } }); }); ``` ### Die Serverfunktion `src/server/feedback.ts`: ```ts import { createServerFn } from "@tanstack/react-start"; import { getRequestHeader } from "@tanstack/react-start/server"; import { userMiddleware } from "../lib/user-middleware"; export type FeedbackResult = { status: "sent" } | { status: "error"; message: string }; const ROUTE_ID = /^\/[A-Za-z0-9/$_.-]{0,119}$/; function pageFrom(referer: string | undefined) { try { const url = new URL(referer ?? ""); return url.origin + url.pathname; } catch { return ""; } } export const sendFeedback = createServerFn({ method: "POST" }) .middleware([userMiddleware]) .validator((data: unknown) => { if (!(data instanceof FormData)) throw new Error("Expected form data"); const rating = Number(data.get("rating")); const screen = String(data.get("screen") ?? ""); return { rating: Number.isInteger(rating) && rating >= 1 && rating <= 5 ? rating : null, comment: String(data.get("comment") ?? "").trim().slice(0, 4000), screen: ROUTE_ID.test(screen) ? screen : "unknown", trap: String(data.get("_gotcha") ?? ""), }; }) .handler(async ({ data, context }): Promise => { if (!context.user) return { status: "error", message: "You're signed out. Sign in and send it again." }; if (data.rating === null) return { status: "error", message: "Choose a score first." }; const origin = getRequestHeader("origin"); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify({ rating: data.rating, comment: data.comment, page: pageFrom(getRequestHeader("referer")), screen: data.screen, user_id: context.user.id, email: context.user.email, _gotcha: data.trap, }), signal: AbortSignal.timeout(8000), }); } catch { return { status: "error", message: "Feedback is unreachable right now. Try again shortly." }; } const result = await response.json().catch(() => null); if (result?.ok) return { status: "sent" }; return { status: "error", message: result?.error?.message ?? "That didn't go through. Try again." }; }); ``` - `.validator` bekommt die rohen `FormData` und gibt ein einfaches Objekt zurück. Eine ungültige Bewertung wird zu `null` statt zu einer geworfenen Exception, die den Client als allgemeiner Fehler erreichen würde. - `getRequestHeader` liest den eingehenden Request von überall im Handler, ohne dass ein Request-Objekt herumgereicht wird. - `Origin` wird aus dem Aufruf des Browsers weitergereicht. Er entscheidet, ob Ikiform den Post als lokalen Test behandelt, wie unten erklärt. - In den Kontext kommen nur ID und E-Mail, nicht der ganze Nutzerdatensatz. Was der Handler zurückgibt, wird zum Browser serialisiert. ### Das Formular `src/components/feedback-form.tsx`: ```tsx import { useMatches } from "@tanstack/react-router"; import { useServerFn } from "@tanstack/react-start"; import { type FormEvent, useState } from "react"; import { type FeedbackResult, sendFeedback } from "../server/feedback"; const SCORES = ["Badly", "Poorly", "Okay", "Well", "Very well"]; export function FeedbackForm() { const send = useServerFn(sendFeedback); const screen = useMatches({ select: (matches) => matches.at(-1)?.routeId ?? "unknown" }); const [result, setResult] = useState(null); const [pending, setPending] = useState(false); async function onSubmit(event: FormEvent) { event.preventDefault(); const data = new FormData(event.currentTarget); data.set("screen", screen); setPending(true); try { setResult(await send({ data })); } catch { setResult({ status: "error", message: "We lost the connection. Try again." }); } finally { setPending(false); } } if (result?.status === "sent") return

Thanks. We read every one.

; return (
How is this screen working for you? {SCORES.map((label, index) => ( ))}