Error plugin

A plugin for Merkur is tiny extensible javascript library for front-end microservices.

@merkur/plugin-error adds semi-automatic error handling to your Merkur widget:

Installation

src/widget.js

Install plugin:

  import { errorPlugin } from '@merkur/plugin-error';

//...

widgetProperties = {
  name,
  version,
  $plugins: [
    //...
    errorPlugin, // keep error plugin as last plugin in array
  ],
  View,
  //...

src/router/widgetAPI/widgetAPI.js

Set HTTP status in widget API response:

//...
.get(
    '/widget',
    //...

      // optional chaining & nullish coalescing operator
      const status = info?.error?.status ?? 200;

      res.status(status).json({ ...info, html });

src/router/playground/playground.js

To allow widget playground to display the widget in error state, add playground error-handling middleware after playground route.

//...
const { playgroundErrorMiddleware } = require('@merkur/plugin-error/server');

// ...

const router = express.Router();
const container = 'container';

router
  .get(
    '/',
    asyncMiddleware(async (req, res) => {
      // ....
      res
        .status(200)
        .send(playgroundTemplate({ widgetProperties, html, container }));
    })
  )
  .use(playgroundErrorMiddleware({ renderPlayground: playgroundTemplate, container }))

Operation

When an error is thrown, the plugin does the following:

The error object is available everywhere in the widget, as well as to the host application.

Limitations

The plugin can’t handle errors occurring outside of lifecycle functions.