Error Handling & Graceful Degradation

// src/lib/optimizely/client.ts - two distinct error cases

// Case 1: HTTP error (non-2xx response) → graphqlFetch THROWS
//   When: network issue, Graph is down, invalid API key, rate limit
//   Result: unhandled Error propagates up the call stack
//   Caller responsibility: wrap in try-catch if absence is acceptable

const response = await fetch(GRAPH_ENDPOINT, fetchOptions);
if (!response.ok) {
  throw new Error(
    `GraphQL request failed: ${response.status} ${response.statusText}`
  );
}

// Case 2: GraphQL errors (200 OK but errors[] in body) → graphqlFetch RETURNS
//   When: invalid query, unknown field, permission error on a field
//   Result: { data: null, errors: [{message: "..."}] } - does not throw
//   Caller responsibility: check result.errors if needed, handle data: null

const result: GraphQLResponse<T> = await response.json();
if (result.errors?.length) {
  console.error("[GraphQL Errors]", result.errors);
  // still returns - data may be partially populated
}
return result;

// src/app/[[...slug]]/page.tsx - the catch-all CMS route
//
// notFound() is called only when BOTH lookup strategies come up empty.
// This triggers Next.js to render the nearest not-found.tsx page (404).
// It is NOT called on Graph errors - those propagate as 500s.

import { notFound } from "next/navigation";

// Strategy 1: URL-based lookup via getContentByPath
let page = null;
for (const candidateUrl of candidateUrls) {
  const [result] = await client.getContentByPath(candidateUrl, variationFilter);
  if (result) { page = result; break; }
}

// Strategy 2: fallback key query via graphqlFetch
if (!page) {
  const res = await graphqlFetch(KEY_QUERY, { url });
  page = res.data?._Page?.items?.[0] ?? null;
}

// Only if both return nothing → 404
if (!page) notFound();

// ✅ 404 - content genuinely doesn't exist
// ❌ DON'T call notFound() on catch - a Graph error should be a 500, not a 404

// React Error Boundaries catch render errors in subtrees.
// Use them to isolate block-level failures - a broken chart block
// should not blank the entire page composition.

// src/components/cms/BlockErrorBoundary.tsx
"use client";
import { Component, type ReactNode } from "react";

export class BlockErrorBoundary extends Component<
  { children: ReactNode; fallback?: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error) {
    console.error("[Block render error]", error);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? null;   // render nothing by default
    }
    return this.props.children;
  }
}

// Wrap individual blocks in the composition renderer:
<BlockErrorBoundary key={node.key}>
  <OptimizelyComponent content={node} />
</BlockErrorBoundary>

// Preview mode edge cases - common sources of confusing errors.

// 1. Expired preview token
//    When: editor's CMS session times out while they have the preview open
//    Symptom: page renders with no content, or Graph returns 401
//    Fix: redirect to the CMS login page, or show a "Session expired" message

// src/app/preview/page.tsx
const previewToken = searchParams.get("token");
if (!previewToken) redirect("/");

const content = await getPreviewContent(url, previewToken);
if (!content) {
  // Token may be expired or the content item was deleted
  redirect(`/en${url}`);   // fall back to published version
}

// 2. Preview of a deleted item
//    getPreviewContent returns null → redirect to published URL

// 3. Preview of a new item with no published version
//    Published URL doesn't exist yet → redirect to CMS editor
//    (you can detect this by checking if the published content exists)