tycho-components 0.42.3 → 0.42.4

package/dist/configs/localization/CommonTexts.js

@@ -44,7 +44,7 @@ export const CommonTexts = {
         'internal.server.error': 'An unexpected error occurred. Contact the administrator.',
         'server.error.report.prompt': 'Something went wrong on our end. Click here to tell us what happened.',
         'server.error.report.modal.title': 'Report a problem',
-        'server.error.report.modal.subtitle': 'Describe what you were doing when the error occurred. We will use your message to investigate.',
+        'server.error.report.modal.subtitle': 'Describe what you were doing when the error occurred. We will also include recent console output and a screenshot of this page.',
         'server.error.report.modal.placeholder': 'What were you trying to do? Any extra details help us reproduce the issue.',
         'server.error.report.modal.send': 'Send report',
         'server.error.report.validation': 'Please describe what happened before sending.',
@@ -132,7 +132,7 @@ export const CommonTexts = {
         'internal.server.error': 'Ocorreu um erro inesperado. Entre em contato com o administrador.',
         'server.error.report.prompt': 'Algo deu errado do nosso lado. Clique aqui para nos contar o que aconteceu.',
         'server.error.report.modal.title': 'Reportar um problema',
-        'server.error.report.modal.subtitle': 'Descreva o que você estava fazendo quando o erro ocorreu. Usaremos sua mensagem para investigar.',
+        'server.error.report.modal.subtitle': 'Descreva o que você estava fazendo quando o erro ocorreu. Também incluiremos a saída recente do console e uma captura de tela desta página.',
         'server.error.report.modal.placeholder': 'O que você estava tentando fazer? Detalhes extras nos ajudam a reproduzir o problema.',
         'server.error.report.modal.send': 'Enviar relatório',
         'server.error.report.validation': 'Descreva o que aconteceu antes de enviar.',
@@ -220,7 +220,7 @@ export const CommonTexts = {
         'internal.server.error': "Si è verificato un errore inaspettato. Contatta l'amministratore.",
         'server.error.report.prompt': 'Qualcosa è andato storto da parte nostra. Clicca qui per raccontarci cosa è successo.',
         'server.error.report.modal.title': 'Segnala un problema',
-        'server.error.report.modal.subtitle': "Descrivi cosa stavi facendo quando si è verificato l'errore. Useremo il tuo messaggio per indagare.",
+        'server.error.report.modal.subtitle': "Descrivi cosa stavi facendo quando si è verificato l'errore. Includeremo anche l'output recente della console e uno screenshot di questa pagina.",
         'server.error.report.modal.placeholder': 'Cosa stavi cercando di fare? Dettagli aggiuntivi ci aiutano a riprodurre il problema.',
         'server.error.report.modal.send': 'Invia segnalazione',
         'server.error.report.validation': 'Descrivi cosa è successo prima di inviare.',

package/dist/configs/services/ErrorReportService.d.ts

@@ -1,33 +1,19 @@
 import type { ServerErrorContext } from '../../common/AppToast/ToastMessage';
+import type { ConsoleLogEntry } from '../../features/ServerErrorReport/consoleCapture';
+import '../../features/ServerErrorReport/consoleCapture';
 export type ReportSendContext = {
     locale?: string;
     corpusUid?: string;
     corpusName?: string;
 };
-type ClientContext = {
-    timestamp?: string;
-    timezone?: string;
-    appUrl?: string;
-    environment?: string;
-    locale?: string;
-    corpusUid?: string;
-    corpusName?: string;
-    userAgent?: string;
-    viewport?: string;
-    screen?: string;
-    referrer?: string;
-    pageUrl?: string;
-};
 type ErrorReportPayload = {
     userMessage: string;
     errorContext?: ServerErrorContext;
     sendContext?: ReportSendContext;
+    consoleLogs?: ConsoleLogEntry[];
+    screenshot?: string | null;
 };
-declare function send({ userMessage, errorContext, sendContext, }: ErrorReportPayload): Promise<import("axios").AxiosResponse<any, {
-    userMessage: string;
-    errorContext: ServerErrorContext | undefined;
-    clientContext: ClientContext;
-}, {}, any>>;
+declare function send({ userMessage, errorContext, sendContext, consoleLogs, screenshot, }: ErrorReportPayload): Promise<import("axios").AxiosResponse<any, Record<string, unknown>, {}, any>>;
 declare const ErrorReportService: {
     send: typeof send;
 };

package/dist/configs/services/ErrorReportService.js

@@ -1,3 +1,4 @@
+import '../../features/ServerErrorReport/consoleCapture';
 import { createApiClient } from '../api/createApiClient';
 function getFunctionsApiBase() {
     const explicit = import.meta.env.VITE_APP_FUNCTIONS_API;
@@ -44,20 +45,27 @@ function buildClientContext(sendContext) {
     }
     return clientContext;
 }
-function send({ userMessage, errorContext, sendContext, }) {
+function send({ userMessage, errorContext, sendContext, consoleLogs, screenshot, }) {
     const functionsApiBase = getFunctionsApiBase();
     if (!functionsApiBase) {
         return Promise.reject(new Error('functions.api.unavailable'));
     }
+    const body = {
+        userMessage,
+        errorContext,
+        clientContext: buildClientContext(sendContext),
+    };
+    if (consoleLogs?.length) {
+        body.consoleLogs = consoleLogs;
+    }
+    if (screenshot) {
+        body.screenshot = screenshot;
+    }
     return createApiClient({
         baseURL: functionsApiBase,
         attachJwt: true,
         serverErrorHandling: 'none',
-    }).post('/error-report', {
-        userMessage,
-        errorContext,
-        clientContext: buildClientContext(sendContext),
-    });
+    }).post('/error-report', body);
 }
 const ErrorReportService = { send };
 export default ErrorReportService;

package/dist/features/ServerErrorReport/ServerErrorReport.js

@@ -5,32 +5,37 @@ import { useTranslation } from 'react-i18next';
 import AppModal from '../../common/AppModal/AppModal';
 import AppTextArea from '../../common/AppTextArea/AppTextArea';
 import ErrorReportService from '../../configs/services/ErrorReportService';
+import { captureTabScreenshot } from './captureTabScreenshot';
+import { getConsoleLogs } from './consoleCapture';
 import './styles.scss';
 export default function ServerErrorReport({ errorContext, corpus, onClose, onSent, }) {
     const { t, i18n } = useTranslation('common');
     const [userMessage, setUserMessage] = useState('');
     const [sending, setSending] = useState(false);
     const [sendError, setSendError] = useState(null);
-    const handleSend = () => {
+    const handleSend = async () => {
         if (!userMessage.trim()) {
             setSendError(t('server.error.report.validation'));
             return;
         }
         setSending(true);
         setSendError(null);
-        ErrorReportService.send({
-            userMessage,
-            errorContext,
-            sendContext: {
-                locale: i18n.resolvedLanguage || i18n.language,
-                corpusUid: corpus?.uid,
-                corpusName: corpus?.name,
-            },
-        })
-            .then(() => {
+        try {
+            const screenshot = await captureTabScreenshot();
+            await ErrorReportService.send({
+                userMessage,
+                errorContext,
+                sendContext: {
+                    locale: i18n.resolvedLanguage || i18n.language,
+                    corpusUid: corpus?.uid,
+                    corpusName: corpus?.name,
+                },
+                consoleLogs: getConsoleLogs(),
+                screenshot,
+            });
             onSent();
-        })
-            .catch((error) => {
+        }
+        catch (error) {
             console.error('Failed to send server error report:', axios.isAxiosError(error)
                 ? {
                     message: error.message,
@@ -40,10 +45,10 @@ export default function ServerErrorReport({ errorContext, corpus, onClose, onSen
                 }
                 : error);
             setSendError(t('server.error.report.send.failed'));
-        })
-            .finally(() => {
+        }
+        finally {
             setSending(false);
-        });
+        }
     };
     return (_jsx(AppModal, { title: t('server.error.report.modal.title'), subtitle: t('server.error.report.modal.subtitle'), close: onClose, confirm: handleSend, disableConfirm: sending || !userMessage.trim(), confirmLabel: t('server.error.report.modal.send'), className: "server-error-report-modal", children: _jsxs("div", { className: "server-error-report-modal__body", children: [_jsx(AppTextArea, { value: userMessage, onChange: (e) => setUserMessage(e.target.value), placeholder: t('server.error.report.modal.placeholder'), rows: 6, disabled: sending, "aria-label": t('server.error.report.modal.placeholder') }), sendError && (_jsx("p", { className: "server-error-report-modal__error", role: "alert", children: sendError }))] }) }));
 }

package/dist/features/ServerErrorReport/captureTabScreenshot.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Best-effort tab screenshot for error reports.
+ * Hides the report modal during capture so it is not in the image.
+ */
+export declare function captureTabScreenshot(): Promise<string | null>;

package/dist/features/ServerErrorReport/captureTabScreenshot.js

@@ -0,0 +1,56 @@
+import html2canvas from 'html2canvas';
+const MAX_WIDTH = 1600;
+const JPEG_QUALITY = 0.85;
+function hideReportUi() {
+    const hidden = [];
+    const modal = document.querySelector('.server-error-report-modal');
+    const root = modal?.closest('.MuiModal-root') ||
+        modal;
+    if (root) {
+        hidden.push({ el: root, display: root.style.display });
+        root.style.display = 'none';
+    }
+    return hidden;
+}
+function restoreHidden(hidden) {
+    hidden.forEach(({ el, display }) => {
+        el.style.display = display;
+    });
+}
+function toJpegDataUrl(canvas) {
+    let out = canvas;
+    if (canvas.width > MAX_WIDTH) {
+        const scale = MAX_WIDTH / canvas.width;
+        out = document.createElement('canvas');
+        out.width = Math.round(canvas.width * scale);
+        out.height = Math.round(canvas.height * scale);
+        const ctx = out.getContext('2d');
+        if (ctx) {
+            ctx.drawImage(canvas, 0, 0, out.width, out.height);
+        }
+    }
+    return out.toDataURL('image/jpeg', JPEG_QUALITY);
+}
+/**
+ * Best-effort tab screenshot for error reports.
+ * Hides the report modal during capture so it is not in the image.
+ */
+export async function captureTabScreenshot() {
+    if (typeof document === 'undefined' || !document.body) {
+        return null;
+    }
+    const hidden = hideReportUi();
+    try {
+        const canvas = await html2canvas(document.body, {
+            logging: false,
+            useCORS: true,
+        });
+        return toJpegDataUrl(canvas);
+    }
+    catch {
+        return null;
+    }
+    finally {
+        restoreHidden(hidden);
+    }
+}

package/dist/features/ServerErrorReport/consoleCapture.d.ts

@@ -0,0 +1,11 @@
+export type ConsoleLogEntry = {
+    t: string;
+    level: string;
+    msg: string;
+};
+declare global {
+    interface Window {
+        __tychoConsoleCaptureInstalled?: boolean;
+    }
+}
+export declare function getConsoleLogs(): ConsoleLogEntry[];

package/dist/features/ServerErrorReport/consoleCapture.js

@@ -0,0 +1,56 @@
+const MAX_LOGS = 60;
+const MAX_MSG = 400;
+const logs = [];
+function serializeArgs(args) {
+    let msg;
+    try {
+        msg = Array.prototype.map
+            .call(args, (a) => {
+            if (typeof a === 'string')
+                return a;
+            if (a instanceof Error)
+                return a.stack || String(a);
+            try {
+                return JSON.stringify(a);
+            }
+            catch {
+                return String(a);
+            }
+        })
+            .join(' ');
+    }
+    catch {
+        msg = '[unserializable]';
+    }
+    if (msg.length > MAX_MSG) {
+        return `${msg.slice(0, MAX_MSG)}…`;
+    }
+    return msg;
+}
+function push(level, args) {
+    logs.push({
+        t: new Date().toISOString(),
+        level,
+        msg: serializeArgs(args),
+    });
+    if (logs.length > MAX_LOGS) {
+        logs.shift();
+    }
+}
+function installConsoleCapture() {
+    if (typeof window === 'undefined' || window.__tychoConsoleCaptureInstalled) {
+        return;
+    }
+    window.__tychoConsoleCaptureInstalled = true;
+    ['log', 'warn', 'error'].forEach((level) => {
+        const original = console[level];
+        console[level] = function (...args) {
+            push(level, args);
+            return original.apply(console, args);
+        };
+    });
+}
+installConsoleCapture();
+export function getConsoleLogs() {
+    return logs.slice();
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.42.3",
+  "version": "0.42.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {