46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
interface RenderStartupErrorOptions {
|
|
reload?: () => void;
|
|
root?: HTMLElement | null;
|
|
}
|
|
|
|
/**
|
|
* 在 Vue 应用尚未挂载时展示可恢复的启动错误，避免异常后只剩白屏。
|
|
*/
|
|
function renderStartupError(options: RenderStartupErrorOptions = {}) {
|
|
const root = options.root ?? document.querySelector<HTMLElement>('#app');
|
|
if (!root) {
|
|
return false;
|
|
}
|
|
|
|
const container = document.createElement('main');
|
|
container.className = 'startup-error';
|
|
container.setAttribute('role', 'alert');
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'startup-error__content';
|
|
|
|
const title = document.createElement('h1');
|
|
title.className = 'startup-error__title';
|
|
title.textContent = '页面加载失败';
|
|
|
|
const description = document.createElement('p');
|
|
description.className = 'startup-error__description';
|
|
description.textContent = '请刷新后重试';
|
|
|
|
const retryButton = document.createElement('button');
|
|
retryButton.className = 'startup-error__retry';
|
|
retryButton.type = 'button';
|
|
retryButton.textContent = '重新加载';
|
|
retryButton.addEventListener('click', () => {
|
|
(options.reload ?? (() => window.location.reload()))();
|
|
});
|
|
|
|
content.append(title, description, retryButton);
|
|
container.append(content);
|
|
root.replaceChildren(container);
|
|
retryButton.focus();
|
|
return true;
|
|
}
|
|
|
|
export { renderStartupError };
|