@owox/web 0.23.0-next-20260409134018 → 0.23.0-next-20260410055152
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/README.md
CHANGED
|
@@ -79,6 +79,36 @@ npm run preview
|
|
|
79
79
|
- `npm run format:check` - Check code formatting
|
|
80
80
|
- `npm run preview` - Preview the production build
|
|
81
81
|
|
|
82
|
+
## Error Handling
|
|
83
|
+
|
|
84
|
+
The app uses React Router `errorElement` to catch runtime errors and display a user-friendly fallback instead of the default React crash screen.
|
|
85
|
+
|
|
86
|
+
There are two error boundary components in `src/components/errors/`:
|
|
87
|
+
|
|
88
|
+
- **`RootErrorBoundary`** — full-page fallback when `MainLayout` itself crashes (uses a plain `<a href="/">` since the router may be broken).
|
|
89
|
+
- **`LayoutErrorBoundary`** — in-layout fallback when a child page crashes. The sidebar stays visible so users can navigate away without reloading.
|
|
90
|
+
|
|
91
|
+
### Dev-only error details
|
|
92
|
+
|
|
93
|
+
Both components include a collapsible block that shows the error message and stack trace:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
{import.meta.env.DEV && error instanceof Error && (
|
|
97
|
+
<details>
|
|
98
|
+
<summary>Error details</summary>
|
|
99
|
+
<pre>{error.message}{'\n\n'}{error.stack}</pre>
|
|
100
|
+
</details>
|
|
101
|
+
)}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
| Part | Purpose |
|
|
105
|
+
|---|---|
|
|
106
|
+
| `import.meta.env.DEV` | Vite built-in — `true` during `npm run dev`, `false` in production builds. Vite statically replaces it at build time, so the entire block is tree-shaken out of the production bundle. |
|
|
107
|
+
| `error instanceof Error` | TypeScript type guard — ensures `.message` and `.stack` are safely accessible. Non-`Error` throws (e.g. strings, Response objects) skip this block. |
|
|
108
|
+
| `<details>` / `<summary>` | Native HTML disclosure widget — collapsed by default, click to expand. No JS needed. |
|
|
109
|
+
|
|
110
|
+
In production, users see only the friendly message and action buttons. In development, developers can expand the details to see the full stack trace inline without opening browser DevTools.
|
|
111
|
+
|
|
82
112
|
## Related Documentation
|
|
83
113
|
|
|
84
114
|
- For information about the overall project, see the [main README](../../README.md)
|