@equinor/fusion-react-errorboundary/dist/legacy/Fallback.js

React component for error boundary

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography, Button, Accordion } from '@equinor/eds-core-react';
import { tokens } from '@equinor/eds-tokens';
import { styled } from 'styled-components';
import { FallbackIcon } from './FallbackIcon';
import { useCallback } from 'react';
import { useErrorBoundary } from 'react-error-boundary';
const Styled = {
    root: styled.div `
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: ${tokens.spacings.comfortable.medium};
  `,
    stacktrace: styled.pre `
    overflow: auto;
    max-width: 100%;
    color: ${tokens.colors.interactive.danger__resting.hex};
    font-size: 0.8em;
    line-height: 1em;
    margin: 0;
  `,
};
const generateTitle = (errorType, resourceName = '<unknown resource>') => {
    switch (errorType) {
        case 'accessDenied':
            return "It seems like you don't have access to this content";
        case 'notFound':
            return `The ${resourceName} could not be found`;
        case 'noData':
            return 'Unfortunately, we could not find any data for this component';
        case 'failedDependency': // 424
            return `Unfortunately, we had problem with communicate with dependent system, ${resourceName}`;
        case 'throttle': // 429
            return `Unfortunately, we experience too many request for resource ${resourceName}`;
        default:
            return 'Oops! Something went wrong!';
    }
};
export const Fallback = (props) => {
    const { errorType, resourceName, title, message, error, action, onTakeAction } = props;
    const { resetBoundary } = useErrorBoundary();
    const onClick = useCallback(() => {
        if (onTakeAction) {
            onTakeAction();
        }
        resetBoundary();
    }, [resetBoundary, onTakeAction]);
    return (_jsx(Styled.root, { children: _jsxs("div", { children: [props.icon ?? _jsx(FallbackIcon, { errorType: errorType }), _jsx(Typography, { variant: "h3", children: title ?? generateTitle(errorType, resourceName) }), _jsx(Typography, { variant: "ingress", token: { color: tokens.colors.text.static_icons__tertiary.hex }, children: message ?? error.message }), action && (_jsx(Button, { variant: "outlined", onClick: onClick, children: action })), error && (_jsx(Accordion, { headerLevel: "h5", chevronPosition: "right", style: { width: '100%' }, children: _jsxs(Accordion.Item, { children: [_jsx(Accordion.Header, { style: { height: 'auto' }, children: "Error details" }), _jsx(Accordion.Panel, { children: _jsx(Styled.stacktrace, { children: error.stack }) })] }) }))] }) }));
};
//# sourceMappingURL=Fallback.js.map