diff --git a/packages/stack-server/src/app/layout.tsx b/packages/stack-server/src/app/layout.tsx index 4ad1d202c..2c5b4d3a8 100644 --- a/packages/stack-server/src/app/layout.tsx +++ b/packages/stack-server/src/app/layout.tsx @@ -13,6 +13,7 @@ import { StackProvider, StackTheme } from '@stackframe/stack'; import { cn } from '@/lib/utils'; import { Toaster } from '@/components/ui/toaster'; import { ThemeProvider } from '@/components/theme-provider'; +import { DevErrorNotifier } from '@/components/dev-error-notifier'; export const metadata: Metadata = { title: { @@ -88,6 +89,7 @@ export default function RootLayout({ + diff --git a/packages/stack-server/src/components/dev-error-notifier.tsx b/packages/stack-server/src/components/dev-error-notifier.tsx new file mode 100644 index 000000000..7cac700c1 --- /dev/null +++ b/packages/stack-server/src/components/dev-error-notifier.tsx @@ -0,0 +1,34 @@ +"use client"; + +import { useEffect } from "react"; +import { useToast } from "./ui/use-toast"; + +const callbacks: ((prop: string, args: any[]) => void)[] = []; + +if (process.env.NODE_ENV === 'development') { + for (const prop of ["warn", "error"] as const) { + const original = console[prop]; + console[prop] = (...args) => { + original(...args, new Error("This error was caught by DevErrorNotifier, and the original stacktrace is below.")); + callbacks.forEach((cb) => cb(prop, args)); + }; + } +} + +export function DevErrorNotifier() { + const toast = useToast(); + + useEffect(() => { + callbacks.push((prop, args) => { + toast.toast({ + title: `[DEV] console.${prop} called!`, + description: `Please check the browser console. ${args.join(" ")}`, + }); + }); + return () => { + callbacks.pop(); + }; + }, [toast]); + + return null; +} diff --git a/packages/stack-server/src/components/site-loading-indicator.tsx b/packages/stack-server/src/components/site-loading-indicator.tsx index 76256ecbb..1261e8bd2 100644 --- a/packages/stack-server/src/components/site-loading-indicator.tsx +++ b/packages/stack-server/src/components/site-loading-indicator.tsx @@ -1,3 +1,7 @@ export function SiteLoadingIndicator() { - return ; -} \ No newline at end of file + // Next.js doesn't like a sticky or fixed position element at the root, so wrap it in a span + // https://github.com/shadcn-ui/ui/issues/1355 + return + + ; +}