@admin-layout/tailwind-ui 12.2.4-alpha.22 → 12.2.4-alpha.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts +3 -0
- package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts.map +1 -1
- package/lib/components/ErrorHandlers/RemixErrorBoundary.js +174 -81
- package/lib/components/ErrorHandlers/RemixErrorBoundary.js.map +1 -1
- package/lib/components/ErrorHandlers/SPAErrorBoundary.d.ts +3 -0
- package/lib/components/ErrorHandlers/SPAErrorBoundary.d.ts.map +1 -1
- package/lib/components/ErrorHandlers/SPAErrorBoundary.js +145 -23
- package/lib/components/ErrorHandlers/SPAErrorBoundary.js.map +1 -1
- package/package.json +3 -3
|
@@ -4,6 +4,9 @@ import * as React from 'react';
|
|
|
4
4
|
* This is specifically for Remix route errors (404s, loader errors, etc.)
|
|
5
5
|
* Different from React's ErrorBoundary which handles component errors
|
|
6
6
|
*
|
|
7
|
+
* Uses inline styles as fallback to ensure the error page renders correctly
|
|
8
|
+
* even when Tailwind CSS fails to load or during hydration error recovery.
|
|
9
|
+
*
|
|
7
10
|
* Usage in root.tsx or any route file:
|
|
8
11
|
* export { RemixErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
|
|
9
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemixErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"RemixErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,sBA2KjC"}
|
|
@@ -1,36 +1,87 @@
|
|
|
1
|
-
import*as React from'react';import {useRouteError,
|
|
1
|
+
import*as React from'react';import {useRouteError,isRouteErrorResponse}from'@remix-run/react';import {logger}from'@cdm-logger/client';// Inline styles as fallback when Tailwind CSS is unavailable (e.g., during SSR error recovery)
|
|
2
|
+
const containerStyle = {
|
|
3
|
+
display: 'flex',
|
|
4
|
+
minHeight: '100vh',
|
|
5
|
+
alignItems: 'center',
|
|
6
|
+
justifyContent: 'center',
|
|
7
|
+
backgroundColor: '#f9fafb',
|
|
8
|
+
padding: '3rem 1rem',
|
|
9
|
+
fontFamily: 'system-ui, -apple-system, sans-serif'
|
|
10
|
+
};
|
|
11
|
+
const iconContainerStyle = {
|
|
12
|
+
display: 'flex',
|
|
13
|
+
width: '4rem',
|
|
14
|
+
height: '4rem',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
justifyContent: 'center',
|
|
17
|
+
borderRadius: '9999px',
|
|
18
|
+
backgroundColor: '#fee2e2',
|
|
19
|
+
flexShrink: 0
|
|
20
|
+
};
|
|
21
|
+
const svgStyle = {
|
|
22
|
+
width: '2rem',
|
|
23
|
+
height: '2rem',
|
|
24
|
+
color: '#ef4444'
|
|
25
|
+
};
|
|
26
|
+
const buttonStyle = {
|
|
27
|
+
display: 'inline-flex',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
borderRadius: '0.375rem',
|
|
30
|
+
backgroundColor: '#2563eb',
|
|
31
|
+
padding: '0.5rem 1rem',
|
|
32
|
+
fontSize: '0.875rem',
|
|
33
|
+
fontWeight: 500,
|
|
34
|
+
color: '#ffffff',
|
|
35
|
+
border: 'none',
|
|
36
|
+
cursor: 'pointer'
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
2
39
|
* Remix Route ErrorBoundary Component
|
|
3
40
|
* This is specifically for Remix route errors (404s, loader errors, etc.)
|
|
4
41
|
* Different from React's ErrorBoundary which handles component errors
|
|
5
42
|
*
|
|
43
|
+
* Uses inline styles as fallback to ensure the error page renders correctly
|
|
44
|
+
* even when Tailwind CSS fails to load or during hydration error recovery.
|
|
45
|
+
*
|
|
6
46
|
* Usage in root.tsx or any route file:
|
|
7
47
|
* export { RemixErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
|
|
8
48
|
*/
|
|
9
49
|
function RemixErrorBoundary() {
|
|
10
50
|
const error = useRouteError();
|
|
11
|
-
useNavigate();
|
|
12
51
|
React.useEffect(() => {
|
|
13
52
|
logger.error('Route Error:', error);
|
|
14
53
|
console.error('Route Error:', error);
|
|
15
54
|
}, [error]);
|
|
16
55
|
const handleGoHome = () => {
|
|
17
|
-
// Use
|
|
18
|
-
// This is more reliable than navigate() + reload() which can have race conditions
|
|
56
|
+
// Use direct location change instead of useNavigate to avoid router context issues
|
|
19
57
|
window.location.href = '/';
|
|
20
58
|
};
|
|
21
59
|
if (isRouteErrorResponse(error)) {
|
|
22
60
|
return React.createElement("div", {
|
|
23
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
|
|
61
|
+
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
|
|
62
|
+
style: containerStyle
|
|
24
63
|
}, React.createElement("div", {
|
|
25
|
-
className: "w-full max-w-md space-y-8 text-center"
|
|
64
|
+
className: "w-full max-w-md space-y-8 text-center",
|
|
65
|
+
style: {
|
|
66
|
+
maxWidth: '28rem',
|
|
67
|
+
width: '100%',
|
|
68
|
+
textAlign: 'center'
|
|
69
|
+
}
|
|
26
70
|
}, React.createElement("div", {
|
|
27
|
-
className: "mb-4 flex justify-center"
|
|
71
|
+
className: "mb-4 flex justify-center",
|
|
72
|
+
style: {
|
|
73
|
+
display: 'flex',
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
marginBottom: '1rem'
|
|
76
|
+
}
|
|
28
77
|
}, React.createElement("div", {
|
|
29
|
-
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
|
|
78
|
+
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
|
|
79
|
+
style: iconContainerStyle
|
|
30
80
|
}, React.createElement("svg", {
|
|
31
81
|
className: "h-8 w-8 text-red-500",
|
|
32
82
|
width: "32",
|
|
33
83
|
height: "32",
|
|
84
|
+
style: svgStyle,
|
|
34
85
|
fill: "none",
|
|
35
86
|
viewBox: "0 0 24 24",
|
|
36
87
|
stroke: "currentColor"
|
|
@@ -40,84 +91,126 @@ function RemixErrorBoundary() {
|
|
|
40
91
|
strokeWidth: 2,
|
|
41
92
|
d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
42
93
|
})))), React.createElement("div", null, React.createElement("h1", {
|
|
43
|
-
className: "text-6xl font-bold text-gray-900"
|
|
94
|
+
className: "text-6xl font-bold text-gray-900",
|
|
95
|
+
style: {
|
|
96
|
+
fontSize: '3.75rem',
|
|
97
|
+
fontWeight: 700,
|
|
98
|
+
color: '#111827'
|
|
99
|
+
}
|
|
44
100
|
}, error.status), React.createElement("h2", {
|
|
45
|
-
className: "mt-2 text-2xl font-bold tracking-tight text-gray-900"
|
|
101
|
+
className: "mt-2 text-2xl font-bold tracking-tight text-gray-900",
|
|
102
|
+
style: {
|
|
103
|
+
marginTop: '0.5rem',
|
|
104
|
+
fontSize: '1.5rem',
|
|
105
|
+
fontWeight: 700,
|
|
106
|
+
color: '#111827'
|
|
107
|
+
}
|
|
46
108
|
}, error.statusText), error.data && React.createElement("p", {
|
|
47
|
-
className: "mt-2 text-sm text-gray-600"
|
|
109
|
+
className: "mt-2 text-sm text-gray-600",
|
|
110
|
+
style: {
|
|
111
|
+
marginTop: '0.5rem',
|
|
112
|
+
fontSize: '0.875rem',
|
|
113
|
+
color: '#4b5563'
|
|
114
|
+
}
|
|
48
115
|
}, error.data)), React.createElement("div", {
|
|
49
|
-
className: "mt-6"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}, "Go back home"))));
|
|
54
|
-
} else if (error instanceof Error) {
|
|
55
|
-
return React.createElement("div", {
|
|
56
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
|
|
57
|
-
}, React.createElement("div", {
|
|
58
|
-
className: "w-full max-w-2xl space-y-8"
|
|
59
|
-
}, React.createElement("div", {
|
|
60
|
-
className: "mb-4 flex justify-center"
|
|
61
|
-
}, React.createElement("div", {
|
|
62
|
-
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
|
|
63
|
-
}, React.createElement("svg", {
|
|
64
|
-
className: "h-8 w-8 text-red-500",
|
|
65
|
-
fill: "none",
|
|
66
|
-
viewBox: "0 0 24 24",
|
|
67
|
-
stroke: "currentColor"
|
|
68
|
-
}, React.createElement("path", {
|
|
69
|
-
strokeLinecap: "round",
|
|
70
|
-
strokeLinejoin: "round",
|
|
71
|
-
strokeWidth: 2,
|
|
72
|
-
d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
73
|
-
})))), React.createElement("div", {
|
|
74
|
-
className: "text-center"
|
|
75
|
-
}, React.createElement("h1", {
|
|
76
|
-
className: "text-3xl font-bold tracking-tight text-gray-900"
|
|
77
|
-
}, "Application Error"), React.createElement("p", {
|
|
78
|
-
className: "mt-2 text-lg text-red-600"
|
|
79
|
-
}, error.message), error.stack && process.env.NODE_ENV !== 'production' && React.createElement("details", {
|
|
80
|
-
className: "mt-4 text-left"
|
|
81
|
-
}, React.createElement("summary", {
|
|
82
|
-
className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900"
|
|
83
|
-
}, "Stack trace (development only)"), React.createElement("pre", {
|
|
84
|
-
className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96"
|
|
85
|
-
}, error.stack))), React.createElement("div", {
|
|
86
|
-
className: "mt-6 text-center"
|
|
87
|
-
}, React.createElement("button", {
|
|
88
|
-
onClick: handleGoHome,
|
|
89
|
-
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
|
90
|
-
}, "Go back home"))));
|
|
91
|
-
} else {
|
|
92
|
-
return React.createElement("div", {
|
|
93
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
|
|
94
|
-
}, React.createElement("div", {
|
|
95
|
-
className: "w-full max-w-md space-y-8 text-center"
|
|
96
|
-
}, React.createElement("div", {
|
|
97
|
-
className: "mb-4 flex justify-center"
|
|
98
|
-
}, React.createElement("div", {
|
|
99
|
-
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
|
|
100
|
-
}, React.createElement("svg", {
|
|
101
|
-
className: "h-8 w-8 text-red-500",
|
|
102
|
-
width: "32",
|
|
103
|
-
height: "32",
|
|
104
|
-
fill: "none",
|
|
105
|
-
viewBox: "0 0 24 24",
|
|
106
|
-
stroke: "currentColor"
|
|
107
|
-
}, React.createElement("path", {
|
|
108
|
-
strokeLinecap: "round",
|
|
109
|
-
strokeLinejoin: "round",
|
|
110
|
-
strokeWidth: 2,
|
|
111
|
-
d: "M6 18L18 6M6 6l12 12"
|
|
112
|
-
})))), React.createElement("div", null, React.createElement("h1", {
|
|
113
|
-
className: "text-3xl font-bold tracking-tight text-gray-900"
|
|
114
|
-
}, "Unknown Error"), React.createElement("p", {
|
|
115
|
-
className: "mt-2 text-sm text-gray-600"
|
|
116
|
-
}, "An unexpected error occurred. Please try again later.")), React.createElement("div", {
|
|
117
|
-
className: "mt-6"
|
|
116
|
+
className: "mt-6",
|
|
117
|
+
style: {
|
|
118
|
+
marginTop: '1.5rem'
|
|
119
|
+
}
|
|
118
120
|
}, React.createElement("button", {
|
|
119
121
|
onClick: handleGoHome,
|
|
120
|
-
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
|
122
|
+
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
|
|
123
|
+
style: buttonStyle
|
|
121
124
|
}, "Go back home"))));
|
|
122
125
|
}
|
|
126
|
+
const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
|
|
127
|
+
const errorStack = error instanceof Error ? error.stack : undefined;
|
|
128
|
+
return React.createElement("div", {
|
|
129
|
+
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
|
|
130
|
+
style: containerStyle
|
|
131
|
+
}, React.createElement("div", {
|
|
132
|
+
className: "w-full max-w-2xl space-y-8",
|
|
133
|
+
style: {
|
|
134
|
+
maxWidth: '42rem',
|
|
135
|
+
width: '100%'
|
|
136
|
+
}
|
|
137
|
+
}, React.createElement("div", {
|
|
138
|
+
className: "mb-4 flex justify-center",
|
|
139
|
+
style: {
|
|
140
|
+
display: 'flex',
|
|
141
|
+
justifyContent: 'center',
|
|
142
|
+
marginBottom: '1rem'
|
|
143
|
+
}
|
|
144
|
+
}, React.createElement("div", {
|
|
145
|
+
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
|
|
146
|
+
style: iconContainerStyle
|
|
147
|
+
}, React.createElement("svg", {
|
|
148
|
+
className: "h-8 w-8 text-red-500",
|
|
149
|
+
width: "32",
|
|
150
|
+
height: "32",
|
|
151
|
+
style: svgStyle,
|
|
152
|
+
fill: "none",
|
|
153
|
+
viewBox: "0 0 24 24",
|
|
154
|
+
stroke: "currentColor"
|
|
155
|
+
}, React.createElement("path", {
|
|
156
|
+
strokeLinecap: "round",
|
|
157
|
+
strokeLinejoin: "round",
|
|
158
|
+
strokeWidth: 2,
|
|
159
|
+
d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
160
|
+
})))), React.createElement("div", {
|
|
161
|
+
className: "text-center",
|
|
162
|
+
style: {
|
|
163
|
+
textAlign: 'center'
|
|
164
|
+
}
|
|
165
|
+
}, React.createElement("h1", {
|
|
166
|
+
className: "text-3xl font-bold tracking-tight text-gray-900",
|
|
167
|
+
style: {
|
|
168
|
+
fontSize: '1.875rem',
|
|
169
|
+
fontWeight: 700,
|
|
170
|
+
color: '#111827'
|
|
171
|
+
}
|
|
172
|
+
}, "Application Error"), React.createElement("p", {
|
|
173
|
+
className: "mt-2 text-lg text-red-600",
|
|
174
|
+
style: {
|
|
175
|
+
marginTop: '0.5rem',
|
|
176
|
+
fontSize: '1.125rem',
|
|
177
|
+
color: '#dc2626'
|
|
178
|
+
}
|
|
179
|
+
}, errorMessage), errorStack && process.env.NODE_ENV !== 'production' && React.createElement("details", {
|
|
180
|
+
className: "mt-4 text-left",
|
|
181
|
+
style: {
|
|
182
|
+
marginTop: '1rem',
|
|
183
|
+
textAlign: 'left'
|
|
184
|
+
}
|
|
185
|
+
}, React.createElement("summary", {
|
|
186
|
+
className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900",
|
|
187
|
+
style: {
|
|
188
|
+
cursor: 'pointer',
|
|
189
|
+
fontSize: '0.875rem',
|
|
190
|
+
fontWeight: 500,
|
|
191
|
+
color: '#374151'
|
|
192
|
+
}
|
|
193
|
+
}, "Stack trace (development only)"), React.createElement("pre", {
|
|
194
|
+
className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96",
|
|
195
|
+
style: {
|
|
196
|
+
marginTop: '0.5rem',
|
|
197
|
+
overflow: 'auto',
|
|
198
|
+
borderRadius: '0.375rem',
|
|
199
|
+
backgroundColor: '#f3f4f6',
|
|
200
|
+
padding: '1rem',
|
|
201
|
+
fontSize: '0.75rem',
|
|
202
|
+
color: '#1f2937',
|
|
203
|
+
maxHeight: '24rem'
|
|
204
|
+
}
|
|
205
|
+
}, errorStack))), React.createElement("div", {
|
|
206
|
+
className: "mt-6 text-center",
|
|
207
|
+
style: {
|
|
208
|
+
marginTop: '1.5rem',
|
|
209
|
+
textAlign: 'center'
|
|
210
|
+
}
|
|
211
|
+
}, React.createElement("button", {
|
|
212
|
+
onClick: handleGoHome,
|
|
213
|
+
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
|
|
214
|
+
style: buttonStyle
|
|
215
|
+
}, "Go back home"))));
|
|
123
216
|
}export{RemixErrorBoundary};//# sourceMappingURL=RemixErrorBoundary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemixErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RemixErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAuDG,EAAA,UAAA,EAAA;AACH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,6 +11,9 @@ import * as React from 'react';
|
|
|
11
11
|
* - Uses window.location.href for navigation instead
|
|
12
12
|
* - Renders complete HTML document (required for root-level error boundaries)
|
|
13
13
|
*
|
|
14
|
+
* Uses inline styles as fallback to ensure the error page renders correctly
|
|
15
|
+
* even when Tailwind CSS fails to load or during hydration error recovery.
|
|
16
|
+
*
|
|
14
17
|
* Usage in root.tsx:
|
|
15
18
|
* export { SPAErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
|
|
16
19
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SPAErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SPAErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,sBA8M/B"}
|
|
@@ -1,4 +1,41 @@
|
|
|
1
|
-
import*as React from'react';import {useRouteError,isRouteErrorResponse,Meta,Links,Scripts}from'@remix-run/react';import {logger}from'@cdm-logger/client'
|
|
1
|
+
import*as React from'react';import {useRouteError,isRouteErrorResponse,Meta,Links,Scripts}from'@remix-run/react';import {logger}from'@cdm-logger/client';// Inline styles as fallback when Tailwind CSS is unavailable (e.g., during SSR error recovery)
|
|
2
|
+
const containerStyle = {
|
|
3
|
+
display: 'flex',
|
|
4
|
+
minHeight: '100vh',
|
|
5
|
+
alignItems: 'center',
|
|
6
|
+
justifyContent: 'center',
|
|
7
|
+
backgroundColor: '#f9fafb',
|
|
8
|
+
padding: '3rem 1rem',
|
|
9
|
+
fontFamily: 'system-ui, -apple-system, sans-serif'
|
|
10
|
+
};
|
|
11
|
+
const iconContainerStyle = {
|
|
12
|
+
display: 'flex',
|
|
13
|
+
width: '4rem',
|
|
14
|
+
height: '4rem',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
justifyContent: 'center',
|
|
17
|
+
borderRadius: '9999px',
|
|
18
|
+
backgroundColor: '#fee2e2',
|
|
19
|
+
flexShrink: 0
|
|
20
|
+
};
|
|
21
|
+
const svgStyle = {
|
|
22
|
+
width: '2rem',
|
|
23
|
+
height: '2rem',
|
|
24
|
+
color: '#ef4444'
|
|
25
|
+
};
|
|
26
|
+
const buttonStyle = {
|
|
27
|
+
display: 'inline-flex',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
borderRadius: '0.375rem',
|
|
30
|
+
backgroundColor: '#2563eb',
|
|
31
|
+
padding: '0.5rem 1rem',
|
|
32
|
+
fontSize: '0.875rem',
|
|
33
|
+
fontWeight: 500,
|
|
34
|
+
color: '#ffffff',
|
|
35
|
+
border: 'none',
|
|
36
|
+
cursor: 'pointer'
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
2
39
|
* SPA/Tauri Root ErrorBoundary Component
|
|
3
40
|
*
|
|
4
41
|
* This error boundary is specifically designed for SPA mode (like Tauri apps)
|
|
@@ -10,6 +47,9 @@ import*as React from'react';import {useRouteError,isRouteErrorResponse,Meta,Link
|
|
|
10
47
|
* - Uses window.location.href for navigation instead
|
|
11
48
|
* - Renders complete HTML document (required for root-level error boundaries)
|
|
12
49
|
*
|
|
50
|
+
* Uses inline styles as fallback to ensure the error page renders correctly
|
|
51
|
+
* even when Tailwind CSS fails to load or during hydration error recovery.
|
|
52
|
+
*
|
|
13
53
|
* Usage in root.tsx:
|
|
14
54
|
* export { SPAErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
|
|
15
55
|
*/
|
|
@@ -20,7 +60,6 @@ function SPAErrorBoundary() {
|
|
|
20
60
|
console.error('Root Route Error:', error);
|
|
21
61
|
}, [error]);
|
|
22
62
|
const handleGoHome = () => {
|
|
23
|
-
// Use direct location change instead of useNavigate to avoid router context issues
|
|
24
63
|
window.location.href = '/';
|
|
25
64
|
};
|
|
26
65
|
if (isRouteErrorResponse(error)) {
|
|
@@ -32,17 +71,30 @@ function SPAErrorBoundary() {
|
|
|
32
71
|
name: "viewport",
|
|
33
72
|
content: "width=device-width, initial-scale=1"
|
|
34
73
|
}), React.createElement("title", null, error.status, " - ", error.statusText), React.createElement(Meta, null), React.createElement(Links, null)), React.createElement("body", null, React.createElement("div", {
|
|
35
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
|
|
74
|
+
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
|
|
75
|
+
style: containerStyle
|
|
36
76
|
}, React.createElement("div", {
|
|
37
|
-
className: "w-full max-w-md space-y-8 text-center"
|
|
77
|
+
className: "w-full max-w-md space-y-8 text-center",
|
|
78
|
+
style: {
|
|
79
|
+
maxWidth: '28rem',
|
|
80
|
+
width: '100%',
|
|
81
|
+
textAlign: 'center'
|
|
82
|
+
}
|
|
38
83
|
}, React.createElement("div", {
|
|
39
|
-
className: "mb-4 flex justify-center"
|
|
84
|
+
className: "mb-4 flex justify-center",
|
|
85
|
+
style: {
|
|
86
|
+
display: 'flex',
|
|
87
|
+
justifyContent: 'center',
|
|
88
|
+
marginBottom: '1rem'
|
|
89
|
+
}
|
|
40
90
|
}, React.createElement("div", {
|
|
41
|
-
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
|
|
91
|
+
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
|
|
92
|
+
style: iconContainerStyle
|
|
42
93
|
}, React.createElement("svg", {
|
|
43
94
|
className: "h-8 w-8 text-red-500",
|
|
44
95
|
width: "32",
|
|
45
96
|
height: "32",
|
|
97
|
+
style: svgStyle,
|
|
46
98
|
fill: "none",
|
|
47
99
|
viewBox: "0 0 24 24",
|
|
48
100
|
stroke: "currentColor"
|
|
@@ -52,16 +104,36 @@ function SPAErrorBoundary() {
|
|
|
52
104
|
strokeWidth: 2,
|
|
53
105
|
d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
54
106
|
})))), React.createElement("div", null, React.createElement("h1", {
|
|
55
|
-
className: "text-6xl font-bold text-gray-900"
|
|
107
|
+
className: "text-6xl font-bold text-gray-900",
|
|
108
|
+
style: {
|
|
109
|
+
fontSize: '3.75rem',
|
|
110
|
+
fontWeight: 700,
|
|
111
|
+
color: '#111827'
|
|
112
|
+
}
|
|
56
113
|
}, error.status), React.createElement("h2", {
|
|
57
|
-
className: "mt-2 text-2xl font-bold tracking-tight text-gray-900"
|
|
114
|
+
className: "mt-2 text-2xl font-bold tracking-tight text-gray-900",
|
|
115
|
+
style: {
|
|
116
|
+
marginTop: '0.5rem',
|
|
117
|
+
fontSize: '1.5rem',
|
|
118
|
+
fontWeight: 700,
|
|
119
|
+
color: '#111827'
|
|
120
|
+
}
|
|
58
121
|
}, error.statusText), error.data && React.createElement("p", {
|
|
59
|
-
className: "mt-2 text-sm text-gray-600"
|
|
122
|
+
className: "mt-2 text-sm text-gray-600",
|
|
123
|
+
style: {
|
|
124
|
+
marginTop: '0.5rem',
|
|
125
|
+
fontSize: '0.875rem',
|
|
126
|
+
color: '#4b5563'
|
|
127
|
+
}
|
|
60
128
|
}, error.data)), React.createElement("div", {
|
|
61
|
-
className: "mt-6"
|
|
129
|
+
className: "mt-6",
|
|
130
|
+
style: {
|
|
131
|
+
marginTop: '1.5rem'
|
|
132
|
+
}
|
|
62
133
|
}, React.createElement("button", {
|
|
63
134
|
onClick: handleGoHome,
|
|
64
|
-
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
|
135
|
+
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
|
|
136
|
+
style: buttonStyle
|
|
65
137
|
}, "Go back home")))), React.createElement(Scripts, null)));
|
|
66
138
|
}
|
|
67
139
|
const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
|
|
@@ -74,17 +146,29 @@ function SPAErrorBoundary() {
|
|
|
74
146
|
name: "viewport",
|
|
75
147
|
content: "width=device-width, initial-scale=1"
|
|
76
148
|
}), React.createElement("title", null, "Application Error"), React.createElement(Meta, null), React.createElement(Links, null)), React.createElement("body", null, React.createElement("div", {
|
|
77
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"
|
|
149
|
+
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8",
|
|
150
|
+
style: containerStyle
|
|
78
151
|
}, React.createElement("div", {
|
|
79
|
-
className: "w-full max-w-2xl space-y-8"
|
|
152
|
+
className: "w-full max-w-2xl space-y-8",
|
|
153
|
+
style: {
|
|
154
|
+
maxWidth: '42rem',
|
|
155
|
+
width: '100%'
|
|
156
|
+
}
|
|
80
157
|
}, React.createElement("div", {
|
|
81
|
-
className: "mb-4 flex justify-center"
|
|
158
|
+
className: "mb-4 flex justify-center",
|
|
159
|
+
style: {
|
|
160
|
+
display: 'flex',
|
|
161
|
+
justifyContent: 'center',
|
|
162
|
+
marginBottom: '1rem'
|
|
163
|
+
}
|
|
82
164
|
}, React.createElement("div", {
|
|
83
|
-
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
|
|
165
|
+
className: "flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
|
|
166
|
+
style: iconContainerStyle
|
|
84
167
|
}, React.createElement("svg", {
|
|
85
168
|
className: "h-8 w-8 text-red-500",
|
|
86
169
|
width: "32",
|
|
87
170
|
height: "32",
|
|
171
|
+
style: svgStyle,
|
|
88
172
|
fill: "none",
|
|
89
173
|
viewBox: "0 0 24 24",
|
|
90
174
|
stroke: "currentColor"
|
|
@@ -94,21 +178,59 @@ function SPAErrorBoundary() {
|
|
|
94
178
|
strokeWidth: 2,
|
|
95
179
|
d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
96
180
|
})))), React.createElement("div", {
|
|
97
|
-
className: "text-center"
|
|
181
|
+
className: "text-center",
|
|
182
|
+
style: {
|
|
183
|
+
textAlign: 'center'
|
|
184
|
+
}
|
|
98
185
|
}, React.createElement("h1", {
|
|
99
|
-
className: "text-3xl font-bold tracking-tight text-gray-900"
|
|
186
|
+
className: "text-3xl font-bold tracking-tight text-gray-900",
|
|
187
|
+
style: {
|
|
188
|
+
fontSize: '1.875rem',
|
|
189
|
+
fontWeight: 700,
|
|
190
|
+
color: '#111827'
|
|
191
|
+
}
|
|
100
192
|
}, "Application Error"), React.createElement("p", {
|
|
101
|
-
className: "mt-2 text-lg text-red-600"
|
|
193
|
+
className: "mt-2 text-lg text-red-600",
|
|
194
|
+
style: {
|
|
195
|
+
marginTop: '0.5rem',
|
|
196
|
+
fontSize: '1.125rem',
|
|
197
|
+
color: '#dc2626'
|
|
198
|
+
}
|
|
102
199
|
}, errorMessage), errorStack && process.env.NODE_ENV !== 'production' && React.createElement("details", {
|
|
103
|
-
className: "mt-4 text-left"
|
|
200
|
+
className: "mt-4 text-left",
|
|
201
|
+
style: {
|
|
202
|
+
marginTop: '1rem',
|
|
203
|
+
textAlign: 'left'
|
|
204
|
+
}
|
|
104
205
|
}, React.createElement("summary", {
|
|
105
|
-
className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900"
|
|
206
|
+
className: "cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900",
|
|
207
|
+
style: {
|
|
208
|
+
cursor: 'pointer',
|
|
209
|
+
fontSize: '0.875rem',
|
|
210
|
+
fontWeight: 500,
|
|
211
|
+
color: '#374151'
|
|
212
|
+
}
|
|
106
213
|
}, "Stack trace (development only)"), React.createElement("pre", {
|
|
107
|
-
className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96"
|
|
214
|
+
className: "mt-2 overflow-auto rounded-md bg-gray-100 p-4 text-xs text-gray-800 max-h-96",
|
|
215
|
+
style: {
|
|
216
|
+
marginTop: '0.5rem',
|
|
217
|
+
overflow: 'auto',
|
|
218
|
+
borderRadius: '0.375rem',
|
|
219
|
+
backgroundColor: '#f3f4f6',
|
|
220
|
+
padding: '1rem',
|
|
221
|
+
fontSize: '0.75rem',
|
|
222
|
+
color: '#1f2937',
|
|
223
|
+
maxHeight: '24rem'
|
|
224
|
+
}
|
|
108
225
|
}, errorStack))), React.createElement("div", {
|
|
109
|
-
className: "mt-6 text-center"
|
|
226
|
+
className: "mt-6 text-center",
|
|
227
|
+
style: {
|
|
228
|
+
marginTop: '1.5rem',
|
|
229
|
+
textAlign: 'center'
|
|
230
|
+
}
|
|
110
231
|
}, React.createElement("button", {
|
|
111
232
|
onClick: handleGoHome,
|
|
112
|
-
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
|
233
|
+
className: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
|
|
234
|
+
style: buttonStyle
|
|
113
235
|
}, "Go back home")))), React.createElement(Scripts, null)));
|
|
114
236
|
}export{SPAErrorBoundary};//# sourceMappingURL=SPAErrorBoundary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SPAErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SPAErrorBoundary.js","sources":["../../../src/components/ErrorHandlers/SPAErrorBoundary.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;AA8DG,EAAA,cAAA,EAAA,QAAA;AACH,EAAA,YAAA,EAAA,QAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/tailwind-ui",
|
|
3
|
-
"version": "12.2.4-alpha.
|
|
3
|
+
"version": "12.2.4-alpha.27",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"watch": "npm run build:lib:watch"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@admin-layout/client": "12.2.4-alpha.
|
|
32
|
+
"@admin-layout/client": "12.2.4-alpha.27",
|
|
33
33
|
"@radix-ui/react-accordion": "^1.2.0",
|
|
34
34
|
"@radix-ui/react-alert-dialog": "^1.1.1",
|
|
35
35
|
"@radix-ui/react-aspect-ratio": "^1.1.0",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
"typescript": {
|
|
91
91
|
"definition": "lib/index.d.ts"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "bdd205421b62f7f86f5706925da28c7ee0c47f61"
|
|
94
94
|
}
|