diff --git a/apps/web/next.config.js b/apps/web/next.config.js index fe19b395..8fdaadd5 100644 --- 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 index 1bcb45b1..e26d8487 100644 --- 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={ -
- -
+ }> +
+ +
+
} 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={} + component={ + }> + {" "} + + } 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={ - + }> + + } col={2} position={"left"} diff --git a/apps/web/src/app/PostHogPageView.tsx b/apps/web/src/app/PostHogPageView.tsx new file mode 100644 index 00000000..f7d95f23 --- /dev/null +++ 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 index 93ae1553..179811a3 100644 --- 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 index 97f400de..6c9fdaab 100644 --- 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 index 8ab747cf..3d366bdf 100644 --- 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 index bb92bc8a..c88b3204 100644 --- 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: } ${calSans.variable}`} > - {/* Only include RUM in prod */} - {process.env.NODE_ENV === "production" && ( - - )} {children} diff --git a/apps/web/src/components/dashboard/tabs.tsx b/apps/web/src/components/dashboard/tabs.tsx index a2671c5b..50d32db9 100644 --- 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 index 33ca9b18..4aa8de30 100644 --- 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 index 20855050..da11df47 100644 --- 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};