fix: Parse JSON description in NewHero component

- Import parseDescription in NewHero.tsx - Use parseDescription for featured product description
fix: Suppress hydration warnings from browser extensions
2026-03-21 13:12:30 +02:00 · 2026-03-21 13:09:31 +02:00 · 2026-03-21 13:06:14 +02:00 · 2026-03-21 13:02:55 +02:00
5 changed files with 111 additions and 6 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./globals.css";
 import type { Metadata } from "next";
+import ErrorBoundary from "@/components/providers/ErrorBoundary";

 export const metadata: Metadata = {
  title: {
@@ -16,15 +17,20 @@ export const metadata: Metadata = {
  },
 };

+// Suppress extension-caused hydration warnings
+const suppressHydrationWarning = true;
+
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en">
-      <body className="antialiased">
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased" suppressHydrationWarning>
+        <ErrorBoundary>
+          {children}
+        </ErrorBoundary>
      </body>
    </html>
  );
--- a/src/components/home/NewHero.tsx
+++ b/src/components/home/NewHero.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
 import type { Product } from "@/types/saleor";
-import { getProductPrice, getProductImage, formatPrice } from "@/lib/saleor";
+import { getProductPrice, getProductImage, formatPrice, parseDescription } from "@/lib/saleor";

 interface NewHeroProps {
  featuredProduct?: Product;
@@ -87,7 +87,7 @@ export default function NewHero({ featuredProduct }: NewHeroProps) {

                {/* Description */}
                <p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2">
-                  {featuredProduct.description?.replace(/<[^>]*>/g, "").slice(0, 100) ||
+                  {parseDescription(featuredProduct.description).slice(0, 100) ||
                    "Premium natural oil for hair and skin care"}
                </p>

--- a/src/components/providers/ErrorBoundary.tsx
+++ b/src/components/providers/ErrorBoundary.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Ignore browser extension errors
+    if (error.message?.includes('tron') || 
+        error.message?.includes('chrome-extension') ||
+        error.stack?.includes('chrome-extension')) {
+      console.warn('Browser extension error ignored:', error.message);
+      // Reset error state to continue rendering
+      this.setState({ hasError: false });
+      return;
+    }
+    
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      // Check if it's an extension error
+      if (this.state.error?.message?.includes('tron') ||
+          this.state.error?.stack?.includes('chrome-extension')) {
+        // Silently recover and render children
+        return this.props.children;
+      }
+      
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4">
+          <div className="text-center">
+            <h2 className="text-2xl font-serif mb-4">Something went wrong</h2>
+            <button
+              onClick={() => this.setState({ hasError: false })}
+              className="px-6 py-3 bg-foreground text-white"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
--- a/src/lib/saleor/index.ts
+++ b/src/lib/saleor/index.ts
@@ -32,4 +32,5 @@ export {
  isProductAvailable,
  formatPrice,
  getLocalizedProduct,
+  parseDescription,
 } from "./products";
--- a/src/lib/saleor/products.ts
+++ b/src/lib/saleor/products.ts
@@ -81,6 +81,39 @@ export function formatPrice(amount: number, currency: string = "RSD"): string {
  }).format(amount);
 }

+// Parse Saleor's JSON description format (EditorJS) to plain text/HTML
+export function parseDescription(description: string | null | undefined): string {
+  if (!description) return "";
+  
+  // If it's already plain text (not JSON), return as-is
+  if (!description.startsWith("{")) {
+    return description;
+  }
+  
+  try {
+    const parsed = JSON.parse(description);
+    
+    // Handle EditorJS format: { blocks: [{ data: { text: "..." } }] }
+    if (parsed.blocks && Array.isArray(parsed.blocks)) {
+      return parsed.blocks
+        .map((block: any) => {
+          if (block.data?.text) {
+            return block.data.text;
+          }
+          return "";
+        })
+        .filter(Boolean)
+        .join("\n\n");
+    }
+    
+    // Fallback: return stringified if unknown format
+    return description;
+  } catch (e) {
+    // If JSON parse fails, return original
+    return description;
+  }
+}
+
 // Get localized product data
 export function getLocalizedProduct(
  product: Product,
@@ -94,11 +127,13 @@ export function getLocalizedProduct(
 } {
  const isEnglish = locale.toLowerCase() === "en";
  const translation = isEnglish ? product.translation : null;
+  
+  const rawDescription = translation?.description || product.description;

  return {
    name: translation?.name || product.name,
    slug: translation?.slug || product.slug,
-    description: translation?.description || product.description,
+    description: parseDescription(rawDescription),
    seoTitle: translation?.seoTitle || product.seoTitle,
    seoDescription: translation?.seoDescription || product.seoDescription,
  };
Author	SHA1	Message	Date
Unchained	9d639fbd64	fix: Parse JSON description in NewHero component - Import parseDescription in NewHero.tsx - Use parseDescription for featured product description	2026-03-21 13:12:30 +02:00
Unchained	0831968881	fix: Suppress hydration warnings from browser extensions - Add suppressHydrationWarning to html and body elements - Prevents FoxClocks and other extensions from causing errors - Extensions modifying DOM won't break React hydration	2026-03-21 13:09:31 +02:00
Unchained	3aaad57076	fix: Parse Saleor JSON description format to plain text - Add parseDescription() helper to extract text from EditorJS JSON - Update getLocalizedProduct to use parsed description - Fix product descriptions showing raw JSON on frontend	2026-03-21 13:06:14 +02:00
Unchained	01d553bfea	fix: Add error boundary to handle browser extension errors - Create ErrorBoundary component to catch extension errors - Ignore TronLink and other chrome-extension errors - Prevent extension conflicts from crashing the app	2026-03-21 13:02:55 +02:00