Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xstevenyung/remix-crash
Get better insight on why your Remix app crashed during development 💥
https://github.com/xstevenyung/remix-crash
debugging dev-overlay remix
Last synced: about 2 months ago
JSON representation
Get better insight on why your Remix app crashed during development 💥
- Host: GitHub
- URL: https://github.com/xstevenyung/remix-crash
- Owner: xstevenyung
- Archived: true
- Created: 2022-02-03T22:09:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-19T19:32:08.000Z (over 2 years ago)
- Last Synced: 2024-08-04T01:13:08.199Z (5 months ago)
- Topics: debugging, dev-overlay, remix
- Language: TypeScript
- Homepage:
- Size: 1.27 MB
- Stars: 47
- Watchers: 1
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-remix - remix-crash - Get better insight on why your Remix app crashed during development 💥. (Utility)
- Awesome-Remix - remix-crash
- awesome-remix - remix-crash - Get better insight on why your Remix app crashed during development 💥. (Utility)
README
> ⚠️ DEPRECATED due to a lack of time, Remix Crash is deprecated.
# Remix Crash
A root development `` for your Remix apps.
## Overview
Remix Crash is a development overlay to simplify debugging during your development process.
**Warning**: Remix Crash is still quite recent, use at your own risk.
## Getting Started
### Installation
```bash
npm install remix-crash
```
### Setup
#### In `app/root.tsx`
```jsx
export default function App() {
return {
/* Your app */
};
}
// Add this line
export { ErrorBoundary } from "remix-crash";
```
#### In `app/routes/_remix-crash.jsx`
```jsx
export { loader, action } from "remix-crash/server";
```
#### All set
You should be all set from here.
## Advanced
### Production Error Boundary
While Remix Crash provides a simple Production Error Boundary with less information. You might want to customize that page.
If you choose to do so, you will just need to replace the `` component in your `app/root.jsx`:
```jsx
// app/root.jsx
// 1. Import the ErrorBoundary
import { DevErrorBoundary } from "remix-crash";
export default function App() {
return {
/* Your app */
};
}
// 2. Define your custom error boundary while using Remix Crash for development environment
export function ErrorBoundary({ error }) {
if (process.env.NODE_ENV === "development") {
return ;
}
// here goes your custom production Error Boundary
return (
Oops something very wrong happened...
);
}
```