https://github.com/stevenpetryk/eleventy-plugin-error-overlay

A pretty error page for development-time Eleventy build problems
https://github.com/stevenpetryk/eleventy-plugin-error-overlay

Last synced: 5 days ago
JSON representation

A pretty error page for development-time Eleventy build problems

• Host: GitHub
• URL: https://github.com/stevenpetryk/eleventy-plugin-error-overlay
• Owner: stevenpetryk
• License: wtfpl
• Created: 2020-04-05T01:26:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-17T16:44:06.000Z (over 2 years ago)
• Last Synced: 2024-11-01T03:32:43.781Z (12 days ago)
• Language: JavaScript
• Homepage:
• Size: 242 KB
• Stars: 32
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Eleventy Error Overlay

In development, it's easy to break Eleventy without noticing. In a lot of other tools, there's often some type of "error overlay" that pipes build errors directly to the browser. This is that, for Eleventy.

- Shows error name, message, and fancy stacktrace

- Has a dark theme so you won't be suddenly blinded by your failures

- Hooks into Eleventy's live-reloading

![](./docs/screenshot.png)

## Installation

```sh

yarn add --dev eleventy-plugin-error-overlay

```

In `.eleventy.js`, add the plugin:

```js

const ErrorOverlay = require("eleventy-plugin-error-overlay")

module.exports = function (eleventyConfig) {

  // ...

  eleventyConfig.addPlugin(ErrorOverlay)

  // ...

}

```

## Caveats

### browser-sync

If you've set a custom browser-sync config, make sure you're not clobbering the existing one. That means that if your config looks like this:

```js

eleventyConfig.setBrowserSyncConfig({

  // ...stuff

})

```

Make sure that it's like this:

```js

eleventyConfig.setBrowserSyncConfig({

  ...eleventyConfig.browserSyncConfig,

  // ...stuff

})

```

Otherwise, you'll blow away this plugin's middleware and the error page won't show up.