# remix-crash

> A root development `` for your Remix apps.

Latest version **0.1.2** (published 2022-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install remix-crash
pnpm add remix-crash
yarn add remix-crash
bun add remix-crash
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-02-07 |
| First published | 2022-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stevenyung |

## Links

- npm: https://www.npmjs.com/package/remix-crash
- npm.io page: https://npm.io/package/remix-crash

## Dependencies (3)

- [source-map](https://npm.io/package/source-map.md) ^0.7.3
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.4.0
- [style-inject](https://npm.io/package/style-inject.md) ^0.3.0

## Recent versions

- 0.1.2 (latest) — 2022-02-07
- 0.1.1 — 2022-02-07
- 0.1.0 — 2022-02-06

## README

# Remix Crash

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

![Remix Crash](./assets/screenshot.png)

## 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

```bash
npm install remix-crash
```

### Setup

#### In `app/root.tsx`

```jsx
export default function App() {
  return {
    /* Your app */
  };
}

// Add this line
export { ErrorBoundary } from "remix-crash";
```

#### In `app/routes/_remix-crash.jsx`

```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`:

```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>
  );
}
```

---
_Source: https://npm.io/package/remix-crash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._