🐛 CSR baileout (openstatusHQ#940)

* 🤔 * ci: apply automated fixes * 🐛 posthog * ci: apply automated fixes * 🐛 css * ci: apply automated fixes * 😭 csr baileout * 🤔 * ci: apply automated fixes * 😭 * 🚀 * 🚀 * 🚀 * 🚀 * 🚀 * 🚀 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
adityapandey51 · Jul 18, 2024 · 3a05e9f · 3a05e9f
1 parent 102d793
commit 3a05e9f
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 46 deletions.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -15,8 +15,6 @@ const nextConfig = {
       // "better-sqlite3"
     ],
     optimizePackageImports: ["@tremor/react"],
-    // FIXME: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
-    missingSuspenseWithCSRBailout: false,
   },
   logging: {
     fetches: {

diff --git a/apps/web/src/app/(content)/features/monitoring/page.tsx b/apps/web/src/app/(content)/features/monitoring/page.tsx
@@ -10,7 +10,8 @@ import { ResponseDetailTabs } from "@/components/ping-response-analysis/response
 import { marketingProductPagesConfig } from "@/config/pages";
 import { flyRegions } from "@openstatus/db/src/schema/constants";
 import type { Region } from "@openstatus/tinybird";
-import { Button } from "@openstatus/ui";
+import { Button } from "@openstatus/ui/src/components/button";
+import { Skeleton } from "@openstatus/ui/src/components/skeleton";
 import { allUnrelateds } from "contentlayer/generated";
 import type { Metadata } from "next";
 import Link from "next/link";
@@ -55,12 +56,14 @@ export default function FeaturePage() {
         title="Global Monitoring."
         subTitle="Get insights of the latency worldwide."
         component={
-          <div className="m-auto">
-            <RegionsPreset
-              regions={flyRegions as unknown as Region[]}
-              selectedRegions={flyRegions as unknown as Region[]}
-            />
-          </div>
+          <Suspense fallback={<Skeleton />}>
+            <div className="m-auto">
+              <RegionsPreset
+                regions={flyRegions as unknown as Region[]}
+                selectedRegions={flyRegions as unknown as Region[]}
+              />
+            </div>
+          </Suspense>
         }
         col={1}
         position={"left"}
@@ -70,7 +73,11 @@ export default function FeaturePage() {
         iconText="Timing & Assertions"
         title="Validate the response."
         subTitle="Check the return value, status code, header or maximum response time."
-        component={<AssertionsTimingFormExample />}
+        component={
+          <Suspense fallback={<Skeleton />}>
+            <AssertionsTimingFormExample />{" "}
+          </Suspense>
+        }
         col={2}
         position={"left"}
         withGradient
@@ -81,11 +88,13 @@ export default function FeaturePage() {
         title="Optimize Web Performance."
         subTitle="Analyze DNS, TCP, TLS, and TTFB for every request and inspect Response Headers as needed."
         component={
-          <ResponseDetailTabs
-            {...mockResponseData}
-            defaultOpen="timing"
-            hideInfo={false}
-          />
+          <Suspense fallback={<Skeleton />}>
+            <ResponseDetailTabs
+              {...mockResponseData}
+              defaultOpen="timing"
+              hideInfo={false}
+            />
+          </Suspense>
         }
         col={2}
         position={"left"}

diff --git a/apps/web/src/app/PostHogPageView.tsx b/apps/web/src/app/PostHogPageView.tsx
@@ -0,0 +1,26 @@
+// app/PostHogPageView.tsx
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+
+export default function PostHogPageView(): null {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const posthog = usePostHog();
+  useEffect(() => {
+    // Track pageviews
+    if (pathname && posthog) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+      posthog.capture("$pageview", {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams, posthog]);
+
+  return null;
+}
diff --git a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/path-card.tsx b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/path-card.tsx
@@ -1,6 +1,4 @@
 import { api } from "@/trpc/server";
-import { useSearchParams } from "next/navigation";
-import { use } from "react";
 import { RUMCard } from "../../_components/rum-card";
 
 export const PathCard = async ({

diff --git a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/session-table.tsx b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/session-table.tsx
@@ -1,6 +1,5 @@
 import { api } from "@/trpc/server";
-import { useSearchParams } from "next/navigation";
-import { use } from "react";
+
 import { DataTableWrapper } from "./data-table-wrapper";
 
 const SessionTable = async ({ dsn, path }: { dsn: string; path: string }) => {

diff --git a/apps/web/src/app/app/layout.tsx b/apps/web/src/app/app/layout.tsx
@@ -1,8 +1,13 @@
 import { SessionProvider } from "next-auth/react";
 
-import { PHProvider, PostHogPageview } from "@/providers/posthog";
+import { PHProvider } from "@/providers/posthog";
+
+const PostHogPageview = dynamic(() => import("@/app/PostHogPageView"), {
+  ssr: false,
+});
 
 import { Bubble } from "@/components/support/bubble";
+import dynamic from "next/dynamic";
 
 export default function AuthLayout({
   children, // will be a page or nested layout

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -46,10 +46,6 @@ export default function RootLayout({
           // biome-ignore lint/nursery/useSortedClasses: <explanation>
         } ${calSans.variable}`}
       >
-        {/* Only include RUM in prod */}
-        {process.env.NODE_ENV === "production" && (
-          <OpenStatusProvider dsn="openstatus" />
-        )}
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
           <Background>{children}</Background>
           <Toaster richColors />

diff --git a/apps/web/src/components/dashboard/tabs.tsx b/apps/web/src/components/dashboard/tabs.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Separator,
   Tabs as ShadcnTabs,

diff --git a/apps/web/src/lib/toast.tsx b/apps/web/src/lib/toast.tsx
@@ -17,7 +17,10 @@ const config = {
     description: "Please try again",
     action: {
       label: "Discord",
-      onClick: () => window.open("/discord", "_blank")?.location,
+      onClick: () => {
+        if (typeof window === "undefined") return;
+        window.open("/discord", "_blank")?.location;
+      },
     },
   },
   "unique-slug": {

diff --git a/apps/web/src/providers/posthog.tsx b/apps/web/src/providers/posthog.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import type { User } from "next-auth";
-import { usePathname, useSearchParams } from "next/navigation";
 import type { CaptureOptions, Properties } from "posthog-js";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
-import { useEffect } from "react";
 
 import { env } from "@/env";
 
@@ -17,25 +15,6 @@ if (typeof window !== "undefined") {
   });
 }
 
-export function PostHogPageview(): JSX.Element {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    if (pathname) {
-      let url = window.origin + pathname;
-      if (searchParams?.toString()) {
-        url = `${url}?${searchParams.toString()}`;
-      }
-      posthog.capture("$pageview", {
-        $current_url: url,
-      });
-    }
-  }, [pathname, searchParams]);
-
-  return <></>;
-}
-
 export function PHProvider({ children }: { children: React.ReactNode }) {
   if (process.env.NODE_ENV !== "production") {
     return <>{children}</>;