This repository was archived by the owner on Jul 20, 2022. It is now read-only.
File tree Expand file tree Collapse file tree 3 files changed +79
-1
lines changed Expand file tree Collapse file tree 3 files changed +79
-1
lines changed Original file line number Diff line number Diff line change
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
+ ```
Original file line number Diff line number Diff line change 1
1
import type { LoaderFunction } from "remix" ;
2
2
3
3
export const loader : LoaderFunction = ( ) => {
4
- user . test ( ) ;
4
+ hello . remix ( ) ;
5
5
return null ;
6
6
} ;
7
7
You can’t perform that action at this time.
0 commit comments