Remix Crash
A root development <ErrorBoundary /> 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
npm install remix-crash
Setup
In app/root.tsx
export default function App() {
return {
/* Your app */
};
}
// Add this line
export { ErrorBoundary } from "remix-crash";
In app/routes/_remix-crash.jsx
export { loader, action } from "remix-crash";
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 <ErrorBoundary /> component in your app/root.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 <DevErrorBoundary error={error} />;
}
// here goes your custom production Error Boundary
return (
<div>
<p>Oops something very wrong happened...</p>
</div>
);
}
27 Jan 2, 2023
3 Dec 20, 2021
2 Mar 10, 2022
10 Nov 30, 2022
61 Dec 22, 2022
8 Dec 8, 2022
56 Dec 25, 2022
167 Dec 9, 2022
6 Apr 13, 2022
16 Mar 9, 2022