-2

apps/web/next.config.js

··· 15 15 // "better-sqlite3" 16 16 ], 17 17 optimizePackageImports: ["@tremor/react"], 18 18 - // FIXME: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 19 19 - missingSuspenseWithCSRBailout: false, 20 18 }, 21 19 logging: { 22 20 fetches: {

+22 -13

apps/web/src/app/(content)/features/monitoring/page.tsx

··· 10 10 import { marketingProductPagesConfig } from "@/config/pages"; 11 11 import { flyRegions } from "@openstatus/db/src/schema/constants"; 12 12 import type { Region } from "@openstatus/tinybird"; 13 13 - import { Button } from "@openstatus/ui"; 13 13 + import { Button } from "@openstatus/ui/src/components/button"; 14 14 + import { Skeleton } from "@openstatus/ui/src/components/skeleton"; 14 15 import { allUnrelateds } from "contentlayer/generated"; 15 16 import type { Metadata } from "next"; 16 17 import Link from "next/link"; ··· 55 56 title="Global Monitoring." 56 57 subTitle="Get insights of the latency worldwide." 57 58 component={ 58 58 - <div className="m-auto"> 59 59 - <RegionsPreset 60 60 - regions={flyRegions as unknown as Region[]} 61 61 - selectedRegions={flyRegions as unknown as Region[]} 62 62 - /> 63 63 - </div> 59 59 + <Suspense fallback={<Skeleton />}> 60 60 + <div className="m-auto"> 61 61 + <RegionsPreset 62 62 + regions={flyRegions as unknown as Region[]} 63 63 + selectedRegions={flyRegions as unknown as Region[]} 64 64 + /> 65 65 + </div> 66 66 + </Suspense> 64 67 } 65 68 col={1} 66 69 position={"left"} ··· 70 73 iconText="Timing & Assertions" 71 74 title="Validate the response." 72 75 subTitle="Check the return value, status code, header or maximum response time." 73 73 - component={<AssertionsTimingFormExample />} 76 76 + component={ 77 77 + <Suspense fallback={<Skeleton />}> 78 78 + <AssertionsTimingFormExample />{" "} 79 79 + </Suspense> 80 80 + } 74 81 col={2} 75 82 position={"left"} 76 83 withGradient ··· 81 88 title="Optimize Web Performance." 82 89 subTitle="Analyze DNS, TCP, TLS, and TTFB for every request and inspect Response Headers as needed." 83 90 component={ 84 84 - <ResponseDetailTabs 85 85 - {...mockResponseData} 86 86 - defaultOpen="timing" 87 87 - hideInfo={false} 88 88 - /> 91 91 + <Suspense fallback={<Skeleton />}> 92 92 + <ResponseDetailTabs 93 93 + {...mockResponseData} 94 94 + defaultOpen="timing" 95 95 + hideInfo={false} 96 96 + /> 97 97 + </Suspense> 89 98 } 90 99 col={2} 91 100 position={"left"}

+26

apps/web/src/app/PostHogPageView.tsx

··· 1 1 + // app/PostHogPageView.tsx 2 2 + "use client"; 3 3 + 4 4 + import { usePathname, useSearchParams } from "next/navigation"; 5 5 + import { usePostHog } from "posthog-js/react"; 6 6 + import { useEffect } from "react"; 7 7 + 8 8 + export default function PostHogPageView(): null { 9 9 + const pathname = usePathname(); 10 10 + const searchParams = useSearchParams(); 11 11 + const posthog = usePostHog(); 12 12 + useEffect(() => { 13 13 + // Track pageviews 14 14 + if (pathname && posthog) { 15 15 + let url = window.origin + pathname; 16 16 + if (searchParams.toString()) { 17 17 + url = `${url}?${searchParams.toString()}`; 18 18 + } 19 19 + posthog.capture("$pageview", { 20 20 + $current_url: url, 21 21 + }); 22 22 + } 23 23 + }, [pathname, searchParams, posthog]); 24 24 + 25 25 + return null; 26 26 + }

