ErrCatch

npm - https://www.npmjs.com/package/@evo/errcatch

Небольшой компонент вокруг error boundary API - https://reactjs.org/docs/error-boundaries.html.

Фичи:

• В деве будет подсвечивать "упавший" компонент красным. На проде по умолчанию ничего не рендерит.
• Можно задать логирование ошибок в 1 месте (на бекенде через syslog, на фронте через gotcha).
• Есть возможность рендерить кастомный компонент при ошибке.

Установка

npm i @evo/errcatch

Пример:

import { ErrCatch, withErrCatch } from '@evo/errcatch'

const Component = () => (
    <div>
        <Component1/>
        <ErrCatch>
            <Component1/>
        </ErrCatch>
    </div>
);

// or HOC
const Component = withErrCatch(() => (
    <div>
        <Component1/>
    </div>
));

Логирование ошибок (gotcha,logevo e.t.c)

import { setErrCatchLog } from '@evo/errcatch';
import * as gotcha from '@evo/gotcha-log';

setErrCatchLog((msg, error, info) => {
    console.error(msg, error, info);
    gotcha.error(msg, { message: error.message, stack: error.stack });
});

Custom Error компонент

import { ErrCatch } from '@evo/errcatch'

const ErrorComponent = () => <div>Error</div>

const Component = () => (
    <div>
        <Component1/>
        <ErrCatch errorComponent={<ErrorComponent/>}>
            <Component1/>
        </ErrCatch>
    </div>
);