Build on the supported package contract
Use absolutejs-error-boundaries-example through its supported public entry points.
absolutejs-error-boundaries-example
absolutejs-error-boundaries-examplev0.0.1betaDev ToolsA demonstration of AbsoluteJS's convention-based error boundary system across React, Vue, Svelte, and Angular — all running in a single project with server-side rendering.
#Installation
BASH
# Private workspace project: ~/abs/examples/error-boundaries#Capabilities
Overview
A demonstration of AbsoluteJS's convention-based error boundary system across React, Vue, Svelte, and Angular — all running in a single project with server-side rendering.
What This Shows
AbsoluteJS uses a file-naming convention to automatically handle errors during SSR:
Convention File — Purpose
error.{tsx,vue,svelte,ts} — Default error boundary for a framework
Show 4 more
PageName.error.tsx — Page-specific error boundary (overrides default)
not-found.{tsx,vue,svelte,ts} — 404 fallback page
loading.{tsx,vue,svelte,ts} — Loading state fallback — coming soon
When a component throws during server-side rendering, AbsoluteJS catches the error and renders the matching error boundary with the error details.
Routes
Route — Description
/ — Landing page
/react — React page (renders normally)
Show 7 more
/broken-react — React page that throws an error
/vue — Vue page (renders normally)
/broken-vue — Vue page that throws an error
/svelte — Svelte page (renders normally)
/broken-svelte — Svelte page that throws an error
/angular — Angular page (renders normally)
/broken-angular — Angular page that throws an error
How It Works
Error Convention Files
Each framework has its own error convention file that receives the thrown error as a prop:
React — error.tsx
Show 7 more
Vue — error.vue
Svelte — error.svelte
Angular — error.ts
Page-Specific Overrides
Name an error file after a page to override the default for that specific route:
Loading Convention (Coming Soon)
Loading state convention files will follow the same pattern, providing fallback UI while pages are loading during SSR streaming:
Tech Stack
AbsoluteJS — full-stack framework
Elysia — backend server
React 19, Vue 3, Svelte 5, Angular 21
Show 1 more
TypeScript
Outcomes
What you can build
Hardening checklist
Production guidance
Make every external boundary explicitPin the deployed absolutejs-error-boundaries-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.
Follow in order
Troubleshooting path
1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-error-boundaries-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.
#Getting Started
Partial snippetWorking example for Getting Started.
BASH
# install dependencies
npm install
# start the dev server
npm run dev#Error Convention Files
Partial snippetEach framework has its own error convention file that receives the thrown error as a prop:
TS
export default function ErrorPage({ error }: { error: { message: string; stack?: string } }) {
return <div>{error.message}</div>;
}#Package commands
Scripts declared by this package manifest.
bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.