Fix relative-time error and improve global error handler

eslint.config.ts

@@ -927,6 +927,7 @@ export default defineConfig([
     rules: {
       ...playwright.configs['flat/recommended'].rules,
       'playwright/expect-expect': [0],
+      'playwright/no-networkidle': [0],
     },
   },
   {

tests/e2e/homepage.test.ts

@@ -0,0 +1,8 @@
+import {test} from '@playwright/test';
+import {assertNoJsError} from './utils.ts';
+
+test('homepage renders without errors', async ({page}) => {
+  await page.goto('/');
+  await page.waitForLoadState('networkidle');
+  await assertNoJsError(page);
+});

web_src/js/modules/errors.test.ts

@@ -1,4 +1,8 @@
-import {isGiteaError, showGlobalErrorMessage} from './errors.ts';
+import {isGiteaError, processWindowErrorEvent, showGlobalErrorMessage} from './errors.ts';
+
+beforeEach(() => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+});
 
 test('isGiteaError', () => {
   expect(isGiteaError('', '')).toBe(true);
@@ -16,12 +20,32 @@ test('isGiteaError', () => {
 });
 
 test('showGlobalErrorMessage', () => {
-  document.body.innerHTML = '<div class="page-content"></div>';
   showGlobalErrorMessage('test msg 1');
   showGlobalErrorMessage('test msg 2');
   showGlobalErrorMessage('test msg 1'); // duplicated
 
-  expect(document.body.innerHTML).toContain('>test msg 1 (2)<');
-  expect(document.body.innerHTML).toContain('>test msg 2<');
-  expect(document.querySelectorAll('.js-global-error').length).toEqual(2);
+  const errs = document.querySelectorAll('.js-global-error');
+  expect(errs.length).toEqual(2);
+  expect(errs[0].querySelector('.js-global-error-msg')!.textContent).toBe('test msg 1');
+  expect(errs[0].querySelector('.js-global-error-count')!.textContent).toBe(' (2)');
+  expect(errs[1].querySelector('.js-global-error-msg')!.textContent).toBe('test msg 2');
+  expect(errs[1].querySelector('.js-global-error-count')!.textContent).toBe('');
+});
+
+test('processWindowErrorEvent renders stack trace', () => {
+  const error = new Error('boom');
+  error.stack = `Error: boom\n    at fn (${window.location.origin}/assets/js/index.js:1:1)`;
+  processWindowErrorEvent({error, type: 'error'} as ErrorEvent & PromiseRejectionEvent);
+  expect(document.querySelector('.js-global-error-msg')!.textContent).toBe('JavaScript error: boom');
+  expect(document.querySelector('.js-global-error-stack')!.textContent).toContain('/assets/js/index.js:1:1');
+});
+
+test('processWindowErrorEvent falls back to message without stack', () => {
+  processWindowErrorEvent({
+    error: {message: 'script error'} as Error, type: 'error',
+    filename: `${window.location.origin}/assets/js/x.js`, lineno: 5, colno: 10,
+  } as ErrorEvent & PromiseRejectionEvent);
+  const msgText = document.querySelector('.js-global-error-msg')!.textContent;
+  expect(msgText).toContain('JavaScript error: script error');
+  expect(msgText).toContain('@ 5:10');
 });

web_src/js/modules/errors.ts

@@ -1,8 +1,11 @@
 // keep this file lightweight, it's imported into IIFE chunk in bootstrap
+import {clippie} from 'clippie';
 import {html} from '../utils/html.ts';
+import octiconCheck from '../../../public/assets/img/svg/octicon-check.svg';
+import octiconCopy from '../../../public/assets/img/svg/octicon-copy.svg';
 import type {Intent} from '../types.ts';
 
-export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') {
+export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error', stack?: string) {
   const msgContainer = document.querySelector('.page-content') ?? document.body;
   if (!msgContainer) {
     alert(`${msgType}: ${msg}`);
@@ -12,14 +15,38 @@ export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') {
   let msgDiv = msgContainer.querySelector<HTMLDivElement>(`.js-global-error[data-global-error-msg-compact="${msgCompact}"]`);
   if (!msgDiv) {
     const el = document.createElement('div');
-    el.innerHTML = html`<div class="ui container js-global-error tw-my-[--page-spacing]"><div class="ui ${msgType} message tw-text-center tw-whitespace-pre-line"></div></div>`;
-    msgDiv = el.childNodes[0] as HTMLDivElement;
+    el.innerHTML = html`
+      <div class="ui container js-global-error tw-my-[--page-spacing]">
+        <div class="ui ${msgType} message tw-flex tw-justify-center tw-items-center">
+          <span class="js-global-error-msg tw-whitespace-pre-line"></span><span class="js-global-error-count"></span>
+          <button type="button" class="js-global-error-copy interact-bg tw-text-inherit tw-p-2 tw-rounded tw-ml-1"></button>
+          <pre class="js-global-error-stack tw-hidden"></pre>
+        </div>
+      </div>
+    `;
+    msgDiv = el.firstElementChild as HTMLDivElement;
+    const copyBtn = msgDiv.querySelector<HTMLButtonElement>('.js-global-error-copy')!;
+    copyBtn.innerHTML = octiconCopy;
+    let resetTimeout: ReturnType<typeof setTimeout> | undefined;
+    copyBtn.addEventListener('click', async () => {
+      const msgText = msgDiv!.querySelector('.js-global-error-msg')!.textContent;
+      const stackText = msgDiv!.querySelector('.js-global-error-stack')!.textContent;
+      if (!await clippie([msgText, stackText].filter(Boolean).join('\n'))) return;
+      copyBtn.innerHTML = octiconCheck;
+      copyBtn.classList.replace('tw-text-inherit', 'tw-text-green');
+      clearTimeout(resetTimeout);
+      resetTimeout = setTimeout(() => {
+        copyBtn.innerHTML = octiconCopy;
+        copyBtn.classList.replace('tw-text-green', 'tw-text-inherit');
+      }, 1500);
+    });
   }
-  // merge duplicated messages into "the message (count)" format
-  const msgCount = Number(msgDiv.getAttribute(`data-global-error-msg-count`)) + 1;
-  msgDiv.setAttribute(`data-global-error-msg-compact`, msgCompact);
-  msgDiv.setAttribute(`data-global-error-msg-count`, msgCount.toString());
-  msgDiv.querySelector('.ui.message')!.textContent = msg + (msgCount > 1 ? ` (${msgCount})` : '');
+  const msgCount = Number(msgDiv.getAttribute('data-global-error-msg-count')) + 1;
+  msgDiv.setAttribute('data-global-error-msg-compact', msgCompact);
+  msgDiv.setAttribute('data-global-error-msg-count', String(msgCount));
+  msgDiv.querySelector('.js-global-error-msg')!.textContent = msg;
+  msgDiv.querySelector('.js-global-error-count')!.textContent = msgCount > 1 ? ` (${msgCount})` : '';
+  msgDiv.querySelector('.js-global-error-stack')!.textContent = stack ?? '';
   msgContainer.prepend(msgDiv);
 }
 
@@ -46,12 +73,10 @@ export function processWindowErrorEvent({error, reason, message, type, filename,
     if (window.config.runModeIsProd) return;
   }
 
-  // Filter out errors from browser extensions or other non-Gitea scripts.
   if (!isGiteaError(filename ?? '', err?.stack ?? '')) return;
 
-  let msg = err?.message ?? message;
-  if (lineno) msg += ` (${filename} @ ${lineno}:${colno})`;
-  const dot = msg.endsWith('.') ? '' : '.';
   const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type;
-  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}${dot} Open browser console to see more details.`);
+  let msg = err?.message ?? message;
+  if (!err?.stack && lineno) msg += ` (${filename} @ ${lineno}:${colno})`;
+  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}`, 'error', err?.stack);
 }

web_src/js/webcomponents/relative-time.test.ts

@@ -109,6 +109,15 @@ test('respects lang from parent element', async () => {
   expect(getText(el)).toBe('vor 3 Tagen');
 });
 
+test('falls back when navigator.language is invalid', async () => {
+  vi.spyOn(navigator, 'language', 'get').mockReturnValue('undefined');
+  const el = document.createElement('relative-time');
+  el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 1000).toISOString());
+  await Promise.resolve();
+  expect(getText(el)).toBe('3 minutes ago');
+  vi.restoreAllMocks();
+});
+
 test('switches to datetime with P1D threshold', async () => {
   const el = createRelativeTime(new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), {
     lang: 'en-US',

web_src/js/webcomponents/relative-time.ts

@@ -258,13 +258,14 @@ class RelativeTime extends HTMLElement {
   }
 
   get #lang(): string {
-    const lang = this.closest('[lang]')?.getAttribute('lang');
-    if (lang) {
+    // navigator.language can be `undefined` or the string `"undefined"` in headless browsers
+    for (const candidate of [this.closest('[lang]')?.getAttribute('lang'), navigator.language]) {
+      if (!candidate) continue;
       try {
-        return new Intl.Locale(lang).toString();
-      } catch { /* invalid locale, fall through */ }
+        return String(new Intl.Locale(candidate));
+      } catch {}
     }
-    return navigator.language ?? 'en';
+    return 'en';
   }
 
   get second(): 'numeric' | '2-digit' | undefined {