Blyp Docs

TanStack Start

Import from @blyp/core/tanstack-start.

import { createLogger } from "@blyp/core/tanstack-start";

const tanstackLogger = createLogger({
  level: "info",
});

export const requestMiddleware = tanstackLogger.requestMiddleware;

Inside requestMiddleware, Blyp injects blypLog into the middleware context passed to next({ context }).

const response = await tanstackLogger.requestMiddleware({
  request,
  context: {},
  next: async (options) => {
    options?.context?.blypLog?.info("tanstack-route");
    return new Response("ok");
  },
});

Client ingestion route

export const POST = tanstackLogger.clientLogHandlers.POST;

What auto-logged requests look like

With automatic request logging enabled, Blyp emits terminal output like:

[INFO]  GET  /health        200  2ms
[INFO]  POST /checkout      200  143ms
[INFO]  GET  /users/42      404  8ms
[ERROR] POST /payments      500  1203ms

Fields included automatically: method, path, status code, and duration.

In production (NDJSON):

{"level":"info","time":1710000000000,"msg":"GET /health","type":"http_request","method":"GET","url":"/health","statusCode":200,"responseTime":2}
{"level":"info","time":1710000000001,"msg":"POST /checkout","type":"http_request","method":"POST","url":"/checkout","statusCode":200,"responseTime":143}

Relevant types

import type {
  TanStackStartLoggerConfig,
  TanStackStartLoggerFactory,
  TanStackStartMiddlewareContext,
} from "@blyp/core/tanstack-start";