# OpenPerf > OpenPerf error and performance monitoring: how to run and connect it, the Deft design system and development. ## Docs - [OpenPerf](https://docs.openperf.app/): Compact, self-hosted observability for application errors, traces, logs and performance. ## Get started - [Quickstart](https://docs.openperf.app/quickstart): Create a project, install the SDK and send your first error. ## Send data - [SDK](https://docs.openperf.app/sdk): Set up @openperf/sdk in the browser, Node.js and Bun, and report errors, users and spans. - [Releases and source maps](https://docs.openperf.app/releases): Name releases, upload source maps for readable browser stacks and record deploys. - [OpenTelemetry](https://docs.openperf.app/opentelemetry): Send traces and logs from any OpenTelemetry SDK or collector without the OpenPerf SDK. ## Use - [Errors](https://docs.openperf.app/errors): How OpenPerf groups errors, and how to find, read and triage them. - [Traces and logs](https://docs.openperf.app/traces-and-logs): Find traces and logs, read a trace span by span, and move between errors, traces and logs. - [Alerts](https://docs.openperf.app/alerts): Rules that post to team chats and email subscribers about new errors, regressions, spikes and metric thresholds. - [Organization](https://docs.openperf.app/organization): Roles, invitations, environments, API tokens and the audit log of an organization. ## Connect - [Webhooks](https://docs.openperf.app/webhooks): Outgoing webhooks, their events, signatures and retries. - [MCP](https://docs.openperf.app/mcp): Connect AI assistants to OpenPerf through its MCP server to read telemetry and triage errors. ## Self-hosting - [Overview](https://docs.openperf.app/self-hosting/overview): The services and stores that make up OpenPerf. - [Deploy](https://docs.openperf.app/self-hosting/deploy): How to deploy OpenPerf on your own infrastructure. - [Configuration](https://docs.openperf.app/self-hosting/configuration): Variables several services share. Set the same values in each. - [Integrations](https://docs.openperf.app/self-hosting/integrations): Create the Slack, Discord, Telegram, GitHub and Linear apps and set their keys. - [Operations](https://docs.openperf.app/self-hosting/operations): Health checks, logs, queues, scaling and retention. ### Services - [web](https://docs.openperf.app/self-hosting/services/web): The server-rendered dashboard. Port 3000. - [api](https://docs.openperf.app/self-hosting/services/api): The dashboard API and auth. Port 4000. - [api-ingest](https://docs.openperf.app/self-hosting/services/api-ingest): The OTLP intake. Port 4100. - [worker-errors](https://docs.openperf.app/self-hosting/services/worker-errors): Symbolicates, groups and stores errors. Port 4400 serves health only. - [worker-jobs](https://docs.openperf.app/self-hosting/services/worker-jobs): Runs alerts, webhooks, emails and cleanup jobs. Port 4200 serves health only. - [mcp](https://docs.openperf.app/self-hosting/services/mcp): The MCP server for AI assistants. Port 4500. Optional. ## Deft - [Deft](https://docs.openperf.app/deft): The OpenPerf design system. Quiet, dense interfaces for error and performance monitoring. ### Foundations - [Colors](https://docs.openperf.app/deft/foundations/colors): Neutral greys carry the interface. Cobalt marks the one thing to act on; amber and red mark state. - [Typography](https://docs.openperf.app/deft/foundations/typography): Manrope at 400, 500 and 600. One working size, 14px, with hierarchy from weight and colour. - [Spacing and sizes](https://docs.openperf.app/deft/foundations/spacing): A short spacing scale and one height per control size. - [Radius](https://docs.openperf.app/deft/foundations/radius): Corners grow with the size of the surface. - [Elevation](https://docs.openperf.app/deft/foundations/elevation): Only floating surfaces cast a shadow. Each shadow carries its own hairline ring. - [Icons](https://docs.openperf.app/deft/foundations/icons): Tabler Icons, outline, stroke 1.75, coloured from currentColor. - [Writing](https://docs.openperf.app/deft/foundations/writing): Short, plain English in sentence case. Name things the way people search for them. ### Components - [Action bar](https://docs.openperf.app/deft/components/action-bar): Floats over a list while rows are selected. Holds the actions for the selection. - [Avatar](https://docs.openperf.app/deft/components/avatar): A person as a circle with initials, a project or service as a square tile with an icon. - [Backdrop](https://docs.openperf.app/deft/components/backdrop): A faint landscape or dot pattern fixed to the bottom of the page. Gives the page ground without competing with content. - [Badge](https://docs.openperf.app/deft/components/badge): A short label on a tinted fill. Marks what is new or what needs attention. - [Block](https://docs.openperf.app/deft/components/block): A titled content block on a product page. - [Breadcrumb](https://docs.openperf.app/deft/components/breadcrumb): The title of a detail page, with the way back. - [Button](https://docs.openperf.app/deft/components/button): Runs an action. Five variants, four sizes and three shapes. - [Callout](https://docs.openperf.app/deft/components/callout): A note inside the content, tinted by how much it matters. - [Chart](https://docs.openperf.app/deft/components/chart): Data over the selected time range. Grey carries the data; colour marks state and the recent part of the story. - [Checkbox](https://docs.openperf.app/deft/components/checkbox): Selects rows and options. Accent fill when checked. - [Chip](https://docs.openperf.app/deft/components/chip): A toggle for a filter or a preset. Turns dark when on. - [Code](https://docs.openperf.app/deft/components/code): Lines of source with numbers and syntax colours, one of them highlighted. Used for stack frames and commands. - [Combobox](https://docs.openperf.app/deft/components/combobox): A picker with search. Single or multiple, with checkboxes for multiple. - [Dialog](https://docs.openperf.app/deft/components/dialog): A focused task over the page, with a title and at most one primary action. - [Dot](https://docs.openperf.app/deft/components/dot): A small status mark, with or without a label. - [Drawer](https://docs.openperf.app/deft/components/drawer): A panel from the right edge for details that keep the list in view. - [Empty](https://docs.openperf.app/deft/components/empty): What to show when a list or a panel has nothing in it. - [Field](https://docs.openperf.app/deft/components/field): Label, description and error for one control, wired for screen readers. - [Filter bar](https://docs.openperf.app/deft/components/filter-bar): The top of a list page. Picker, search and period, then a small toolbar. - [Input](https://docs.openperf.app/deft/components/input): A single-line text field on a control fill with a subtle border. - [Kbd](https://docs.openperf.app/deft/components/kbd): A keyboard key in a hint. - [Key value](https://docs.openperf.app/deft/components/key-value): Attributes of one event as a two-column list. - [List](https://docs.openperf.app/deft/components/list): Settings and records as rows with a label, a description and a control on the right. - [Logo](https://docs.openperf.app/deft/components/logo): The OpenPerf mark, drawn in the accent colour. - [Menu](https://docs.openperf.app/deft/components/menu): A list of actions behind a button. - [Meter](https://docs.openperf.app/deft/components/meter): Small bars inside rows and panels. No axes; the number beside each bar carries its value. - [Metric](https://docs.openperf.app/deft/components/metric): The headline numbers of a page, as tabs that pick a chart, as tiles or as cards. - [OTP input](https://docs.openperf.app/deft/components/otp-input): One cell per character of a one-time code, with paste and autofill. - [Panel](https://docs.openperf.app/deft/components/panel): A tinted block that groups a short message with its actions, or a few details. - [Popover](https://docs.openperf.app/deft/components/popover): A floating panel for settings and details tied to a button. - [Property](https://docs.openperf.app/deft/components/property): Labeled facts about one entity, grouped in the sidebar of its page. - [Scroll Area](https://docs.openperf.app/deft/components/scroll-area): A vertical scroll container with a thin scrollbar and faded edges. - [Section](https://docs.openperf.app/deft/components/section): A titled group of form rows, as on settings pages. - [Select](https://docs.openperf.app/deft/components/select): Picks one value, or several, from a short fixed list. - [Shell](https://docs.openperf.app/deft/components/shell): The frame of an application page, a sidebar next to the main content. - [Sidebar](https://docs.openperf.app/deft/components/sidebar): App navigation on the inset background, in sections of items with captions. - [Skeleton](https://docs.openperf.app/deft/components/skeleton): A placeholder in the shape of the content that is loading. - [Sparkline](https://docs.openperf.app/deft/components/sparkline): A trend without axes, always next to the number it explains. - [Spinner](https://docs.openperf.app/deft/components/spinner): Shows that something is loading where a skeleton doesn't fit. - [Standalone](https://docs.openperf.app/deft/components/standalone): A centered card for pages outside the application shell, such as sign-in, onboarding and errors. - [Stat](https://docs.openperf.app/deft/components/stat): A row of labeled numbers that summarizes what a panel shows. - [Step progress](https://docs.openperf.app/deft/components/step-progress): A thin bar of segments for a short flow of steps. - [Switch](https://docs.openperf.app/deft/components/switch): Turns a setting on or off, and the change applies at once. - [Table](https://docs.openperf.app/deft/components/table): Rows of things to scan and open. Inset and rounded, no dividers. - [Tabs](https://docs.openperf.app/deft/components/tabs): A segmented row that switches between panels of the same content, such as one snippet per client. - [Tag](https://docs.openperf.app/deft/components/tag): A static value on a control fill, optionally with its key. - [Textarea](https://docs.openperf.app/deft/components/textarea): Multi-line text on a control fill. Resizes vertically. - [Toast](https://docs.openperf.app/deft/components/toast): A short message about something that just happened, in the bottom-right corner. - [Toolbar](https://docs.openperf.app/deft/components/toolbar): A row of ghost buttons with arrow-key navigation. - [Tooltip](https://docs.openperf.app/deft/components/tooltip): Names an icon-only control on hover and focus. - [Waterfall](https://docs.openperf.app/deft/components/waterfall): Spans of a trace on its time axis, as a tree. ### Composed - [Data table](https://docs.openperf.app/deft/composed/data-table): A table described by column definitions. Sorting, selection, expandable rows and a layout that adapts to its container. - [Dialog confirm](https://docs.openperf.app/deft/composed/dialog-confirm): Asks for confirmation before a destructive or irreversible action, optionally by typing a word. ### Hooks - [useCopy](https://docs.openperf.app/deft/hooks/use-copy): Copies text to the clipboard and confirms it with a toast. ## Development ### Getting started - [Local development](https://docs.openperf.app/development/local-development): Run the stores in Docker and the services from the repository. - [Worktrees](https://docs.openperf.app/development/worktree): Run several git worktrees side by side, each with its own databases and hostnames. ### Conventions - [Project layout](https://docs.openperf.app/development/project-layout): Where code goes in the monorepo. - [Code style](https://docs.openperf.app/development/code-style): OpenPerf rules for code and tests, on top of the shared rules in AGENTS.md. - [Frontend](https://docs.openperf.app/development/frontend): File naming and styling rules for apps/web and packages/deft. - [Logging](https://docs.openperf.app/development/logging): How services write logs. ### Apps Conventions - [Nest apps](https://docs.openperf.app/development/nest-apps): Rules for NestJS apps, currently apps/api. - [Web apps](https://docs.openperf.app/development/web-apps): Rules for TanStack Start apps, currently apps/web. - [Bun apps](https://docs.openperf.app/development/bun-apps): Rules for Bun apps without a framework, currently apps/api-ingest, apps/worker-errors and apps/worker-jobs. ## Agent skills - [openperf](https://docs.openperf.app/.well-known/agent-skills/openperf/SKILL.md): Read the OpenPerf docs instead of answering from memory. OpenPerf error and performance monitoring: how to run and connect it, the Deft design system and development. Use when a task involves OpenPerf: how it works, how to set it up or configure it, or its API. ## Agent resources - [llms-full.txt](https://docs.openperf.app/llms-full.txt): The full Markdown of every page in one file. - [Page Markdown](https://docs.openperf.app/index.md): Append `.md` to any page URL to fetch that page as raw Markdown. - [JSON API](https://docs.openperf.app/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://docs.openperf.app/openapi.json. - [Agent skills](https://docs.openperf.app/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes. - [API catalog](https://docs.openperf.app/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here. - [AI catalog](https://docs.openperf.app/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs). - [agent-readability.json](https://docs.openperf.app/agent-readability.json): Manifest of every agent-facing artifact on this site. - [Sitemap](https://docs.openperf.app/sitemap.xml): Every indexable page URL with its last-modified date.