@vtex/faststore-plugin-buyer-portal 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.4] - 2025-10-16
+
+- Error boundary:
+  - Updating the authentication loader to provide detailed error context.
+
 ## [1.3.3] - 2025-10-16
 
 ### Added
@@ -115,10 +120,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.3...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/1.3.4...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
 [1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
 
 [1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
+
+[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/shared/components/Error/error.scss

@@ -33,6 +33,7 @@
     padding: var(--fs-spacing-4);
     border-radius: var(--fs-border-radius-medium);
     position: relative;
+    max-width: 100%;
 
     [data-fs-bp-error-details-type] {
       position: absolute;
@@ -56,6 +57,7 @@
       font-weight: var(--fs-text-weight-medium);
       color: #e2e2e2;
       text-wrap: wrap;
+      overflow-wrap: break-word;
     }
 
     [data-fs-bp-error-details-stack] {
@@ -63,12 +65,16 @@
       margin: var(--fs-spacing-4) 0;
       font-weight: var(--fs-text-weight-medium);
       text-wrap: wrap;
+      max-width: 100%;
+      overflow-wrap: break-word;
     }
 
     [data-fs-bp-error-details-component] {
       font-size: var(--fs-text-size-2);
       font-weight: var(--fs-text-weight-medium);
       text-wrap: wrap;
+      overflow-wrap: break-word;
+      max-width: 100%;
     }
   }
 }

package/src/features/shared/types/AuthRouteProps.ts

@@ -1,5 +1,18 @@
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
 import { ClientContext } from "../utils";
 
 export type AuthRouteProps<T> =
-  | { authorized: true; data: T; clientContext: ClientContext }
-  | { authorized: false };
+  | {
+      authorized: true;
+      data: T;
+      clientContext: ClientContext;
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  | {
+      authorized: false;
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+      data?: T;
+      clientContext?: ClientContext;
+    };

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.3";
+export const CURRENT_VERSION = "1.3.4";

package/src/features/shared/utils/withAuth.tsx

@@ -2,30 +2,42 @@ import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
+
 import type { AuthRouteProps } from "../types";
 
 /**
  * HOC that checks only for authorization
  */
 export const withAuth = <T extends Record<string, unknown>>(
-  Component: ComponentType<T>
+  Component: ComponentType<T & { hasError?: boolean }>
 ) => {
-  return function AuthenticatedComponent(props: AuthRouteProps<T>) {
+  return function AuthenticatedComponent(
+    props: AuthRouteProps<T> & {
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  ) {
     const router = useRouter();
 
     useEffect(() => {
       // If not authorized, reload the page
-      if (!props?.authorized) {
+      if (!props?.authorized && !props?.hasError) {
         router.reload();
       }
-    }, [props?.authorized, router]);
+    }, [props?.authorized, props?.hasError, router]);
 
-    // If not authorized, render nothing
-    if (!props?.authorized) {
+    if (!props?.authorized && !props?.hasError && !props?.error) {
       return null;
     }
 
     // If authorized, render the component with the data
-    return <Component {...(props.data as T)} />;
+    return (
+      <Component
+        {...(props.data as T)}
+        hasError={props?.hasError}
+        error={props?.error}
+      />
+    );
   };
 };

package/src/features/shared/utils/withAuthLoader.ts

@@ -37,11 +37,23 @@ export const withAuthLoader = async <T>(
   } catch (error) {
     console.error("Auth validation failed:", error);
 
-    data.res?.writeHead(302, { Location: "/" });
-    data.res?.end();
-
     return {
       authorized: false,
+      hasError: true,
+      error: {
+        error: {
+          message: (error as Error).message,
+          name: (error as Error).name,
+          stack: (error as Error).stack || undefined,
+        },
+        extra: {
+          query: data.query,
+        },
+        tags: {
+          component: "AuthLoader",
+          errorType: "auth_error",
+        },
+      },
     };
   }
 };

package/src/features/shared/utils/withAuthProvider.tsx

@@ -3,6 +3,7 @@ import { useEffect, type ComponentType } from "react";
 import { useRouter } from "next/router";
 
 import { BuyerPortalProvider } from "../components";
+import { ErrorBoundaryProps } from "../components/ErrorBoundary/types";
 
 import type { AuthRouteProps } from "../types";
 import type { ClientContext } from "./getClientContext";
@@ -13,7 +14,12 @@ import type { ClientContext } from "./getClientContext";
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
 ) => {
-  return function WrappedPage(props: AuthRouteProps<T>) {
+  return function WrappedPage(
+    props: AuthRouteProps<T> & {
+      hasError?: boolean;
+      error?: ErrorBoundaryProps;
+    }
+  ) {
     const router = useRouter();
 
     useEffect(() => {
@@ -23,14 +29,18 @@ export const withAuthProvider = <T,>(
       }
     }, [props?.authorized, router]);
 
-    // Se não está autorizado, não renderiza nada
-    if (!props?.authorized) {
+    if (!props?.authorized && !props?.hasError && !props?.error) {
       return null;
     }
 
     return (
-      <BuyerPortalProvider clientContext={props?.clientContext}>
-        <Component {...props.data} clientContext={props?.clientContext} />
+      <BuyerPortalProvider
+        clientContext={props?.clientContext as ClientContext}
+      >
+        <Component
+          {...(props.data as T)}
+          clientContext={props?.clientContext as ClientContext}
+        />
       </BuyerPortalProvider>
     );
   };