@akinon/next 1.21.0 → 1.22.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 1.22.0-rc.0
+
+### Minor Changes
+
+- 32668ed: ZERO-2296: Implement Checkout Provider Middleware and Enhancements
+- 0181251: ZERO-2440: move otp popup state to redux
+- 07cc81a: Add infinite and more types to pagination
+- 8d6caba: ZERO-2434: enhance error handling and logging in appFetch function
+- 1b4b0fa: Redis connection change to connection pool
+- b4452e9: ZERO-2463: Refactor Sentry initialization and add Sentry DSN option to settings
+- b2da5e4: Revert ZERO-2435
+
+### Patch Changes
+
+- da1e501: ZERO-2296: Fix ROUTES import
+
 ## 1.21.0
 
 ### Minor Changes

package/api/auth.ts

@@ -220,6 +220,17 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
     pages: {
       signIn: ROUTES.AUTH,
       error: ROUTES.AUTH
+    },
+    cookies: {
+      sessionToken: {
+        name: `__Secure-next-auth.session-token`,
+        options: {
+          httpOnly: true,
+          sameSite: 'none',
+          path: '/',
+          secure: true
+        }
+      }
     }
   };
 };

package/bin/pz-install-plugins.js

@@ -1,39 +1,71 @@
-#!/usr/bin/env node
-
 const fs = require('fs');
 const path = require('path');
-const rootDir = path.resolve(process.cwd());
-const spawn = require('cross-spawn');
-const availablePlugins = require('../plugins');
+const { execSync } = require('child_process');
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+  return insideNodeModules
+    ? process.cwd()
+    : path.resolve(__dirname, '../../../apps/projectzeronext');
+}
 
-let plugins;
+const BASE_DIR = findBaseDir();
+const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
+
+const packageJsonPath = getFullPath('package.json');
+let packageJson;
 
 try {
-  plugins = require(path.resolve(rootDir, './src/plugins.js'));
+  packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 } catch (error) {
-  console.error('No plugins.js file found, skipping plugin installation.');
-  process.exit(0);
+  console.error('Error reading package.json:', error);
+  process.exit(1);
 }
 
-let installCmd = [];
+const pluginsJsPath = getFullPath('src/plugins.js');
+let installedPlugins;
+
+try {
+  installedPlugins = require(pluginsJsPath);
+} catch (error) {
+  console.error('Error loading installed plugins:', error);
+  process.exit(1);
+}
 
-availablePlugins
-  .filter((p) => plugins?.includes(p))
-  .forEach((name) => {
-    installCmd.push(`@akinon/${name}`);
-  });
+const protectedPackages = ['@akinon/next', 'next'];
 
-spawn.sync('yarn', ['cache clean']);
+const pluginsToRemove = Object.keys(packageJson.dependencies || {}).filter(
+  (dep) =>
+    dep.startsWith('@akinon/') &&
+    !installedPlugins.includes(dep.replace('@akinon/', '')) &&
+    !protectedPackages.includes(dep)
+);
 
-for (const plugin of availablePlugins) {
-  spawn.sync('yarn', ['remove', `@akinon/${plugin}`]);
-}
+pluginsToRemove.forEach((plugin) => {
+  try {
+    execSync(`yarn remove ${plugin}`, { stdio: 'inherit', cwd: BASE_DIR });
+  } catch (error) {
+    console.warn(
+      `Warning: Could not remove ${plugin}. It may not have been installed.`
+    );
+  }
+});
 
-if (
-  installCmd.length > 0 &&
-  !fs.existsSync(path.resolve(rootDir, '../../turbo.json'))
-) {
-  spawn.sync('yarn', ['add', ...installCmd, '--ignore-scripts'], {
-    stdio: 'inherit'
-  });
-}
+installedPlugins.forEach((plugin) => {
+  const packageName = `@akinon/${plugin}`;
+  if (
+    !Object.keys(packageJson.dependencies || {}).includes(packageName) &&
+    !protectedPackages.includes(packageName)
+  ) {
+    try {
+      const version = packageJson.dependencies['@akinon/next'].replace('^', '');
+      const command = `yarn add ${packageName}@${version} --exact --ignore-scripts`;
+      execSync(command, { stdio: 'inherit', cwd: BASE_DIR });
+    } catch (error) {
+      console.warn(
+        '\n\x1b[33m%s\x1b[0m',
+        `Error adding ${packageName}: ${error}`
+      );
+    }
+  }
+});

