# Buat formulir feedback dalam aplikasi di TanStack Start > Formulir feedback dalam aplikasi TanStack Start: server function POST dengan middleware sesi, route id sebagai konteks, dan halaman dibaca dari header request. Terbit 2026-10-25 ยท https://ikiform.com/id/guides/feedback-form/tanstack-start Tulis server function POST untuk feedback dan pasang function middleware yang membaca sesi dan menaruh pengguna di `context`. Function menambahkan pengguna itu, halaman dari `Referer` request, dan route id yang cocok ke rating, lalu meneruskannya ke backend formulir Anda dengan secret key. Mount formulir sekali di layout route untuk pengguna login dan formulir itu tahu sendiri sedang berada di layar mana. [Tab TanStack Start di panduan utama](https://ikiform.com/id/guides/feedback-form.md#form) mengirim feedback halaman dari siapa pun, dengan halaman diatur di browser. Di dalam aplikasi dengan login Anda bisa lebih baik: server tahu siapa yang bertanya, dan router tahu layar mana yang terbuka. Penyiapan akun, key, dan allowed domains dibahas di [panduan dokumentasi server](https://ikiform.com/id/docs/guides/server.md). ## Siapa menyediakan apa Di Start, server function adalah endpoint HTTP di bawah `/_serverFn/` yang dipanggil komponen Anda lewat klien yang dihasilkan. Apa pun di input-nya bisa ditulis ulang oleh siapa pun yang memanggilnya. Jadi input hanya membawa apa yang dipilih pengguna, dan semua hal tentang identitas berasal dari middleware yang berjalan di server sebelum handler. | Nilai | Sumber | Kepercayaan | | --- | --- | --- | | `rating`, `comment` | `FormData` dari formulir | Kata-kata pengguna sendiri | | `user_id`, `email` | `context.user`, diatur oleh middleware sesi | Dibaca dari cookie tersegel di server | | `page` | `getRequestHeader("referer")` di dalam handler | Browser memanggil function dari halaman yang terbuka, jadi header berisi URL-nya | | `screen` | `routeId` dari kecocokan terdalam, seperti `/_app/projects/$projectId/settings` | Label pengelompokan. Diperiksa terhadap pola sebelum disimpan | Diagram: Bagaimana server function TanStack Start menambahkan pengguna dan halaman ke jawaban feedback 1. Formulir mengumpulkan skor dan komentar, menambahkan route id saat ini, lalu memanggil server function. 2. Di server, middleware membaca sesi dan meneruskan pengguna sebagai konteks. 3. Validator mengubah FormData menjadi objek bertipe dan membuang nama layar yang bentuknya salah. 4. Handler menolak jika pengguna tidak ada, lalu menambahkan pengguna dan halaman dari header Referer. 5. Handler mengirim ke Ikiform dengan secret key dan mengembalikan sent, atau error yang ditampilkan formulir. Pengguna berasal dari cookie di server. Tidak ada isi data formulir yang bisa mengubah asal sebuah jawaban. ## Setup proyek Struktur ini mengasumsikan routing berbasis file dengan layout `_app` tanpa path yang membungkus setiap layar untuk pengguna login. `session.ts` adalah helper iron-session dari panduan autentikasi Start; library sesi apa pun yang membaca cookie bekerja dengan cara yang sama. `findUser` di `users.ts` dan `getCurrentUserFn` di `server/user.ts` adalah pencarian pengguna milik Anda sendiri. `Struktur proyek`: ```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 membaca variabel tanpa awalan dari `process.env` hanya di server. Apa pun dengan awalan `VITE_` di-bundle untuk browser, jadi key tidak boleh memakainya. Baca di dalam handler, bukan di bagian atas modul. `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=at-least-32-characters-from-your-auth-setup ``` Tempel definisi field di tab **Fields** formulir. Formulir menampilkan dua di antaranya; server function mengisi empat lainnya, dan field `email` membuat **Reply** di setiap notifikasi menuju ke pengguna. Formulir: In-app feedback - **Bagaimana layar ini bekerja untuk Anda?** (`rating`, rating, wajib) - **Apa yang bisa membuatnya lebih baik?** (`comment`, textarea) - **Halaman** (`page`, url) - **Layar** (`screen`, text) - **Pengguna** (`user_id`, text) - **Email** (`email`, email) Kirim `rating: 6` atau field yang tidak ada di definisi, dan preview menampilkan `422` yang akan diterima server function Anda. ## Bangun ### Middleware sesi Function middleware membungkus setiap server function yang mencantumkannya. Apa pun yang masuk ke `next({ context })` tiba dengan tipe di handler. Middleware meneruskan `null` alih-alih melempar exception, sehingga handler bisa menjawab dengan pesan yang ditampilkan formulir. `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 } }); }); ``` ### 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` menerima `FormData` mentah dan mengembalikan objek biasa. Skor yang buruk menjadi `null` alih-alih error yang dilempar, yang akan sampai ke klien sebagai kegagalan umum. - `getRequestHeader` membaca request yang masuk dari mana saja di handler, tanpa objek request yang diteruskan ke sana kemari. - `Origin` diteruskan dari panggilan browser. Nilai ini menentukan apakah Ikiform memperlakukan kiriman sebagai uji lokal, dijelaskan di bawah. - Hanya ID dan email yang masuk ke konteks, bukan seluruh record pengguna. Apa pun yang dikembalikan handler diserialisasi ke browser. ### Formulirnya `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) => ( ))}