Skip to content
codexa

SaaS · React

Error monitoring

Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.

Error monitoring starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A dark, developer-first product site for an error monitoring service: an issues feed mock, stats, features, a release-tracking split, three setup steps, usage-based monthly pricing, quotes and an FAQ. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/saas-error-monitoring

src/site.ts
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = {  "brand": "Faultline",  "nav": [    {      "label": "Features",      "href": "#features"    },    {      "label": "Setup",      "href": "#setup"    },    {      "label": "Pricing",      "href": "#pricing"    },    {      "label": "FAQ",      "href": "#faq"    }  ],  "navCta": {    "label": "Get an API key",    "href": "#start"  },  "sections": [    {      "kind": "hero",      "variant": "center",      "eyebrow": "Error monitoring for small engineering teams",      "title": "Know what broke, for whom, and which deploy did it.",      "text": "Faultline groups exceptions into issues, attaches the stack trace and the request that caused it, and pings the person who last touched the code.",      "primary": {        "label": "Start sending errors",        "href": "#setup"      },      "secondary": {        "label": "See pricing",        "href": "#pricing"      },      "visual": {        "type": "mock",        "title": "checkout-api · production · last 24h",        "rows": [          {            "label": "TypeError: cannot read 'total' of undefined  cart.ts:88",            "value": "1,204 events",            "tone": "#f87171"          },          {            "label": "TimeoutError: payments upstream exceeded 10s",            "value": "312 events",            "tone": "#fbbf24"          },          {            "label": "ValidationError: postcode format  address.ts:41",            "value": "96 events",            "tone": "#fbbf24"          },          {            "label": "Regression in v2.14.0: 404 on /api/orders/:id",            "value": "41 events",            "tone": "#f87171"          },          {            "label": "Resolved in v2.14.1: null session on refresh",            "value": "0 since deploy",            "tone": "#a3e635"          }        ],        "footer": "Assigned to @ana by code ownership · alert sent to #oncall"      },      "note": "5,000 events a month free. SDKs for JavaScript, Python, Go, Ruby and PHP."    },    {      "kind": "stats",      "items": [        {          "value": "< 1 min",          "label": "From exception to alert"        },        {          "value": "5",          "label": "Official SDKs"        },        {          "value": "90 days",          "label": "Event retention on Team"        },        {          "value": "1 line",          "label": "To initialise most SDKs"        }      ]    },    {      "kind": "features",      "id": "features",      "eyebrow": "Features",      "title": "Less noise, more context",      "columns": 3,      "items": [        {          "title": "Smart grouping",          "text": "Fingerprints by stack frame, not message text, so one bug is one issue.",          "icon": "box"        },        {          "title": "Source maps and symbols",          "text": "Upload at build time and read minified traces as your original code.",          "icon": "code"        },        {          "title": "Breadcrumbs",          "text": "See the clicks, requests and logs that led up to the crash.",          "icon": "arrow"        },        {          "title": "Alert rules",          "text": "Alert on new issues, regressions or spikes, to Slack, email or a webhook.",          "icon": "bolt"        },        {          "title": "Data scrubbing",          "text": "Passwords, tokens and card numbers are stripped in the SDK before anything is sent.",          "icon": "shield"        },        {          "title": "Performance traces",          "text": "Slow endpoints and database queries sit next to the errors they cause.",          "icon": "chart"        }      ]    },    {      "kind": "split",      "eyebrow": "Releases",      "title": "Tie every error to a deploy",      "text": "Tag releases from CI and Faultline marks which issues are new, which came back, and which a deploy fixed.",      "bullets": [        "Suspect commits from your Git history",        "Auto-resolve when a fix ships",        "Release health by crash-free sessions"      ],      "visual": {        "type": "mock",        "title": "Release v2.14.1",        "rows": [          {            "label": "New issues",            "value": "0",            "tone": "#a3e635"          },          {            "label": "Regressions",            "value": "1",            "tone": "#fbbf24"          },          {            "label": "Resolved by this release",            "value": "4",            "tone": "#a3e635"          },          {            "label": "Crash-free sessions",            "value": "99.82%",            "tone": "#a3e635"          }        ]      },      "reverse": true    },    {      "kind": "steps",      "id": "setup",      "eyebrow": "Setup",      "title": "Three steps, one deploy",      "items": [        {          "title": "Install the SDK",          "text": "npm install @faultline/node, or the package for your language."        },        {          "title": "Initialise with your key",          "text": "Faultline.init({ dsn }) at startup. Unhandled errors are captured from then on."        },        {          "title": "Upload source maps in CI",          "text": "Add one step to your build so traces point at real files and lines."        }      ]    },    {      "kind": "pricing",      "id": "pricing",      "eyebrow": "Pricing",      "title": "Priced by events, not seats",      "text": "Every plan includes unlimited team members. Monthly billing; spike protection on by default.",      "plans": [        {          "name": "Hobby",          "price": "$0",          "period": "/month",          "text": "Side projects and evaluation.",          "features": [            "5,000 events / month",            "7-day retention",            "Email alerts"          ],          "cta": {            "label": "Start free",            "href": "#start"          }        },        {          "name": "Team",          "price": "$29",          "period": "/month",          "text": "Production apps with a small team.",          "features": [            "100,000 events / month",            "90-day retention",            "Slack and webhook alerts",            "Release tracking"          ],          "featured": true,          "cta": {            "label": "Start a 14-day trial",            "href": "#start"          }        },        {          "name": "Business",          "price": "$99",          "period": "/month",          "text": "Several services and on-call rotations.",          "features": [            "500,000 events / month",            "Performance traces",            "SAML single sign-on",            "Audit log"          ],          "cta": {            "label": "Choose Business",            "href": "#start"          }        }      ]    },    {      "kind": "quotes",      "eyebrow": "From engineers",      "title": "Quieter on-call weeks",      "items": [        {          "quote": "We went from 400 alerts a day to about a dozen real issues once grouping kicked in.",          "name": "Priyanka S.",          "role": "Backend lead"        },        {          "quote": "Suspect commits means the right person sees the bug before standup.",          "name": "Dmitri L.",          "role": "Engineering manager"        },        {          "quote": "Setup was literally two lines and a CI step. I expected an afternoon.",          "name": "Grace T.",          "role": "Solo founder"        }      ]    },    {      "kind": "faq",      "id": "faq",      "eyebrow": "FAQ",      "title": "Before you install",      "items": [        {          "q": "What happens if I go over my event quota?",          "a": "Extra events are rate-limited, not billed, unless you turn on pay-as-you-go. You get an email at 80%."        },        {          "q": "Where is event data stored?",          "a": "Choose a US or EU region when you create a project. Data stays in that region."        },        {          "q": "Can I keep personal data out?",          "a": "Yes. The SDKs scrub common sensitive fields by default and you can add your own rules."        },        {          "q": "Is there a self-hosted version?",          "a": "Not today. Export via the API if you need a copy of your data."        }      ]    },    {      "kind": "cta",      "id": "start",      "title": "Catch the next bug before a customer reports it",      "text": "Create a project, copy your key, and send a test error in under five minutes.",      "primary": {        "label": "Follow the setup",        "href": "#setup"      },      "secondary": {        "label": "Compare plans",        "href": "#pricing"      }    }  ],  "footer": {    "text": "Error monitoring and release health for small engineering teams.",    "columns": [      {        "title": "Product",        "links": [          "Issues",          "Releases",          "Performance"        ]      },      {        "title": "Developers",        "links": [          "Docs",          "SDKs",          "API",          "Status"        ]      }    ],    "legal": "© Faultline. Sample content: replace it in src/site.ts."  }};

Remix

Remix this template

Describe what to change and the agent starts from Error monitoring's files. The box is already started for you: finish “Start from Error monitoring and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

All templates

Build on Error monitoring

Create a free account, start from this template, and ask the AI agent to turn it into your app.