Skip to content
This repository was archived by the owner on Jul 20, 2022. It is now read-only.

Commit 80f9f7a

Browse files
add simple readme
1 parent a59d7c0 commit 80f9f7a

File tree

3 files changed

+79
-1
lines changed

3 files changed

+79
-1
lines changed

README.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Remix Crash
2+
3+
A root development `<ErrorBoundary />` for your Remix apps.
4+
5+
![Remix Crash](./assets/screenshot.png)
6+
7+
## Overview
8+
9+
Remix Crash is a development overlay to simplify debugging during your development process.
10+
11+
**Warning**: Remix Crash is still quite recent, use at your own risk.
12+
13+
## Getting Started
14+
15+
### Installation
16+
17+
```bash
18+
npm install remix-crash
19+
```
20+
21+
### Setup
22+
23+
#### In `app/root.tsx`
24+
25+
```jsx
26+
export default function App() {
27+
return {
28+
/* Your app */
29+
};
30+
}
31+
32+
// Add this line
33+
export { ErrorBoundary } from "remix-crash";
34+
```
35+
36+
#### In `app/routes/_remix-crash.jsx`
37+
38+
```jsx
39+
export { loader, action } from "remix-crash";
40+
```
41+
42+
#### All set
43+
44+
You should be all set from here.
45+
46+
## Advanced
47+
48+
### Production Error Boundary
49+
50+
While Remix Crash provides a simple Production Error Boundary with less information. You might want to customize that page.
51+
52+
If you choose to do so, you will just need to replace the `<ErrorBoundary />` component in your `app/root.jsx`:
53+
54+
```jsx
55+
// app/root.jsx
56+
// 1. Import the ErrorBoundary
57+
import { DevErrorBoundary } from "remix-crash";
58+
59+
export default function App() {
60+
return {
61+
/* Your app */
62+
};
63+
}
64+
65+
// 2. Define your custom error boundary while using Remix Crash for development environment
66+
export function ErrorBoundary({ error }) {
67+
if (process.env.NODE_ENV === "development") {
68+
return <DevErrorBoundary error={error} />;
69+
}
70+
71+
// here goes your custom production Error Boundary
72+
return (
73+
<div>
74+
<p>Oops something very wrong happened...</p>
75+
</div>
76+
);
77+
}
78+
```

assets/screenshot.png

1.19 MB
Loading

example/app/routes/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { LoaderFunction } from "remix";
22

33
export const loader: LoaderFunction = () => {
4-
user.test();
4+
hello.remix();
55
return null;
66
};
77

0 commit comments

Comments
 (0)