remix-crash icon indicating copy to clipboard operation
remix-crash copied to clipboard

Get better insight on why your Remix app crashed during development 💥

⚠️ DEPRECATED due to a lack of time, Remix Crash is deprecated.

Remix Crash

A root development <ErrorBoundary /> for your Remix apps.

Remix Crash


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


npm install remix-crash


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/server";

All set

You should be all set from here.


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 (
      <p>Oops something very wrong happened...</p>