@faststore/core 4.5.1 → 4.6.0-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "4.5.1",
+  "version": "4.6.0-dev.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -71,11 +71,11 @@
     "style-loader": "^3.3.1",
     "swr": "^2.2.5",
     "use-sync-external-store": "^1.6.0",
-    "@faststore/lighthouse": "4.5.1",
-    "@faststore/ui": "4.5.1",
-    "@faststore/diagnostics": "4.5.1",
-    "@faststore/sdk": "4.5.1",
-    "@faststore/api": "4.5.1"
+    "@faststore/api": "4.6.0-dev.0",
+    "@faststore/diagnostics": "4.6.0-dev.0",
+    "@faststore/lighthouse": "4.6.0-dev.0",
+    "@faststore/sdk": "4.6.0-dev.0",
+    "@faststore/ui": "4.6.0-dev.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
@@ -88,7 +88,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/node": "20.19.13",
     "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/coverage-v8": "4.0.7",
+    "@vitest/coverage-v8": "4.0.18",
     "@vtex/prettier-config": "1.0.0",
     "axe-core": "^4.8.1",
     "cypress": "12.17.4",
@@ -99,7 +99,7 @@
     "is-ci": "^3.0.0",
     "jsdom": "^27.4.0",
     "typescript": "5.9.3",
