NextJS 13 app目录下global-error.js无法捕获布局中异步组件错误的问题求助

最近我在尝试用NextJS 13 app目录下的error.js和global-error.js错误处理机制，刚好最近改了代码引入了一堆错误，正好可以测试这个功能😅

我在/app目录下同时创建了error.js和global-error.js，按照我的理解，global-error.js是兜底的超级 fallback，专门用来捕获/app/layout.js里出现的错误。

但现在遇到了个问题：当我访问根路径localhost:3000/时，客户端弹出了如下错误：

Warning: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Toaster
TrackProvider
Providers
div
body
html
Component@
RedirectBoundary
Component@
NotFoundBoundary
DevRootNotFoundBoundary
PureComponent@
HotReload
Router
Component@
ErrorBoundary
AppRouter
ServerRoot
RSCComponent
Root
PureComponent@

我定位到错误根源：是我在Toaster组件里用了async/await来优化加载导致的，代码如下：

export const Toaster = async (props) => {

const {
Toast,
ToastCloseTrigger,
ToastDescription,
ToastGroup,
ToastPlacements,
ToastProvider,
ToastTitle
} = (await import('@ark-ui/react'));

// ... 组件其他逻辑

我现在的疑问是：为什么这个错误没有被global-error.js捕获到？

为了排除global-error.js自身出错的可能，我已经把它简化到最基础的版本了，代码如下：

'use client';

import { useEffect } from 'react';

// import '@/global.css';
// import { FontMerriweather, FontRoboto } from '@/styles/font';
// import { Heading } from '@/components/atoms/Heading';

export default function Error({ error, reset }) {

useEffect(() => {
// TODO: Log error to reporting service
console.error(error);
}, [error]);

return (
// <html lang='en' className={`${FontMerriweather.variable} ${FontRoboto.variable}`}>
<html lang='en' >
<body>
{/* <Heading> */}
<h2>
Something went wrong globally!
</h2>
{/* </Heading> */}
<button onClick={reset}>
Try Again
</button>
</body>
</html>
)
}

补充一下：这个出问题的Toaster组件是在全局布局的Providers里引入的，相关代码如下：

/app/layout.js：

export default function RootLayout({ children }) {
return (
<html lang='en' className={`${FontMerriweather.variable} ${FontRoboto.variable}`}>
<body>
<Flex direction={'column'} minH={'100vh'} pos={'relative'}>
<Providers>
...
</Providers>
</Flex>
</body>
</html>
)
}

/app/Provider.js：

'use client';

import { Toaster } from '@/components/molecules/Toaster';
import TrackProvider from '@/utils/trackProvider';

function Providers({children}) {
return (
<TrackProvider>
<Toaster>
{children}
</Toaster>
</TrackProvider>
)
}

export default Providers;

我知道这个错误本身不难修复，但就是搞不懂为什么global-error.js没捕获到它，有没有大佬能帮忙解释下原因？

备注：内容来源于stack exchange，提问作者philolegein