✦ For TanStack Start · Server Functions · Loaders · React ✦
TanStack Start makes full-stack type-safe apps trivial — and debugging them painful. createServerFn failures return a generic "500 Unexpected Server Error" with no payload, no stack, no trace. FlareLog captures what your hosting platform doesn't.
500 Internal Server Error
No source, no payload, no stack
↑ Netlify UI shows nothing
No Logs
Server function failed silently
3
Lines to install
90d
Pro retention
10k
free logs/mo
$19
flat Pro bucket
TanStack Start is full-stack. But its error story is client-side only. That breaks production.
The official TanStack Start observability guide points you to Sentry. But server functions run on Vercel/Netlify/Cloudflare — where logs expire in an hour and failures leave no trace. FlareLog captures the full picture: server functions, loaders, route handlers, and client errors in one dashboard.
@flarelog/sdk/tanstack-start covers the server. @flarelog/sdk/react covers the client. Together: full-stack visibility.
Install the SDK
Run npm install @flarelog/sdk. One package includes the TanStack Start middleware, the React ErrorBoundary, and the core client.
Register request middleware
In your createStart config, add tanstackStartMiddleware(logger). Every request now carries a child logger with traceId.
Wrap your server functions (optional)
For deeper context, wrap individual createServerFn handlers with withTanStackStart(logger, fn). Captures errors with the exact payload that triggered them.
Add the React ErrorBoundary
Wrap your root with FlareLogErrorBoundary to capture client-side render errors and route them to the same dashboard.
// src/start.ts
import { createStart } from "@tanstack/react-start";
import { flarelog } from "@flarelog/sdk";
import { tanstackStartMiddleware } from "@flarelog/sdk/tanstack-start";
const logger = flarelog({
apiKey: process.env.FLARELOG_API_KEY,
});
export const startInstance = createStart(() => ({
requestMiddleware: [
tanstackStartMiddleware(logger) as never,
],
}));// src/routes/api/orders.ts
import { createServerFn } from "@tanstack/react-start";
import { withTanStackStart } from "@flarelog/sdk/tanstack-start";
import { logger } from "../start";
// Wrap any server function — errors auto-captured
export const fetchOrder = createServerFn(
withTanStackStart(logger, async ({ data }) => {
const ctx = withTanStackStart.getContext();
ctx.logger.info("Looking up order", { orderId: data.id });
const order = await db.orders.findById(data.id);
if (!order) {
ctx.logger.warn("Order not found", { orderId: data.id });
throw new Error("NOT_FOUND");
}
return order;
})
);// src/ErrorBoundary.tsx
import { flarelog } from "@flarelog/sdk";
import { FlareLogErrorBoundary } from "@flarelog/sdk/react";
const logger = flarelog({
apiKey: process.env.NEXT_PUBLIC_FLARELOG_API_KEY,
});
export function RootErrorBoundary({ children }) {
return (
<FlareLogErrorBoundary
logger={logger}
fallback={<ErrorPage />}
>
{children}
</FlareLogErrorBoundary>
);
}# Vercel
vercel env add FLARELOG_API_KEY
vercel env add NEXT_PUBLIC_FLARELOG_API_KEY
# Netlify / Cloudflare Pages
# Set in dashboard → Environment variables
# .env.local
FLARELOG_API_KEY=fl_server_secret
NEXT_PUBLIC_FLARELOG_API_KEY=fl_public_safe_to_exposeNo more "server function failing with no logs". Every createServerFn call is captured with the input payload, duration, and any thrown error.
Structured JSON logs let you search by source, traceId, userId, or any custom metadata you attach. No more scrolling stdout.
FlareLogErrorBoundary + useFlareLog hook capture render errors, user events, and breadcrumbs. SDK is tree-shakable — 11KB ceiling if you import everything, far less if you only pull the React bindings. Sentry's React SDK is 45KB.
Vercel Hobby gives you ~1 hour of logs. Netlify similar. FlareLog keeps 7 days free, 90 days Pro — so last week's failing server function is still searchable.
Same SDK regardless of where you deploy TanStack Start. Logs flow to FlareLog via fetch() — works on Vercel Edge, Netlify Functions, Cloudflare Pages, and self-hosted Node.
Connect FlareLog's MCP server to Cursor or Claude. Ask "why did fetchOrder fail for user 4829?" and get structured answers from your real prod logs.
The TanStack Start observability docs recommend Sentry. Sentry is a great error tracker — but it doesn't solve the host's 1-hour log retention, doesn't see server function payloads, and its SDK adds 45KB to your bundle. FlareLog is purpose-built for the full-stack TanStack Start workflow.
Pain point
The recurring Netlify thread: "TanStack Start server function failing with no logs." FlareLog captures the failure with full context — even when the host's runtime logs are empty.
Pain point
Vercel Hobby expires logs in ~1 hour. By the time you hear about a prod issue, the trace is gone. FlareLog keeps it for 7-90 days.
Pain point
TanStack Start sanitizes server errors in production to "Unexpected Server Error." FlareLog captures the actual error and stack on the server side, then surfaces it in your dashboard.
FlareLog's MCP server connects Cursor, Claude Desktop, or Lovable Agent to your real TanStack Start production logs. Your AI sees the structured error, the input payload, and the stack — then proposes a fix you can apply inline.
{
"mcpServers": {
"flarelog": {
"url": "https://mcp.flarelog.dev",
"headers": {
"Authorization": "Bearer fl_your_api_key"
}
}
}
}↑ Paste into Cursor, Claude Desktop, or Lovable Connectors.
Yes. Use withTanStackStart(logger, fn) to wrap any server function. Input payloads, durations, and thrown errors are captured automatically. The wrapper preserves TanStack Start's type inference — no generics gymnastics required.
Yes. The SDK uses Web standard fetch() to ship logs. Tested on Vercel Edge + Node, Netlify Functions, and Cloudflare Pages. No runtime-specific adapter. Logs flush via waitUntil on Workers and ctx.waitUntil / async hooks elsewhere.
The TanStack Start observability guide pushes Sentry. Sentry is excellent for error tracking, but it has three gaps on TanStack Start: (1) it doesn't capture server function payloads unless you manually instrument them, (2) its SDK adds ~45KB to your bundle, (3) it doesn't solve Vercel/Netlify's log retention wall. FlareLog is purpose-built for full-stack TanStack Start apps.
Yes. Import FlareLogErrorBoundary and useFlareLog from @flarelog/sdk/react. Wrap your root component. Render errors, click events, and breadcrumbs flow to the same dashboard as your server logs.
Yes. The recurring Netlify thread ("TanStack Start server function failing with no logs") happens because Netlify's runtime logs are truncated and async work is dropped when the function freezes. FlareLog flushes synchronously before the response completes, so the failure is captured even when the host's logs are empty.
Free tier: 10,000 logs/month, 7-day retention. Pro: $19/month for 2M logs/month and 90-day retention. Flat bucket pricing — traffic spikes from Product Hunt or bot storms don't 10× your bill.
Free tier includes 10,000 logs/month, structured search, server function capture, React error boundary, and MCP debugging. No credit card.