pybricks-code/src/alerts/UnexpectedErrorAlert.tsx at a114613eb328b3afa69dbe773a665776cf321e79 · pybricks/pybricks-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// SPDX-License-Identifier: MIT
// Copyright (c) 2022-2026 The Pybricks Authors

import './UnexpectedErrorAlert.scss';
import {
    AnchorButton,
    Button,
    ButtonGroup,
    Collapse,
    Intent,
    Pre,
} from '@blueprintjs/core';
import { ChevronDown, ChevronRight, Duplicate, Error, Virus } from '@blueprintjs/icons';
import React, { useState } from 'react';
import { useId } from 'react-aria';
import type { CreateToast } from '../toasterTypes';
import { useI18n } from './i18n';

type UnexpectedErrorAlertProps = {
    error: Error;
};

const UnexpectedErrorAlert: React.FunctionComponent<UnexpectedErrorAlertProps> = ({
    error,
}) => {
    const i18n = useI18n();
    const [isExpanded, setIsExpanded] = useState(false);
    const labelId = useId();

    return (
        <>
            <p>
                {i18n.translate('message', {
                    copyErrorMessage: i18n.translate('copyErrorMessage'),
                })}
            </p>
            <p>{error.message}</p>
            {error.stack && (
                <>
                    <span>
                        <Button
                            aria-labelledby={labelId}
                            minimal={true}
                            small={true}
                            icon={isExpanded ? <ChevronDown /> : <ChevronRight />}
                            onClick={() => setIsExpanded((v) => !v)}
                        />
                        <span id={labelId}>{i18n.translate('technicalInfo')}</span>
                    </span>
                    <Collapse isOpen={isExpanded}>
                        <Pre className="pb-alerts-stack-trace">{error.stack}</Pre>
                    </Collapse>
                </>
            )}
            <div>
                <ButtonGroup minimal={true} fill={true}>
                    <Button
                        intent={Intent.DANGER}
                        icon={<Duplicate />}
                        onClick={() =>
                            navigator.clipboard.writeText(
                                `\`\`\`\n${error.stack || error.message}\n\`\`\``,
                            )
                        }
                    >
                        {i18n.translate('copyErrorMessage')}
                    </Button>
                    <AnchorButton
                        intent={Intent.DANGER}
                        icon={<Virus />}
                        href={`https://github.com/pybricks/support/issues?q=${encodeURIComponent(
                            'is:issue',
                        )}+${encodeURIComponent(error.message)}`}
                        target="_blank"
                        rel="noopener"
                    >
                        {i18n.translate('reportBug')}
                    </AnchorButton>
                </ButtonGroup>
            </div>
        </>
    );
};

export const unexpectedError: CreateToast<{ error: Error }> = (
    onAction,
    { error },
) => ({
    message: <UnexpectedErrorAlert error={error} />,
    icon: <Error />,
    intent: Intent.DANGER,
    onDismiss: () => onAction('dismiss'),
});