A React component for standardized error fallback
npm install @rm-hull/chakra-error-fallback!NPM Version
!Coveralls
!NPM Downloads
A type-safe React component for handling errors in Chakra UI applications, providing a fallback UI when something goes wrong.
- 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.
``bash`
npm install @rm-hull/chakra-error-fallbackor
yarn add @rm-hull/chakra-error-fallback
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 for further usage details.
This project uses 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@rm-hull/chakra-error-fallback
- Update the changelog
- Publish the new version to npm as
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).NPM_TOKEN
- Ensure your secret is configured in the repository settings under Settings → Secrets → Actions.main
- Changesets should always be created on feature branches, not directly on .main` triggers the release automatically.
- No pull requests are created for version bumps; merging your feature branch into
---