fix: ensure linkFailed event fires for 404, 500, and 403 errors in embeds (#25261)

- Add CalComPageStatus handling in NotFound and ErrorPage components using useLayoutEffect
- Remove redundant pageStatus logic from PageWrapperAppDir.tsx since App Router error/notFound pages set status themselves
- Refactor embed-iframe.ts: split checkPageStatusAndHandleError into hasPageError() and handlePageError()
- Add page status checks before firing linkReady to catch errors set after initialization
- Ensures linkFailed event fires correctly for all error status codes in embed scenarios

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/web/app/notFoundClient.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useLayoutEffect } from "react";
 
 import {
   getOrgDomainConfigFromHostname,
@@ -40,9 +41,8 @@ function getPageInfo(pathname: string, host: string) {
     return {
       username: currentOrgDomain ?? "",
       pageType: PageType.ORG,
-      url: `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${
-        currentOrgDomain?.replace("/", "") ?? ""
-      }`,
+      url: `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${currentOrgDomain?.replace("/", "") ?? ""
+        }`,
     };
   }
 }
@@ -55,6 +55,12 @@ export function NotFound({ host }: { host: string }) {
   const isSubpage = pathname?.includes("/", 2) || isBookingSuccessPage;
   const isInsights = pathname?.startsWith("/insights");
 
+  useLayoutEffect(() => {
+    if (typeof window !== "undefined") {
+      window.CalComPageStatus = "404";
+    }
+  }, []);
+
   const links = [
     {
       title: t("enterprise"),
@@ -156,9 +162,8 @@ export function NotFound({ host }: { host: string }) {
                         <span className="focus:outline-none">
                           <span className="absolute inset-0" aria-hidden="true" />
                           {t("register")}{" "}
-                          <strong className="text-green-500">{`${
-                            pageType === PageType.TEAM ? `${new URL(WEBSITE_URL).host}/team/` : ""
-                          }${username}${pageType === PageType.ORG ? `.${subdomainSuffix()}` : ""}`}</strong>
+                          <strong className="text-green-500">{`${pageType === PageType.TEAM ? `${new URL(WEBSITE_URL).host}/team/` : ""
+                            }${username}${pageType === PageType.ORG ? `.${subdomainSuffix()}` : ""}`}</strong>
                         </span>
                       </span>
                     </h3>

apps/web/components/PageWrapperAppDir.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { usePathname } from "next/navigation";
-import Script from "next/script";
-
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 
@@ -16,16 +13,6 @@ export type PageWrapperProps = Readonly<{
 }>;
 
 function PageWrapper(props: PageWrapperProps) {
-  const pathname = usePathname();
-  let pageStatus = "200";
-
-  if (pathname === "/404") {
-    pageStatus = "404";
-  } else if (pathname === "/500") {
-    pageStatus = "500";
-  } else if (pathname === "/403") {
-    pageStatus = "403";
-  }
 
   // On client side don't let nonce creep into DOM
   // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
@@ -41,13 +28,6 @@ function PageWrapper(props: PageWrapperProps) {
     <>
       <AppProviders {...providerProps}>
         <>
-          <Script
-            nonce={nonce}
-            id="page-status"
-            // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
-            // And we don't want it to error here anyways
-            dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
-          />
           {props.requiresLicense ? (
             <LicenseRequired>{props.children}</LicenseRequired>
           ) : (

apps/web/components/error/error-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { useLayoutEffect } from "react";
 
 import "@calcom/embed-core/src/embed-iframe";
 import { HttpError } from "@calcom/lib/http-error";
@@ -59,6 +59,14 @@ export const ErrorPage: React.FC<Props> = (props) => {
     window.location.reload();
     props.reset?.();
   };
+
+  // useLayoutEffect runs synchronously before browser paint, ensuring it's set early
+  useLayoutEffect(() => {
+    if (statusCode && typeof window !== "undefined") {
+      window.CalComPageStatus = statusCode.toString();
+    }
+  }, [statusCode]);
+
   return (
     <>
       <div className="bg-subtle flex h-screen">