fix(admin-web): 添加 global-error.tsx 修复部署后 Server Action 崩溃
问题：每次重新部署容器后，浏览器持有旧 bundle，Next.js App Router 内部 Server Action ID（"r"/"multi"）与新服务器不匹配，导致客户端抛出 未捕获异常，触发全屏 "Application error"（周期性崩溃根因）。 修复： - 添加 src/app/global-error.tsx（根级错误边界），检测到 stale bundle 相关错误时自动调用 window.location.reload()，无感知恢复 - 添加 src/app/(admin)/error.tsx（admin 路由段错误边界），同样自动刷新 - 两个边界均提供「立即刷新」「重试」按钮，防止极端情况下自动刷新失效 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4878449f8c
commit
f642ef1d56
|
|
@ -0,0 +1,92 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Admin 路由段错误边界
|
||||||
|
*
|
||||||
|
* 捕获 (admin) 路由内的客户端异常。
|
||||||
|
* 当检测到 Next.js stale bundle / Server Action 不匹配错误时自动刷新页面。
|
||||||
|
*/
|
||||||
|
export default function AdminError({
|
||||||
|
error,
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string };
|
||||||
|
reset: () => void;
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
const msg = error?.message ?? '';
|
||||||
|
const isStaleBundle =
|
||||||
|
msg.includes('Server Action') ||
|
||||||
|
msg.includes('Failed to find') ||
|
||||||
|
msg.includes('An unexpected response was received') ||
|
||||||
|
(error?.digest ?? '').startsWith('NEXT_');
|
||||||
|
|
||||||
|
if (isStaleBundle) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: '100%',
|
||||||
|
minHeight: '400px',
|
||||||
|
fontFamily: 'system-ui, sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '40px',
|
||||||
|
background: '#fff',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 2px 16px rgba(0,0,0,0.08)',
|
||||||
|
maxWidth: '400px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: '40px', marginBottom: '16px' }}>⚠️</div>
|
||||||
|
<h2 style={{ margin: '0 0 8px', fontSize: '18px', color: '#1a1a1a' }}>
|
||||||
|
页面加载出错
|
||||||
|
</h2>
|
||||||
|
<p style={{ margin: '0 0 24px', color: '#666', fontSize: '14px' }}>
|
||||||
|
检测到新版本，正在自动刷新…
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
style={{
|
||||||
|
padding: '8px 20px',
|
||||||
|
background: '#2563eb',
|
||||||
|
color: '#fff',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
立即刷新
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => reset()}
|
||||||
|
style={{
|
||||||
|
padding: '8px 20px',
|
||||||
|
background: '#f5f5f5',
|
||||||
|
color: '#333',
|
||||||
|
border: '1px solid #e0e0e0',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
重试
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Next.js App Router 根级错误边界
|
||||||
|
*
|
||||||
|
* 捕获未处理的客户端异常，避免显示 Next.js 默认的
|
||||||
|
* "Application error: a client-side exception has occurred" 全屏崩溃页。
|
||||||
|
*
|
||||||
|
* 常见触发场景：
|
||||||
|
* - 重新部署后，浏览器仍持有旧 bundle，内部 Server Action ID（"r" / "multi"）
|
||||||
|
* 已不匹配新服务器构建 → Failed to find Server Action → 客户端异常
|
||||||
|
* - 此时自动刷新页面即可恢复正常（加载新 bundle）
|
||||||
|
*
|
||||||
|
* global-error.tsx 必须自带 <html><body>，因为它会替换根 layout。
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function GlobalError({
|
||||||
|
error,
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string };
|
||||||
|
reset: () => void;
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
// 检测 Next.js stale bundle 导致的 Server Action 不匹配错误
|
||||||
|
// 自动刷新页面以加载新版本
|
||||||
|
const msg = error?.message ?? '';
|
||||||
|
const isStaleBundle =
|
||||||
|
msg.includes('Server Action') ||
|
||||||
|
msg.includes('Failed to find') ||
|
||||||
|
msg.includes('An unexpected response was received') ||
|
||||||
|
(error?.digest ?? '').startsWith('NEXT_');
|
||||||
|
|
||||||
|
if (isStaleBundle) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<body
|
||||||
|
style={{
|
||||||
|
margin: 0,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
height: '100vh',
|
||||||
|
background: '#f5f5f5',
|
||||||
|
fontFamily: 'system-ui, sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '40px',
|
||||||
|
background: '#fff',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 2px 16px rgba(0,0,0,0.08)',
|
||||||
|
maxWidth: '400px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: '40px', marginBottom: '16px' }}>⚠️</div>
|
||||||
|
<h2 style={{ margin: '0 0 8px', fontSize: '18px', color: '#1a1a1a' }}>
|
||||||
|
页面加载出错
|
||||||
|
</h2>
|
||||||
|
<p style={{ margin: '0 0 24px', color: '#666', fontSize: '14px' }}>
|
||||||
|
检测到新版本，正在自动刷新…
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
style={{
|
||||||
|
padding: '8px 20px',
|
||||||
|
background: '#2563eb',
|
||||||
|
color: '#fff',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
立即刷新
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => reset()}
|
||||||
|
style={{
|
||||||
|
padding: '8px 20px',
|
||||||
|
background: '#f5f5f5',
|
||||||
|
color: '#333',
|
||||||
|
border: '1px solid #e0e0e0',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
重试
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue