Something Went Wrong

An app error page with a small 1-bit dithered ?! glyph, Try again that fails once with a shake and then recovers into a check, a copyable error details panel and a quiet Report this link.

akaerror·500·something went wrong

Install

Run this in any project set up for the shadcn CLI. It copies the Something Went Wrong source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/something-went-wrong.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { SomethingWentWrong } from "@/components/something-went-wrong";

export default function Page() {
  return <SomethingWentWrong />;
}

Built with

A free React block in the Empty & Error collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: button, collapsible
npm: lucide-react, motion

Props

Read from the Something Went Wrong source. Everything is optional unless it says required.

Prop	Type	Default
title	string	"Something went wrong"
description	string	"We couldn’t load this report. Your data is safe, and we’ve logged the error."
stillFailingDescription	string	"Still not loading. This usually clears up in a few minutes."
details	ErrorDetails	{ id: "err_7Hq2kV9x", stack: [] }
recovered	RecoveredCopy	{ title: "You’re back", description: "The report loaded. Nothing was lost.", actionLabel: "Continue" }
breadcrumb	string[]	["Reports"]
product	string	"Ridgeline"
userInitials	string	"AL"
onRetry	() => Promise<void> \| void	—
onGoToDashboard	() => void	—
onReport	(errorId: string) => void	—
onContinue	() => void	—
className	string	—

More in Empty & Error

273

First Project

The empty Projects page of an app: one line on what projects are for, a Create button with its shortcut, a guide link and three templates. Creating one flies the icon into the first row of a real project list.

275

Request Access

The page you hit when a doc is private: who you are signed in as, a switch-account menu, an optional note and a Request access button. It then shows who the request went to, when, and a resend that unlocks after a countdown.

Prop

Type

Default

title

string

"Something went wrong"

description

string

"We couldn’t load this report. Your data is safe, and we’ve logged the error."

stillFailingDescription

string

"Still not loading. This usually clears up in a few minutes."

details

ErrorDetails

{ id: "err_7Hq2kV9x", stack: [] }

recovered

RecoveredCopy

{ title: "You’re back", description: "The report loaded. Nothing was lost.", actionLabel: "Continue" }

breadcrumb

string[]

["Reports"]

product

string

"Ridgeline"

userInitials

string

"AL"

onRetry

() => Promise<void> | void

—

onGoToDashboard

() => void

—

onReport

(errorId: string) => void

—

onContinue

() => void

—

className

string

—

First Project

275