-    "vitest": "4.0.7"
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
     "graphql": "16.11.0",

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -94,7 +94,6 @@ function ProductGrid({
     <ProductGridSkeleton
       aspectRatio={aspectRatio}
       loading={products.length === 0}
-      count={pageSize}
     >
       <UIProductGrid
         data-af-element={searchId && 'search-result'}

package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx

@@ -7,19 +7,16 @@ import ProductCardSkeleton from '../ProductCardSkeleton'
 interface ProductGridSkeletonProps {
   loading?: boolean
   aspectRatio?: number
-  /** How many placeholder cards to render — defaults to the global ITEMS_PER_PAGE. */
-  count?: number
 }
 
 function ProductGridSkeleton({
   children,
   aspectRatio,
   loading = true,
-  count = ITEMS_PER_PAGE,
 }: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
     <ul data-fs-product-grid>
-      {Array.from({ length: count }, (_, index) => (
+      {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
           <ProductCardSkeleton aspectRatio={aspectRatio} bordered />
         </li>

package/src/components/templates/SearchPage/SearchWrapper.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react'
 import { useSearch } from '@faststore/sdk'
 import { useRouter } from 'next/router'
 
@@ -41,19 +40,6 @@ export default function SearchWrapper({
     selectedFacets,
   })
 
-  const redirectUrl = pageProductGalleryData?.redirect?.url
-  const lastRedirectedUrl = useRef<string | null>(null)
-
-  // Intelligent Search redirects must run in an effect — calling router.replace
-  // during render re-fires on every state update (e.g. scrollRestoration's
-  // resetInfiniteScroll) and loops until the tab hangs.
-  useEffect(() => {
-    if (!redirectUrl || lastRedirectedUrl.current === redirectUrl) return
-
-    lastRedirectedUrl.current = redirectUrl
-    void router.replace(redirectUrl)
-  }, [redirectUrl, router])
-
   const emptySearchProps = storeConfig.experimental.enableSearchSSR
     ? {
         title: storeConfig.seo.search.bodyH1 ?? 'Showing results for:',
@@ -72,7 +58,11 @@ export default function SearchWrapper({
   }
 
   // Redirect when there are registered Intelligent Search redirects on VTEX Admin
-  if (redirectUrl) {
+  if (pageProductGalleryData?.redirect?.url) {
+    router.replace(pageProductGalleryData?.redirect?.url, null, {
+      shallow: true,
+    })
+
     return (
       <PageProvider context={{ globalSettings }}>
         <RenderSections globalSections={globalSections}>

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
-import { Suspense, useEffect, useState, type MouseEvent } from 'react'
+import { Suspense, useState, type MouseEvent } from 'react'
 
 import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
@@ -24,10 +24,6 @@ import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import styles from '../../sections/ProductGallery/section.module.scss'
-import GalleryPageHeightLock, {
-  getGalleryViewportBucket,
-  resolveReservedGalleryHeight,
-} from './GalleryPageHeightLock'
 import ProductGalleryPage from './ProductGalleryPage'
 const FilterSkeleton = dynamic(
   () =>
@@ -37,6 +33,8 @@ const FilterSkeleton = dynamic(
     )
 )
 
+const GalleryPageSkeleton = <ProductGridSkeleton loading />
+
 export interface ProductGalleryProps {
   title?: string
   searchTerm?: string
@@ -133,13 +131,7 @@ function ProductGallery({
   } = useOverrideComponents<'ProductGallery'>()
 
   const { openFilter, filter: displayFilter } = useUI()
-  const {
-    pages,
-    addNextPage,
-    addPrevPage,
-    itemsPerPage,
-    state: { term, sort, selectedFacets },
-  } = useSearch()
+  const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
   const context = usePage<SearchPageContext | PLPContext>()
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
@@ -159,25 +151,6 @@ function ProductGallery({
     (data as PLPContext['data'])?.collection?.meta?.selectedFacets ?? []
   const filter = useFilter(facets, initialSelectedFacets)
 
-  // Keep the results column tall on PDP→PLP back nav before pages remount.
-  // Only while products are loading — once grids paint, natural height wins
-  // (avoids huge gaps after a viewport resize with a stale reserved minHeight).
-  // Populate after mount so SSR/hydration always start at 0 (sessionStorage is
-  // client-only and would otherwise mismatch).
-  const [reservedGalleryHeight, setReservedGalleryHeight] = useState(0)
-
-  useEffect(() => {
-    setReservedGalleryHeight(
-      resolveReservedGalleryHeight(hasProductsLoaded, pages, {
-        path: globalThis.location.pathname,
-        term: term ?? null,
-        sort: sort ?? null,
-        selectedFacets,
-        viewport: getGalleryViewportBucket(),
-      })
-    )
-  }, [pages, term, sort, selectedFacets, hasProductsLoaded])
-
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
@@ -299,14 +272,7 @@ function ProductGallery({
               )}
             </FilterButtonSkeleton.Component>
           </div>
-          <div
-            data-fs-product-listing-results
-            style={
-              reservedGalleryHeight > 0
-                ? { minHeight: reservedGalleryHeight }
-                : undefined
-            }
-          >
+          <div data-fs-product-listing-results>
             {/* Add link to previous page. This helps on SEO */}
             {!!prev && (
               <div data-fs-product-listing-pagination="top">
@@ -347,36 +313,25 @@ function ProductGallery({
                 </LinkButtonPrev.Component>
               </div>
             )}
-            {/* Render ALL products.
-                Each page has its own Suspense boundary so a refetch on page N
-                does not unmount pages that already have data (avoids CLS when
-                returning from a PDP with infinite-scroll pages restored).
-                GalleryPageHeightLock keeps the last measured page height while
-                skeletons are shown so the list does not collapse — including
-                the initial !hasProductsLoaded frame. */}
-            {pages.map((page) => (
-              <GalleryPageHeightLock key={`gallery-page-${page}`} page={page}>
-                {hasProductsLoaded ? (
-                  <Suspense
-                    fallback={
-                      <ProductGridSkeleton loading count={itemsPerPage} />
-                    }
-                  >
-                    <ProductGalleryPage
-                      page={page}
-                      title={title}
-                      productCard={productCard}
-                      itemsPerPage={itemsPerPage}
-                      firstPage={pages[0]}
-                      shouldShowComparison={showComparisonProducts}
-                      compareLabel={productComparison?.labels?.compareButton}
-                    />
-                  </Suspense>
-                ) : (
-                  <ProductGridSkeleton loading count={itemsPerPage} />
-                )}
-              </GalleryPageHeightLock>
-            ))}
+            {/* Render ALL products */}
+            {hasProductsLoaded ? (
+              <Suspense fallback={GalleryPageSkeleton}>
+                {pages.map((page) => (
+                  <ProductGalleryPage
+                    key={`gallery-page-${page}`}
+                    page={page}
+                    title={title}
+                    productCard={productCard}
+                    itemsPerPage={itemsPerPage}
+                    firstPage={pages[0]}
+                    shouldShowComparison={showComparisonProducts}
+                    compareLabel={productComparison?.labels?.compareButton}
+                  />
+                ))}
+              </Suspense>
+            ) : (
+              GalleryPageSkeleton
+            )}
             {/* Add link to next page. This helps on SEO */}
             {next !== false && (
               <div data-fs-product-listing-pagination="bottom">

package/src/instrumentation.ts

@@ -1,17 +1,25 @@
 import config from '../discovery.config'
 import pkgJSON from '../package.json'
 
+/**
+ * Next.js instrumentation hook. This is the only place telemetry is booted, so
+ * the OTel SDK is registered before any request is served.
+ */
 export async function register() {
-  if (
-    process.env.NEXT_RUNTIME === 'nodejs' &&
-    config.analytics.otelEnabled === true
-  ) {
+  // Disabled feature until release date
+  const instrumentationEnabled = false
+
+  // The runtime check must wrap the import instead of guarding with an early
+  // return: bundlers replace `process.env.NEXT_RUNTIME` with a literal, so only
+  // a positive branch gets dropped from the edge bundle. Left reachable, the
+  // OTel SDK pulls in Node builtins (`fs`, `zlib`, `stream`) that fail to resolve.
+  if (process.env.NEXT_RUNTIME === 'nodejs' && instrumentationEnabled) {
     const { name, version } = pkgJSON
+
     try {
       const { getTelemetryClient } = await import('@faststore/diagnostics')
-      console.log('Instrumemtation.ts: Getting telemetry client')
 
-      return getTelemetryClient({
+      return await getTelemetryClient({
         serviceName: config.analytics?.serviceName ?? name,
         version,
         account: config.api.storeId,
@@ -19,7 +27,7 @@ export async function register() {
         packageName: name,
       })
     } catch (error) {
-      console.error('Failed to initialize OTEL Instrumentation')
+      console.error('Failed to initialize OTEL Instrumentation', error)
     }
   }
 }

package/src/pages/api/graphql.ts

@@ -13,6 +13,9 @@ import { getRequestHostname } from 'src/utils/getRequestHostname'
 import { isLocalHost } from 'src/utils/isLocalHost'
 import { shouldForceRefreshTokenForValidateSession } from 'src/utils/validateSessionRefreshToken'
 import { execute } from '../../server'
+import { logger } from '@faststore/diagnostics'
+
+const OTELLogger = logger('@faststore/core')
 
 const DEFAULT_MAX_AGE = 5 * 60 // 5 minutes
 const DEFAULT_STALE_WHILE_REVALIDATE = 60 * 60 // 1 hour
@@ -150,6 +153,12 @@ const hasVtexIdclientAutCookie = (request: NextApiRequest): boolean => {
 const handler: NextApiHandler = async (request, response) => {
   if (request.method !== 'POST' && request.method !== 'GET') {
     response.status(405).end()
+    OTELLogger(
+      'info',
+      'Invalid request method: %s %s',
+      request.method,
+      request.url
+    )
 
     return
   }
@@ -158,6 +167,15 @@ const handler: NextApiHandler = async (request, response) => {
     // value is used to cache bust the request if there is a VtexIdclientAutCookie
     const { operation, variables, query, v: value } = parseRequest(request)
 
+    // Variables and the query body are deliberately not logged: they carry
+    // session and customer data.
+    OTELLogger(
+      'debug',
+      'operation: %s hash: %s',
+      operation?.__meta__?.operationName,
+      operation?.__meta__?.operationHash
+    )
+
     const isLocal = isLocalHost(getRequestHostname(request.headers.host))
 
     if (
@@ -209,18 +227,21 @@ const handler: NextApiHandler = async (request, response) => {
       // upstream status) is nested in `originalError`. Recover it so the BFF
       // propagates the real status instead of collapsing everything to 500.
       const fastStoreError = errors.map(recoverFastStoreError).find(Boolean)
+      const reportedErrors = errors.map((graphqlError) => {
+        const fsError = recoverFastStoreError(graphqlError)
+
+        return {
+          message: (graphqlError as { message?: string })?.message,
+          status: fsError?.extensions.status,
+          type: fsError?.extensions.type,
+        }
+      })
 
-      console.error(
-        'Graphql execution returned with error: ',
-        errors.map((graphqlError) => {
-          const fsError = recoverFastStoreError(graphqlError)
-
-          return {
-            message: (graphqlError as { message?: string })?.message,
-            status: fsError?.extensions.status,
-            type: fsError?.extensions.type,
-          }
-        })
+      console.error('Graphql execution returned with error: ', reportedErrors)
+      OTELLogger(
+        'error',
+        'Graphql execution returned with error: %o',
+        reportedErrors
       )
 
       const status = fastStoreError?.extensions.status ?? 500
@@ -304,6 +325,11 @@ const handler: NextApiHandler = async (request, response) => {
       'Something unexpected occurred querying Graphql endpoint: \n',
       err
     )
+    OTELLogger(
+      'error',
+      'Something unexpected occurred querying Graphql endpoint: %o',
+      err
+    )
 
     if (err instanceof BadRequestError) {
       response.status(400).end()