@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
90 lines (89 loc) • 6.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2025 The Kubernetes Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Icon } from '@iconify/react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/system';
import { useSnackbar } from 'notistack';
import { Trans, useTranslation } from 'react-i18next';
import headlampBrokenImage from '../../../assets/headlamp-broken.svg';
import { getVersion } from '../../../helpers/getProductInfo';
const WidthImg = styled('img')({
width: '100%',
});
const MAX_STACK_LENGTH = 1000;
const MAX_TITLE_LENGTH = 100;
const GITHUB_REPO_URL = 'https://github.com/kubernetes-sigs/headlamp';
function handleOpenGitHubIssue(error, t, enqueueSnackbar) {
const version = getVersion();
// Truncate stack trace to prevent URL length limits
const truncatedStack = error.stack && error.stack.length > MAX_STACK_LENGTH
? error.stack.substring(0, MAX_STACK_LENGTH) + '\n... (truncated)'
: error.stack || 'No stack trace available';
// Sanitize error message in issue title
const sanitizedMessage = (error.message || 'Application Error')
.replace(/[\r\n]+/g, ' ') // Replace newlines with spaces
.substring(0, MAX_TITLE_LENGTH); // Limit title length
const issueTitle = encodeURIComponent(`Crash Report: ${sanitizedMessage}`);
const issueBody = encodeURIComponent(`## Crash Summary\n${error.message || 'An error occurred in the application'}\n\n` +
`## Error Stack\n\`\`\`\n${truncatedStack}\n\`\`\`\n\n` +
`## Headlamp Version\n${version.VERSION || 'Unknown'}\n\n` +
`## Git Commit\n${version.GIT_VERSION || 'Unknown'}\n\n` +
`## System Information\n` +
`- User Agent: ${navigator.userAgent}\n` +
`- Platform: ${navigator.platform}\n` +
`- Language: ${navigator.language}\n\n` +
`## Additional Context\n<!-- Please add any additional context about the crash here -->`);
const githubUrl = `${GITHUB_REPO_URL}/issues/new?title=${issueTitle}&body=${issueBody}&labels=kind/bug`;
// Handle popup blocker - window.open returns null if blocked
const newWindow = window.open(githubUrl, '_blank');
if (!newWindow) {
enqueueSnackbar(t('translation|Unable to open GitHub. Please check your popup blocker settings or copy the error details manually.'), { variant: 'warning' });
}
}
export default function ErrorComponent(props) {
const { t } = useTranslation();
const { enqueueSnackbar } = useSnackbar();
const { title = t('Uh-oh! Something went wrong.'), message = '', withTypography = true, graphic = headlampBrokenImage, error, } = props;
return (_jsxs(Grid, { container: true, spacing: 0, direction: "column", alignItems: "center", justifyContent: "center", sx: { textAlign: 'center' }, children: [_jsxs(Grid, { item: true, xs: 12, children: [typeof graphic === 'string' ? _jsx(WidthImg, { src: graphic, alt: "" }) : graphic, withTypography ? (_jsx(Typography, { variant: "h1", sx: { fontSize: '2.125rem', lineHeight: 1.2, fontWeight: 400 }, children: title })) : (title), withTypography ? (_jsx(Typography, { variant: "h2", sx: { fontSize: '1.25rem', lineHeight: 3.6, fontWeight: 500 }, children: !!message ? (message) : (_jsxs(Trans, { t: t, children: ["Head back ", _jsx(Link, { href: window.desktopApi ? '#' : '/', children: "home" }), "."] })) })) : (message)] }), !!error?.stack && (_jsx(Grid, { item: true, xs: 12, children: _jsx(Box, { sx: {
width: '100%',
maxWidth: 800,
}, children: _jsxs(Accordion, { children: [_jsx(AccordionSummary, { expandIcon: _jsx(Icon, { icon: "mdi:chevron-down" }), children: _jsx(Typography, { children: t('translation|Error Details') }) }), _jsxs(AccordionDetails, { children: [_jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 1, children: [_jsx(Button, { onClick: () => {
navigator.clipboard
.writeText(error.stack || '')
.then(() => {
enqueueSnackbar(t('translation|Copied to clipboard'), {
variant: 'success',
});
})
.catch(() => {
enqueueSnackbar(t('translation|Failed to copy to clipboard'), {
variant: 'error',
});
});
}, children: t('translation|Copy') }), _jsx(Button, { color: "primary", onClick: () => handleOpenGitHubIssue(error, t, enqueueSnackbar), children: t('translation|Open Issue on GitHub') })] }), _jsx(Typography, { variant: "body2", component: "pre", sx: {
textWrapMode: 'wrap',
textAlign: 'left',
overflowWrap: 'anywhere',
}, children: error.stack })] })] }) }) }))] }));
}