https://github.com/rm-hull/chakra-error-fallback
A type-safe React component for handling errors in Chakra UI applications, providing a fallback UI when something goes wrong.
https://github.com/rm-hull/chakra-error-fallback
chakra-ui error-handling react stack-trace
Last synced: 20 days ago
JSON representation
A type-safe React component for handling errors in Chakra UI applications, providing a fallback UI when something goes wrong.
- Host: GitHub
- URL: https://github.com/rm-hull/chakra-error-fallback
- Owner: rm-hull
- License: mit
- Created: 2025-11-01T18:38:23.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-01-12T07:47:36.000Z (28 days ago)
- Last Synced: 2026-01-12T17:46:33.293Z (28 days ago)
- Topics: chakra-ui, error-handling, react, stack-trace
- Language: TypeScript
- Homepage: https://www.destructuring-bind.org/chakra-error-fallback/
- Size: 2.36 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Chakra Error Fallback
A type-safe React component for handling errors in Chakra UI applications, providing a fallback UI when something goes wrong.
### Why use this?
- **Graceful Error Handling** - Prevents your application from crashing and provides a user-friendly error message.
- **Customizable** - Easily customize the appearance of the error fallback to match your application's theme.
- **Developer Friendly** - Provides detailed error information in development mode to help with debugging.
- **SSR Compatible** - Works seamlessly with server-side rendering.
- **Expanded Stack Frames** - Stack frames are automatically expanded for better readability. This feature requires `build.sourcemap=true` in your Vite configuration to function correctly.
- **Colorized Stack Traces** - Stack traces are colorized to improve readability and quickly identify different parts of the trace.
## Quick Start
```bash
npm install @rm-hull/chakra-error-fallback
# or
yarn add @rm-hull/chakra-error-fallback
```
## Basic Usage
Wrap your application or a part of it with the `ErrorBoundary` component from `react-error-boundary` and provide the `ErrorFallback` component to the `fallbackRender` prop.
```tsx
import { ErrorBoundary } from "react-error-boundary";
import { ErrorFallback } from "@rm-hull/chakra-error-fallback";
import { ChakraProvider } from "@chakra-ui/react";
function App() {
return (
);
}
```
See the [**Storybook**](https://www.destructuring-bind.org/chakra-error-fallback) for further usage details.
## Contributor Guidelines
### Releasing a New Version
This project uses [**Changesets**](https://github.com/changesets/changesets) to manage versioning and automated npm publishing.
#### How the release process works
1. **Create a changeset on your feature branch**
When you’ve made changes you want to release, first create a new branch (not on `main`):
```bash
git checkout -b feature/my-change
```
Make your changes, then run:
```bash
yarn changeset
```
You’ll be prompted to:
- Choose the type of version bump (patch, minor, or major)
- Write a short summary of the change
This command creates a markdown file in the `.changeset/` directory describing your upcoming release.
2. **Commit and push your feature branch**
```bash
git add .
git commit -m "feat: A short description of the change"
git push -u origin feature/my-change
```
3. **Merge the feature branch into `main`**
- Once your PR is reviewed, merge it into `main`. The `.changeset` file must be present in `main` for the next step.
4. **Automatic version bump and publish**
- When changes are pushed to `main`, GitHub Actions will automatically:
- Build the package
- Apply version bumps based on the `.changeset` file
- Update the changelog
- Publish the new version to npm as [`@rm-hull/chakra-error-fallback`](https://www.npmjs.com/package/@rm-hull/chakra-error-fallback)
5. **That's it!**
Your package is now live on npm with an updated version and changelog.
---
#### Notes
- The npm publish step is automated via GitHub Actions (`.github/workflows/ci.yml`).
- Ensure your `NPM_TOKEN` secret is configured in the repository settings under **Settings → Secrets → Actions**.
- Changesets should always be created on feature branches, not directly on `main`.
- No pull requests are created for version bumps; merging your feature branch into `main` triggers the release automatically.
---