Fix relative-time error and improve global error handler

templates/base/head_script.tmpl

@@ -19,6 +19,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 		sharedWorkerUri: '{{AssetURI "js/eventsource.sharedworker.js"}}',
 		{{/* this global i18n object should only contain general texts. for specialized texts, it should be provided inside the related modules by: (1) API response (2) HTML data-attribute (3) PageData */}}
 		i18n: {
+			copy: {{ctx.Locale.Tr "copy"}},
 			copy_success: {{ctx.Locale.Tr "copy_success"}},
 			copy_error: {{ctx.Locale.Tr "copy_error"}},
 			error_occurred: {{ctx.Locale.Tr "error.occurred"}},

tests/e2e/homepage.test.ts

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

web_src/js/bootstrap.ts

@@ -1,14 +1,14 @@
 // DO NOT IMPORT window.config HERE!
 // to make sure the error handler always works, we should never import `window.config`, because
 // some user's custom template breaks it.
-import {showGlobalErrorMessage, processWindowErrorEvent} from './modules/errors.ts';
+import {showGlobalError, processWindowErrorEvent} from './modules/errors.ts';
 
 // A module should not be imported twice, otherwise there will be bugs when a module has its internal states.
 // A real example is "generateElemId" in "utils/dom.ts", if it is imported twice in different module scopes,
 // It will generate duplicate IDs (ps: don't try to use "random" to fix, it is just a real example to show the importance of "do not import a module twice")
 if (!window._globalHandlerErrors?._inited) {
   if (!window.config) {
-    showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
+    showGlobalError(new Error(`Gitea JavaScript code couldn't run correctly, please check your custom templates`), {noStack: true});
   }
   // we added an event handler for window error at the very beginning of <script> of page head the
   // handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before

web_src/js/features/common-page.ts

@@ -1,5 +1,5 @@
 import {GET, POST} from '../modules/fetch.ts';
-import {showGlobalErrorMessage} from '../modules/errors.ts';
+import {showGlobalError} from '../modules/errors.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
 import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
@@ -156,14 +156,14 @@ export function checkAppUrl() {
   if (curUrl.startsWith(appUrl) || `${curUrl}/` === appUrl) {
     return;
   }
-  showGlobalErrorMessage(`The detected web site URL is "${appUrl}", it's unlikely matching the site config.
-Mismatched app.ini ROOT_URL or reverse proxy "Host/X-Forwarded-Proto" config might cause wrong URL links for web UI/mail content/webhook notification/OAuth2 sign-in.`, 'warning');
+  showGlobalError(new Error(`The detected web site URL is "${appUrl}", it's unlikely matching the site config.
+Mismatched app.ini ROOT_URL or reverse proxy "Host/X-Forwarded-Proto" config might cause wrong URL links for web UI/mail content/webhook notification/OAuth2 sign-in.`), {msgType: 'warning', noStack: true});
 }
 
 export function checkAppUrlScheme() {
   const curUrl = window.location.href;
   // some users visit "http://domain" while appUrl is "https://domain", COOKIE_SECURE makes it impossible to sign in
   if (curUrl.startsWith('http:') && appUrl.startsWith('https:')) {
-    showGlobalErrorMessage(`This instance is configured to run under HTTPS (by ROOT_URL config), you are accessing by HTTP. Mismatched scheme might cause problems for sign-in/sign-up.`, 'warning');
+    showGlobalError(new Error(`This instance is configured to run under HTTPS (by ROOT_URL config), you are accessing by HTTP. Mismatched scheme might cause problems for sign-in/sign-up.`), {msgType: 'warning', noStack: true});
   }
 }

web_src/js/modules/errors.test.ts

@@ -1,4 +1,4 @@
-import {isGiteaError, showGlobalErrorMessage} from './errors.ts';
+import {isGiteaError, processWindowErrorEvent, showGlobalError} from './errors.ts';
 
 test('isGiteaError', () => {
   expect(isGiteaError('', '')).toBe(true);
@@ -15,13 +15,59 @@ test('isGiteaError', () => {
   expect(isGiteaError('http://localhost:3000/assets/js/index.js', `Error\n    at chrome-extension://abc/content.js:1:1`)).toBe(false);
 });
 
-test('showGlobalErrorMessage', () => {
+test('showGlobalError', () => {
   document.body.innerHTML = '<div class="page-content"></div>';
-  showGlobalErrorMessage('test msg 1');
-  showGlobalErrorMessage('test msg 2');
-  showGlobalErrorMessage('test msg 1'); // duplicated
+  showGlobalError(new Error('test msg 1'), {noStack: true});
+  showGlobalError(new Error('test msg 2'), {noStack: true});
+  showGlobalError(new Error('test msg 1'), {noStack: true}); // 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('JavaScript error: test msg 1');
+  expect(errs[0].querySelector('.js-global-error-count')!.textContent).toBe(' (2)');
+  expect(errs[1].querySelector('.js-global-error-msg')!.textContent).toBe('JavaScript error: test msg 2');
+  expect(errs[1].querySelector('.js-global-error-count')!.textContent).toBe('');
+});
+
+test('showGlobalError stores stack hidden for copy', () => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+  const err = new Error('hi');
+  err.stack = 'at foo (x:1:1)\nat bar (y:2:2)';
+  showGlobalError(err);
+  const stackEl = document.querySelector<HTMLElement>('.js-global-error-stack')!;
+  expect(stackEl.tagName).toBe('PRE');
+  expect(stackEl.classList.contains('tw-hidden')).toBe(true);
+  expect(stackEl.textContent).toBe('at foo (x:1:1)\nat bar (y:2:2)');
+  expect(document.querySelector('.js-global-error-copy')).toBeTruthy();
+});
+
+test('showGlobalError noStack hides stack', () => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+  const err = new Error('warning');
+  err.stack = 'stack content';
+  showGlobalError(err, {msgType: 'warning', noStack: true});
+  expect(document.querySelector('.js-global-error-msg')!.textContent).toBe('warning');
+  expect(document.querySelector('.js-global-error-stack')!.textContent).toBe('');
+});
+
+test('processWindowErrorEvent renders stack trace', () => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+  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', () => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+  const stacklessError = {message: 'script error'} as Error;
+  processWindowErrorEvent({
+    error: stacklessError, 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');
+  expect(document.querySelector('.js-global-error-stack')!.textContent).toBe('');
 });

web_src/js/modules/errors.ts

@@ -1,8 +1,20 @@
 // 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') {
+type ShowGlobalErrorOpts = {
+  msgType?: Intent,
+  type?: 'error' | 'unhandledrejection',
+  noStack?: boolean,
+};
+
+export function showGlobalError(err: Error, {msgType = 'error', type = 'error', noStack = false}: ShowGlobalErrorOpts = {}) {
+  const kind = type === 'unhandledrejection' ? 'promise rejection' : 'error';
+  const msg = msgType === 'error' ? `JavaScript ${kind}: ${err.message}` : err.message;
+  const stack = noStack ? undefined : err.stack;
   const msgContainer = document.querySelector('.page-content') ?? document.body;
   if (!msgContainer) {
     alert(`${msgType}: ${msg}`);
@@ -12,14 +24,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"></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" aria-label="${window.config.i18n.copy}"></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})` : '';
+  if (stack) msgDiv.querySelector('.js-global-error-stack')!.textContent = stack;
   msgContainer.prepend(msgDiv);
 }
 
@@ -46,12 +82,16 @@ 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;
 
+  const eventType = type === 'unhandledrejection' ? 'unhandledrejection' : 'error';
+  if (err instanceof Error && err.stack) {
+    showGlobalError(err, {type: eventType});
+    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.`);
+  const wrapped = new Error(msg);
+  wrapped.stack = err?.stack;
+  showGlobalError(wrapped, {type: eventType});
 }

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

@@ -109,6 +109,20 @@ 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');
+  try {
+    const el = document.createElement('relative-time');
+    el.setAttribute('datetime', new Date(Date.now() - 3 * 60 * 1000).toISOString());
+    document.body.append(el);
+    await Promise.resolve();
+    expect(getText(el)).toBe('3 minutes ago');
+    el.remove();
+  } finally {
+    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 {