# Problem Details

> RFC 7807 Problem Details for HTTP APIs with type, title, status, and detail.

- Name: `problem-details`
- Categories: api
- Detail page: https://open-types.dev/types/problem-details

## Install

```bash
# Types only
npx shadcn add @open-types/problem-details

# Types + Zod v4 validators
npx shadcn add @open-types/problem-details-zod

# Types + real-world examples
npx shadcn add @open-types/problem-details-examples
```

## Types

```typescript
export interface ProblemDetails {
  type?: string;
  title?: string;
  status?: number;
  detail?: string;
  instance?: string;
}
```

## Zod validator

```typescript
import * as z from "zod";
import type { ProblemDetails } from "../types/problem-details";

export const problemDetailsSchema = z
  .object({
    type: z.string().optional(),
    title: z.string().optional(),
    status: z
      .number()
      .int()
      .min(100, { error: "Status must be a valid HTTP status code" })
      .max(599, { error: "Status must be a valid HTTP status code" })
      .optional(),
    detail: z.string().optional(),
    instance: z.string().optional(),
  })
  .passthrough() satisfies z.ZodType<ProblemDetails>;

export type { ProblemDetails } from "../types/problem-details";
```

## Examples

```typescript
// Source: https://datatracker.ietf.org/doc/html/rfc9457
// Captured: 2026-05
import type { ProblemDetails } from "../types/problem-details";

export const problemDetailsExamples = {
  validation: {
    type: "https://example.com/problems/validation",
    title: "Your request parameters didn't validate.",
    status: 422,
    detail: "Field 'email' is required.",
    instance: "/orders/12345",
  } satisfies ProblemDetails,
  unauthorized: {
    type: "https://example.com/problems/unauthorized",
    title: "Unauthorized",
    status: 401,
    detail: "Missing or invalid bearer token.",
  } satisfies ProblemDetails,
  notFound: {
    type: "about:blank",
    title: "Not Found",
    status: 404,
    instance: "/customers/cus_doesnotexist",
  } satisfies ProblemDetails,
  serverError: {
    title: "Internal Server Error",
    status: 500,
  } satisfies ProblemDetails,
  minimal: { title: "Bad Request" } satisfies ProblemDetails,
} as const;
```