# Crea un formulario de feedback in-app en TanStack Start > Un formulario de feedback in-app en TanStack Start: una server function POST con middleware de sesión, el id de ruta como contexto y la página leída de las cabeceras. Publicado el 2026-10-25 · https://ikiform.com/es/guides/feedback-form/tanstack-start Escribe una server function POST para el feedback y añádele un middleware de función que lea la sesión y ponga el usuario en `context`. La función añade a la nota ese usuario, la página del `Referer` de la petición y el id de la ruta activa, y luego lo reenvía a tu backend de formularios con una clave secreta. Monta el formulario una vez en tu ruta de layout con sesión iniciada y sabrá por sí solo en qué pantalla está. La [pestaña de TanStack Start de la guía principal](https://ikiform.com/es/guides/feedback-form.md#form) envía feedback de página de cualquiera, con la página fijada en el navegador. Dentro de una app con sesión iniciada puedes hacerlo mejor: el servidor sabe quién pregunta y el router sabe qué pantalla está abierta. La configuración de la cuenta, las claves y los dominios permitidos se explican una vez en la [guía de servidor de la documentación](https://ikiform.com/es/docs/guides/server.md). ## Quién aporta qué En Start, una server function es un endpoint HTTP bajo `/_serverFn/` al que tu componente llama mediante un cliente generado. Quien la llame puede reescribir cualquier cosa de su input. Así que el input lleva solo lo que eligió el usuario, y todo lo relativo a la identidad sale de un middleware que se ejecuta en el servidor antes del handler. | Valor | Origen | Confianza | | --- | --- | --- | | `rating`, `comment` | El `FormData` del formulario | Las propias palabras del usuario | | `user_id`, `email` | `context.user`, que pone el middleware de sesión | Se lee de una cookie sellada en el servidor | | `page` | `getRequestHeader("referer")` dentro del handler | El navegador llama a la función desde la página abierta, así que la cabecera contiene su URL | | `screen` | El `routeId` de la coincidencia más profunda, como `/_app/projects/$projectId/settings` | Una etiqueta para agrupar. Se comprueba con un patrón antes de guardarla | Diagrama: Cómo una server function de TanStack Start añade el usuario y la página a una respuesta de feedback 1. El formulario recoge la nota y el comentario, añade el id de la ruta actual y llama a la server function. 2. En el servidor, el middleware lee la sesión y pasa el usuario como contexto. 3. El validador convierte el FormData en un objeto tipado y descarta un nombre de pantalla con la forma incorrecta. 4. El handler rechaza si falta el usuario, y luego añade el usuario y la página de la cabecera Referer. 5. Envía a Ikiform con la clave secreta y devuelve sent, o un error que muestra el formulario. El usuario sale de la cookie en el servidor. Nada de los datos del formulario puede cambiar de quién es una respuesta. ## Configuración del proyecto El árbol supone enrutado basado en archivos con un layout sin ruta `_app` que envuelve cada pantalla con sesión iniciada. `session.ts` es el helper de iron-session de la guía de autenticación de Start; cualquier librería de sesiones que lea una cookie funciona igual. `findUser` en `users.ts` y `getCurrentUserFn` en `server/user.ts` son tus propias búsquedas de usuario. `Árbol del proyecto`: ```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 lee las variables sin prefijo de `process.env` solo en el servidor. Todo lo que lleva el prefijo `VITE_` se empaqueta para el navegador, así que la clave nunca debe llevarlo. Léela dentro del handler, no al principio del módulo. `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=at-least-32-characters-from-your-auth-setup ``` Pega la definición de campos en la pestaña **Fields** del formulario. El formulario muestra dos; la server function rellena los otros cuatro, y el campo `email` hace que **Reply** en cada notificación vaya al usuario. Formulario: In-app feedback - **¿Qué tal te funciona esta pantalla?** (`rating`, rating, obligatorio) - **¿Qué la haría mejor?** (`comment`, textarea) - **Página** (`page`, url) - **Pantalla** (`screen`, text) - **Usuario** (`user_id`, text) - **Email** (`email`, email) Envía `rating: 6` o un campo que la definición no incluya y la vista previa muestra el `422` que recibiría tu server function. ## Constrúyelo ### Middleware de sesión Un function middleware envuelve cualquier server function que lo incluya en su lista. Lo que pases a `next({ context })` llega tipado al handler. Pasa `null` en lugar de lanzar un error, para que el handler pueda responder con un mensaje que el formulario muestre. `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` recibe el `FormData` sin procesar y devuelve un objeto plano. Una nota incorrecta se convierte en `null` en lugar de un error lanzado, que llegaría al cliente como un fallo genérico. - `getRequestHeader` lee la petición entrante desde cualquier parte del handler, sin ir pasando un objeto de petición. - `Origin` se reenvía desde la llamada del navegador. Decide si Ikiform trata el envío como una prueba local, como se explica más abajo. - En el contexto solo entran un id y un email, no el registro completo del usuario. Todo lo que devuelve el handler se serializa hacia el navegador. ### El formulario `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) => ( ))}