DevErrorNotifier

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({
             </StackTheme>
           </StackProvider>
         </ThemeProvider>
+        <DevErrorNotifier />
         <Toaster />
       </body>
     </html>

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;
+}

packages/stack-server/src/components/site-loading-indicator.tsx

@@ -1,3 +1,7 @@
 export function SiteLoadingIndicator() {
-  return <span className="loader"></span>;
-}
+  // 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 <span>
+    <span className="loader" />
+  </span>;
+}