-2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/path-card.tsx

··· 1 1 import { api } from "@/trpc/server"; 2 2 - import { useSearchParams } from "next/navigation"; 3 3 - import { use } from "react"; 4 2 import { RUMCard } from "../../_components/rum-card"; 5 3 6 4 export const PathCard = async ({

+1 -2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/overview/_components/session-table.tsx

··· 1 1 import { api } from "@/trpc/server"; 2 2 - import { useSearchParams } from "next/navigation"; 3 3 - import { use } from "react"; 2 2 + 4 3 import { DataTableWrapper } from "./data-table-wrapper"; 5 4 6 5 const SessionTable = async ({ dsn, path }: { dsn: string; path: string }) => {

+6 -1

apps/web/src/app/app/layout.tsx

··· 1 1 import { SessionProvider } from "next-auth/react"; 2 2 3 3 - import { PHProvider, PostHogPageview } from "@/providers/posthog"; 3 3 + import { PHProvider } from "@/providers/posthog"; 4 4 + 5 5 + const PostHogPageview = dynamic(() => import("@/app/PostHogPageView"), { 6 6 + ssr: false, 7 7 + }); 4 8 5 9 import { Bubble } from "@/components/support/bubble"; 10 10 + import dynamic from "next/dynamic"; 6 11 7 12 export default function AuthLayout({ 8 13 children, // will be a page or nested layout

-4

apps/web/src/app/layout.tsx

··· 46 46 // biome-ignore lint/nursery/useSortedClasses: <explanation> 47 47 } ${calSans.variable}`} 48 48 > 49 49 - {/* Only include RUM in prod */} 50 50 - {process.env.NODE_ENV === "production" && ( 51 51 - <OpenStatusProvider dsn="openstatus" /> 52 52 - )} 53 49 <ThemeProvider attribute="class" defaultTheme="light" enableSystem> 54 50 <Background>{children}</Background> 55 51 <Toaster richColors />

+2

apps/web/src/components/dashboard/tabs.tsx

··· 1 1 + "use client"; 2 2 + 1 3 import { 2 4 Separator, 3 5 Tabs as ShadcnTabs,

+4 -1

apps/web/src/lib/toast.tsx

··· 17 17 description: "Please try again", 18 18 action: { 19 19 label: "Discord", 20 20 - onClick: () => window.open("/discord", "_blank")?.location, 20 20 + onClick: () => { 21 21 + if (typeof window === "undefined") return; 22 22 + window.open("/discord", "_blank")?.location; 23 23 + }, 21 24 }, 22 25 }, 23 26 "unique-slug": {

-21

apps/web/src/providers/posthog.tsx

··· 1 1 "use client"; 2 2 3 3 import type { User } from "next-auth"; 4 4 - import { usePathname, useSearchParams } from "next/navigation"; 5 4 import type { CaptureOptions, Properties } from "posthog-js"; 6 5 import posthog from "posthog-js"; 7 6 import { PostHogProvider } from "posthog-js/react"; 8 8 - import { useEffect } from "react"; 9 7 10 8 import { env } from "@/env"; 11 9 ··· 15 13 capture_pageview: false, // Disable automatic pageview capture, as we capture manually 16 14 disable_session_recording: false, // Enable automatic session recording 17 15 }); 18 18 - } 19 19 - 20 20 - export function PostHogPageview(): JSX.Element { 21 21 - const pathname = usePathname(); 22 22 - const searchParams = useSearchParams(); 23 23 - 24 24 - useEffect(() => { 25 25 - if (pathname) { 26 26 - let url = window.origin + pathname; 27 27 - if (searchParams?.toString()) { 28 28 - url = `${url}?${searchParams.toString()}`; 29 29 - } 30 30 - posthog.capture("$pageview", { 31 31 - $current_url: url, 32 32 - }); 33 33 - } 34 34 - }, [pathname, searchParams]); 35 35 - 36 36 - return <></>; 37 16 } 38 17 39 18 export function PHProvider({ children }: { children: React.ReactNode }) {