# Créer un formulaire de feedback dans l'application avec TanStack Start > Un formulaire de feedback dans une application TanStack Start : une server function POST avec un middleware de session, l'id de route comme contexte et la page lue dans les en-têtes. Publié le 2026-10-25 · https://ikiform.com/fr/guides/feedback-form/tanstack-start Écrivez une server function POST pour le feedback et attachez-lui un function middleware qui lit la session et place l'utilisateur dans `context`. La fonction ajoute à la note cet utilisateur, la page tirée du `Referer` de la requête et l'id de la route correspondante, puis transmet le tout à votre backend de formulaires avec une clé secrète. Montez le formulaire une seule fois dans votre layout route connectée, et il sait de lui-même sur quel écran il se trouve. L'[onglet TanStack Start du guide principal](https://ikiform.com/fr/guides/feedback-form.md#form) envoie le feedback de page de n'importe qui, avec la page renseignée dans le navigateur. Dans une application avec connexion, vous pouvez faire mieux : le serveur sait qui demande, et le routeur sait quel écran est ouvert. La configuration du compte, les clés et les domaines autorisés sont traités une fois pour toutes dans le [guide serveur de la documentation](https://ikiform.com/fr/docs/guides/server.md). ## Qui fournit quoi Dans Start, une server function est un endpoint HTTP sous `/_serverFn/` que votre composant appelle via un client généré. Tout ce qui est dans son input peut être réécrit par l'appelant. L'input ne porte donc que ce que l'utilisateur a choisi, et tout ce qui touche à l'identité vient d'un middleware exécuté sur le serveur avant le handler. | Valeur | Source | Confiance | | --- | --- | --- | | `rating`, `comment` | Le `FormData` du formulaire | Les mots de l'utilisateur | | `user_id`, `email` | `context.user`, renseigné par le middleware de session | Lu dans un cookie scellé côté serveur | | `page` | `getRequestHeader("referer")` dans le handler | Le navigateur appelle la fonction depuis la page ouverte, donc l'en-tête contient son URL | | `screen` | Le `routeId` de la correspondance la plus profonde, comme `/_app/projects/$projectId/settings` | Une étiquette de regroupement. Vérifiée par un motif avant d'être stockée | Schéma : Comment une server function TanStack Start ajoute l'utilisateur et la page à une réponse de feedback 1. Le formulaire recueille la note et le commentaire, ajoute l'id de la route courante et appelle la server function. 2. Côté serveur, le middleware lit la session et transmet l'utilisateur comme contexte. 3. Le validateur transforme le FormData en objet typé et écarte un nom d'écran mal formé. 4. Le handler refuse un utilisateur manquant, puis ajoute l'utilisateur et la page issue de l'en-tête Referer. 5. Il envoie à Ikiform avec la clé secrète et renvoie sent, ou une erreur que le formulaire affiche. L'utilisateur vient du cookie, côté serveur. Rien dans les données du formulaire ne peut changer l'auteur d'une réponse. ## Mise en place du projet L'arborescence suppose un routage par fichiers avec un layout `_app` sans chemin qui enveloppe chaque écran connecté. `session.ts` est le helper iron-session du guide d'authentification de Start ; toute bibliothèque de session qui lit un cookie fonctionne de la même façon. `findUser` dans `users.ts` et `getCurrentUserFn` dans `server/user.ts` sont vos propres recherches d'utilisateur. `Arborescence du projet`: ```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 lit les variables sans préfixe depuis `process.env` côté serveur uniquement. Tout ce qui a le préfixe `VITE_` est inclus dans le bundle du navigateur : la clé ne doit donc jamais l'avoir. Lisez-la dans le handler, pas en haut du module. `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=at-least-32-characters-from-your-auth-setup ``` Collez la définition des champs dans l'onglet **Fields** du formulaire. Le formulaire en affiche deux ; la server function remplit les quatre autres, et le champ `email` fait que **Reply** sur chaque notification écrit à l'utilisateur. Formulaire : In-app feedback - **Comment cet écran fonctionne-t-il pour vous ?** (`rating`, rating, obligatoire) - **Qu'est-ce qui l'améliorerait ?** (`comment`, textarea) - **Page** (`page`, url) - **Écran** (`screen`, text) - **Utilisateur** (`user_id`, text) - **E-mail** (`email`, email) Envoyez `rating: 6` ou un champ absent de la définition : l'aperçu affiche le `422` que recevrait votre server function. ## La construire ### Middleware de session Un function middleware enveloppe toute server function qui le liste. Ce qui passe dans `next({ context })` arrive typé dans le handler. Il transmet `null` au lieu de lever une exception, pour que le handler puisse répondre avec un message que le formulaire affiche. `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 } }); }); ``` ### La server function `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` reçoit le `FormData` brut et renvoie un objet simple. Une note invalide devient `null` au lieu d'une exception, qui arriverait au client comme un échec générique. - `getRequestHeader` lit la requête entrante depuis n'importe où dans le handler, sans faire circuler d'objet requête. - `Origin` est transmis depuis l'appel du navigateur. C'est lui qui décide si Ikiform traite l'envoi comme un test local, comme expliqué plus bas. - Seuls un id et un e-mail vont dans le contexte, pas tout l'enregistrement utilisateur. Tout ce que renvoie le handler est sérialisé vers le navigateur. ### Le formulaire `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) => ( ))}