package/data/client/wishlist.ts

@@ -20,6 +20,8 @@ interface GetStockParams {
 }
 
 interface GetFavoritesResponse {
+  next?: string | null;
+  previous?: string | null;
   count: number;
   results: FavoriteItem[];
 }

package/data/server/category.ts

@@ -15,7 +15,7 @@ function getCategoryDataHandler(
     const params = generateCommerceSearchParams(searchParams);
 
     const rawData = await appFetch<string>(
-      `${category.getCategoryByPk(pk)}${params ? params : ''}`,
+      `${category.getCategoryByPk(pk)}s${params ? params : ''}`,
       {
         headers: {
           Accept: 'application/json',
@@ -39,7 +39,7 @@ function getCategoryDataHandler(
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing category data', {
+      logger.fatal('Error while parsing category data', {
         handler: 'getCategoryDataHandler',
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')
@@ -108,7 +108,7 @@ function getCategoryBySlugDataHandler(slug: string) {
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing category data', {
+      logger.fatal('Error while parsing category data', {
         handler: 'getCategoryBySlugDataHandler',
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')

package/data/server/list.ts

@@ -38,7 +38,7 @@ const getListDataHandler = (
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing list data', {
+      logger.fatal('Error while parsing list data', {
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')
           ? `${rawData.substring(0, 50)}...`

package/hooks/use-pagination.ts

@@ -70,10 +70,6 @@ export default function usePagination(
     dispatch({ type: 'setLimit', payload: limit });
   }, [limit]);
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [state.page, state.limit]);
-
   const setTotal = useCallback(
     (total: number) => {
       dispatch({ type: 'setTotal', payload: total });

package/lib/cache.ts

@@ -1,3 +1,4 @@
+import { createPool, Pool } from 'generic-pool';
 import { RedisClientType } from 'redis';
 import Settings from 'settings';
 import { CacheOptions } from '../types';
@@ -64,21 +65,38 @@ export class Cache {
     );
   }
 
-  static async getClient() {
-    const { createClient } = await import('redis');
-    const redisUrl = `redis://${process.env.CACHE_HOST}:${
-      process.env.CACHE_PORT
-    }/${process.env.CACHE_BUCKET ?? '0'}`;
+  static clientPool: Pool<RedisClientType> = createPool(
+    {
+      create: async () => {
+        const { createClient } = await import('redis');
+        const redisUrl = `redis://${process.env.CACHE_HOST}:${
+          process.env.CACHE_PORT
+        }/${process.env.CACHE_BUCKET ?? '0'}`;
+
+        const client: RedisClientType = createClient({
+          url: redisUrl
+        });
 
-    const client: RedisClientType = createClient({
-      url: redisUrl
-    });
+        client.on('error', (error) => {
+          logger.error('Redis client error', { redisUrl, error });
+        });
 
-    client.on('error', (error) => {
-      logger.error('Redis client error', { redisUrl, error });
-    });
+        await client.connect();
+
+        return client;
+      },
+      destroy: async (client: RedisClientType) => {
+        await client.disconnect();
+      }
+    },
+    {
+      max: 500,
+      min: 2
+    }
+  );
 
-    return client;
+  static async getClient() {
+    return await Cache.clientPool.acquire();
   }
 
   static async get(key: string) {
@@ -87,39 +105,49 @@ export class Cache {
 
     try {
       client = await Cache.getClient();
-      await client.connect();
-      value = JSON.parse(await client.get(key));
-
-      logger.debug('Redis get success', { key });
-      logger.trace('Redis get success', { key, value });
+      const response = await client.get(key);
+      if (response) {
+        value = JSON.parse(response);
+      } else {
+        value = null;
+      }
+      logger.debug('Redis get success', { key, value });
     } catch (error) {
       logger.error('Redis get error', { key, error });
+      value = null;
     } finally {
-      await client?.disconnect();
+      if (client) {
+        await Cache.clientPool.release(client);
+      }
     }
 
     return value;
   }
 
-  static async set(key: string, value: string, expire?: number) {
+  static async set(key: string, value: any, expire?: number) {
     let success = false;
     let client;
 
     try {
       client = await Cache.getClient();
-      await client.connect();
-      await client.set(key, value, {
-        EX: expire
-      });
+      const serializedValue =
+        typeof value === 'object' ? JSON.stringify(value) : value;
 
-      success = true;
+      if (expire) {
+        await client.set(key, serializedValue, { EX: expire });
+      } else {
+        await client.set(key, serializedValue);
+      }
 
-      logger.debug('Redis set success', { key });
-      logger.trace('Redis set success', { key, value });
+      success = true;
+      logger.debug('Redis set success', { key, value });
     } catch (error) {
       logger.error('Redis set error', { key, error });
+      success = false;
     } finally {
-      await client?.disconnect();
+      if (client) {
+        await Cache.clientPool.release(client);
+      }
     }
 
     return success;

package/middlewares/checkout-provider.ts

@@ -0,0 +1,88 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import settings from 'settings';
+import { PzNextRequest } from '.';
+import logger from '../utils/log';
+import { urlLocaleMatcherRegex } from '../utils';
+import { getUrlPathWithLocale } from '../utils/localization';
+
+const withCheckoutProvider =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+    const pathnameWithoutLocale = url.pathname.replace(
+      urlLocaleMatcherRegex,
+      ''
+    );
+    const searchParams = new URLSearchParams(url.search);
+
+    if (pathnameWithoutLocale.startsWith('/orders/checkout-provider/')) {
+      try {
+        const request = await fetch(
+          `${encodeURI(settings.commerceUrl)}${url.pathname.replace(
+            urlLocaleMatcherRegex,
+            ''
+          )}?${searchParams.toString()}`,
+          {
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || '',
+              Accept: 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          }
+        );
+
+        return NextResponse.json(await request.json());
+      } catch (error) {
+        logger.error('withCheckoutProvider error', {
+          error,
+          ip
+        });
+        return NextResponse.next();
+      }
+    }
+
+    if (pathnameWithoutLocale.startsWith('/orders/checkout-provider-cancel')) {
+      try {
+        const request = await fetch(
+          `${settings.commerceUrl}${pathnameWithoutLocale}${url.search}`,
+          {
+            redirect: 'manual',
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || ''
+            }
+          }
+        );
+
+        if (request.headers.get('location')) {
+          const location = request.headers.get('location');
+          const redirectUrl = new URL(
+            request.headers.get('location'),
+            location.startsWith('http') ? '' : process.env.NEXT_PUBLIC_URL
+          );
+
+          redirectUrl.pathname = getUrlPathWithLocale(
+            redirectUrl.pathname,
+            req.middlewareParams.rewrites.locale
+          );
+
+          return Response.redirect(redirectUrl.toString(), request.status);
+        }
+      } catch (error) {
+        logger.error('withCheckoutProvider error', {
+          error,
+          ip
+        });
+      }
+    }
+
+    return middleware(req, event);
+  };
+
+export default withCheckoutProvider;

package/middlewares/default.ts

@@ -1,7 +1,9 @@
 import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
 import Settings from 'settings';
+import { ROUTES } from 'routes';
 import {
   PzNextRequest,
+  withCheckoutProvider,
   withCompleteGpay,
   withCompleteMasterpass,
   withOauthLogin,
@@ -112,6 +114,36 @@ const withPzDefault =
       return NextResponse.redirect(redirectUrlWithLocale, 303);
     }
 
+    if (req.nextUrl.pathname.startsWith('/orders/checkout-provider/')) {
+      try {
+        const data = await req.json();
+
+        const request = await fetch(
+          `${encodeURI(Settings.commerceUrl)}${url.pathname.replace(
+            urlLocaleMatcherRegex,
+            ''
+          )}?${searchParams.toString()}`,
+          {
+            method: 'POST',
+            body: JSON.stringify(data),
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || '',
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          }
+        );
+
+        return NextResponse.json(await request.json());
+      } catch (error) {
+        return NextResponse.redirect(ROUTES.BASKET);
+      }
+    }
+
     req.middlewareParams = {
       commerceUrl,
       rewrites: {}
@@ -123,64 +155,82 @@ const withPzDefault =
           withPrettyUrl(
             withRedirectionPayment(
               withThreeDRedirection(
-                withUrlRedirection(
-                  withCompleteGpay(
-                    withCompleteMasterpass(
-                      async (req: PzNextRequest, event: NextFetchEvent) => {
-                        let middlewareResult: NextResponse | void =
-                          NextResponse.next();
-
-                        try {
-                          const { locale, prettyUrl, currency } =
-                            req.middlewareParams.rewrites;
-                          const { defaultLocaleValue } = Settings.localization;
-                          const url = req.nextUrl.clone();
-                          const pathnameWithoutLocale = url.pathname.replace(
-                            urlLocaleMatcherRegex,
-                            ''
-                          );
-
-                          url.basePath = `/${commerceUrl}`;
-                          url.pathname = `/${
-                            locale.length ? `${locale}/` : ''
-                          }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
-
-                          Settings.rewrites.forEach((rewrite) => {
-                            url.pathname = url.pathname.replace(
-                              rewrite.source,
-                              rewrite.destination
+                withCheckoutProvider(
+                  withUrlRedirection(
+                    withCompleteGpay(
+                      withCompleteMasterpass(
+                        async (req: PzNextRequest, event: NextFetchEvent) => {
+                          let middlewareResult: NextResponse | void =
+                            NextResponse.next();
+
+                          try {
+                            const { locale, prettyUrl, currency } =
+                              req.middlewareParams.rewrites;
+                            const { defaultLocaleValue } =
+                              Settings.localization;
+                            const url = req.nextUrl.clone();
+                            const pathnameWithoutLocale = url.pathname.replace(
+                              urlLocaleMatcherRegex,
+                              ''
                             );
-                          });
 
-                          middlewareResult = (await middleware(
-                            req,
-                            event
-                          )) as NextResponse | void;
+                            url.basePath = `/${commerceUrl}`;
+                            url.pathname = `/${
+                              locale.length ? `${locale}/` : ''
+                            }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
+
+                            Settings.rewrites.forEach((rewrite) => {
+                              url.pathname = url.pathname.replace(
+                                rewrite.source,
+                                rewrite.destination
+                              );
+                            });
+
+                            middlewareResult = (await middleware(
+                              req,
+                              event
+                            )) as NextResponse | void;
+
+                            // if middleware.ts has a return value for current url
+                            if (middlewareResult instanceof NextResponse) {
+                              // pz-override-response header is used to prevent 404 page for custom responses.
+                              if (
+                                middlewareResult.headers.get(
+                                  'pz-override-response'
+                                ) !== 'true'
+                              ) {
+                                middlewareResult.headers.set(
+                                  'x-middleware-rewrite',
+                                  url.href
+                                );
+                              }
+                            } else {
+                              // if middleware.ts doesn't have a return value.
+                              // e.g. NextResponse.next() doesn't exist in middleware.ts
+
+                              middlewareResult = NextResponse.rewrite(url);
+                            }
 
-                          // if middleware.ts has a return value for current url
-                          if (middlewareResult instanceof NextResponse) {
-                            // pz-override-response header is used to prevent 404 page for custom responses.
                             if (
-                              middlewareResult.headers.get(
-                                'pz-override-response'
-                              ) !== 'true'
+                              !url.pathname.startsWith(`/${currency}/orders`)
                             ) {
-                              middlewareResult.headers.set(
-                                'x-middleware-rewrite',
-                                url.href
+                              middlewareResult.cookies.set(
+                                'pz-locale',
+                                locale?.length > 0
+                                  ? locale
+                                  : defaultLocaleValue,
+                                {
+                                  sameSite: 'none',
+                                  secure: true,
+                                  expires: new Date(
+                                    Date.now() + 1000 * 60 * 60 * 24 * 7
+                                  ) // 7 days
+                                }
                               );
                             }
-                          } else {
-                            // if middleware.ts doesn't have a return value.
-                            // e.g. NextResponse.next() doesn't exist in middleware.ts
-
-                            middlewareResult = NextResponse.rewrite(url);
-                          }
-
-                          if (!url.pathname.startsWith(`/${currency}/orders`)) {
                             middlewareResult.cookies.set(
-                              'pz-locale',
-                              locale?.length > 0 ? locale : defaultLocaleValue,
+                              'pz-currency',
+                              currency,
                               {
                                 sameSite: 'none',
                                 secure: true,
@@ -189,74 +239,65 @@ const withPzDefault =
                                 ) // 7 days
                               }
                             );
-                          }
-                          middlewareResult.cookies.set(
-                            'pz-currency',
-                            currency,
-                            {
-                              sameSite: 'none',
-                              secure: true,
-                              expires: new Date(
-                                Date.now() + 1000 * 60 * 60 * 24 * 7
-                              ) // 7 days
-                            }
-                          );
-
-                          if (
-                            req.cookies.get('pz-locale') &&
-                            req.cookies.get('pz-locale').value !== locale
-                          ) {
-                            logger.debug('Locale changed', {
-                              locale,
-                              oldLocale: req.cookies.get('pz-locale')?.value,
-                              ip
-                            });
-                          }
-
-                          middlewareResult.headers.set(
-                            'pz-url',
-                            req.nextUrl.toString()
-                          );
 
-                          if (req.cookies.get('pz-set-currency')) {
-                            middlewareResult.cookies.delete('pz-set-currency');
-                          }
+                            if (
+                              req.cookies.get('pz-locale') &&
+                              req.cookies.get('pz-locale').value !== locale
+                            ) {
+                              logger.debug('Locale changed', {
+                                locale,
+                                oldLocale: req.cookies.get('pz-locale')?.value,
+                                ip
+                              });
+                            }
 
-                          if (process.env.ACC_APP_VERSION) {
                             middlewareResult.headers.set(
-                              'acc-app-version',
-                              process.env.ACC_APP_VERSION
+                              'pz-url',
+                              req.nextUrl.toString()
                             );
-                          }
 
-                          // Set CSRF token if not set
-                          try {
-                            const url = `${Settings.commerceUrl}${user.csrfToken}`;
+                            if (req.cookies.get('pz-set-currency')) {
+                              middlewareResult.cookies.delete(
+                                'pz-set-currency'
+                              );
+                            }
 
-                            if (!req.cookies.get('csrftoken')) {
-                              const { csrf_token } = await (
-                                await fetch(url)
-                              ).json();
-                              middlewareResult.cookies.set(
-                                'csrftoken',
-                                csrf_token
+                            if (process.env.ACC_APP_VERSION) {
+                              middlewareResult.headers.set(
+                                'acc-app-version',
+                                process.env.ACC_APP_VERSION
                               );
                             }
+
+                            // Set CSRF token if not set
+                            try {
+                              const url = `${Settings.commerceUrl}${user.csrfToken}`;
+
+                              if (!req.cookies.get('csrftoken')) {
+                                const { csrf_token } = await (
+                                  await fetch(url)
+                                ).json();
+                                middlewareResult.cookies.set(
+                                  'csrftoken',
+                                  csrf_token
+                                );
+                              }
+                            } catch (error) {
+                              logger.error('CSRF Error', {
+                                error,
+                                ip
+                              });
+                            }
                           } catch (error) {
-                            logger.error('CSRF Error', {
+                            logger.error('withPzDefault Error', {
                               error,
                               ip
                             });
                           }
-                        } catch (error) {
-                          logger.error('withPzDefault Error', {
-                            error,
-                            ip
-                          });
-                        }
 
-                        return middlewareResult;
-                      }
+                          return middlewareResult;
+                        }
+                      )
                     )
                   )
                 )

package/middlewares/index.ts

@@ -7,6 +7,7 @@ import withOauthLogin from './oauth-login';
 import withUrlRedirection from './url-redirection';
 import withCompleteGpay from './complete-gpay';
 import withCompleteMasterpass from './complete-masterpass';
+import withCheckoutProvider from './checkout-provider';
 import { NextRequest } from 'next/server';
 
 export {
@@ -18,7 +19,8 @@ export {
   withOauthLogin,
   withUrlRedirection,
   withCompleteGpay,
-  withCompleteMasterpass
+  withCompleteMasterpass,
+  withCheckoutProvider
 };
 
 export interface PzNextRequest extends NextRequest {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.21.0",
+  "version": "1.22.0-rc.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -14,13 +14,14 @@
     "pz-postdev": "bin/pz-postdev.js"
   },
   "dependencies": {
-    "@opentelemetry/sdk-node": "0.46.0",
     "@opentelemetry/exporter-trace-otlp-http": "0.46.0",
     "@opentelemetry/resources": "1.19.0",
-    "@opentelemetry/semantic-conventions": "1.19.0",
+    "@opentelemetry/sdk-node": "0.46.0",
     "@opentelemetry/sdk-trace-node": "1.19.0",
+    "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
     "cross-spawn": "7.0.3",
+    "generic-pool": "3.9.0",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
     "redis": "4.5.1",
@@ -31,7 +32,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.21.0",
+    "@akinon/eslint-plugin-projectzero": "1.22.0-rc.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.d.ts

@@ -1,3 +1,7 @@
 declare module '@akinon/pz-masterpass' {
   export const masterpassReducer: unknown;
 }
+
+declare module '@akinon/pz-otp' {
+  export const otpReducer: unknown;
+}

package/redux/reducers/index.ts

@@ -6,6 +6,7 @@ import { api } from '../../data/client/api';
 
 // Plugin reducers
 import { masterpassReducer } from '@akinon/pz-masterpass';
+import { otpReducer } from '@akinon/pz-otp';
 
 const reducers = {
   [api.reducerPath]: api.reducer,
@@ -13,7 +14,8 @@ const reducers = {
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
-  masterpass: masterpassReducer
+  masterpass: masterpassReducer,
+  otp: otpReducer
 };
 
 export default reducers;

package/sentry/index.ts

@@ -1,27 +1,33 @@
 import * as Sentry from '@sentry/nextjs';
+import settings from 'settings';
 
 const SENTRY_DSN: string =
-  process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+  settings.sentryDsn ||
+  process.env.SENTRY_DSN ||
+  process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
-  options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
+  options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {
+    dsn: SENTRY_DSN,
+    integrations: [],
+    tracesSampleRate: 1.0
+  }
 ) => {
-  // TODO: Handle options with ESLint rules
-
-  // TODO: Remove Zero Project DSN
-
-  Sentry.init({
-    dsn:
-      SENTRY_DSN ||
-      'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
+  const initOptions = {
+    ...options,
     initialScope: {
       tags: {
+        ...((
+          options.initialScope as {
+            tags?: Record<string, string>;
+          }
+        )?.tags ?? {}),
         APP_TYPE: 'ProjectZeroNext',
         TYPE: type
       }
-    },
-    tracesSampleRate: 1.0,
-    integrations: []
-  });
+    }
+  };
+
+  Sentry.init(initOptions);
 };

package/types/index.ts

@@ -71,6 +71,12 @@ export interface Currency {
 
 export interface Settings {
   commerceUrl: string;
+  /**
+   * This option allows you to track Sentry events on the client side, in addition to server and edge environments.
+   *
+   * It overrides process.env.NEXT_PUBLIC_SENTRY_DSN and process.env.SENTRY_DSN.
+   */
+  sentryDsn?: string;
   redis: {
     defaultExpirationTime: number;
   };

package/utils/app-fetch.ts

@@ -12,7 +12,7 @@ const appFetch = async <T>(
   url: RequestInfo,
   init: RequestInit = {},
   responseType = FetchResponseType.JSON
-) => {
+): Promise<T> => {
   let response: T;
   let status: number;
   let ip = '';
@@ -28,7 +28,7 @@ const appFetch = async <T>(
 
     if (commerceUrl === 'default') {
       logger.error('Commerce URL is not set. Current value is "default"');
-      return undefined;
+      throw new Error('Commerce URL is not set');
     }
 
     const requestURL = `${decodeURIComponent(commerceUrl)}${url}`;
@@ -48,19 +48,30 @@ const appFetch = async <T>(
     status = req.status;
     logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
-    const rawData = await req.text();
+    if (!req.ok) {
+      throw new Error(`Request failed with status ${status}`);
+    }
 
     if (responseType === FetchResponseType.JSON) {
-      response = JSON.parse(rawData);
+      response = (await req.json()) as T;
     } else {
-      response = rawData as unknown as T;
+      response = (await req.text()) as unknown as T;
     }
 
     logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
+    const logType = status === 500 ? 'fatal' : 'error';
+
     if (!url.toString().includes('/cms/seo/')) {
-      logger.error(`FETCH FAILED`, { url, status, error, ip });
+      logger[logType](`FETCH FAILED`, { url, status, error, ip });
     }
+
+    // throw the error if it's fatal, so it can be caught and handled at higher levels
+    if (logType === 'fatal') {
+      throw error;
+    }
+
+    return Promise.reject(error);
   }
 
   return response;