@graphcommerce/ecommerce-ui 7.1.0-canary.45 → 7.1.0-canary.47

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @graphcommerce/ecommerce-ui
 
+## 7.1.0-canary.47
+
+### Minor Changes
+
+- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3eaf`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.46
+
 ## 7.1.0-canary.45
 
 ## 7.1.0-canary.38

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,6 +1,8 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import { Trans } from '@lingui/react'
 import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import { maskNetworkError } from './maskNetworkError'
 
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
@@ -46,7 +48,7 @@ export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
                   key='networkError'
                 >
                   <Alert severity='error' {...networkErrorAlertProps}>
-                    Network Error: {error.networkError.message}
+                    {maskNetworkError(error.networkError)}
                   </Alert>
                 </Box>
               </Box>

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -3,6 +3,7 @@ import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
   error: ApolloError
@@ -19,14 +20,14 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = error?.graphQLErrors?.length ?? +(error?.networkError ? 1 : 0)
+  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors[0].message ?? error?.networkError?.message}
+        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,5 +1,6 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { ErrorSnackbar, ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
   error?: ApolloError
@@ -14,7 +15,7 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
         {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {error.networkError && <>Network Error: {error.networkError.message}</>}
+        {maskNetworkError(error.networkError)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -0,0 +1,26 @@
+import { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import { Trans } from '@lingui/react'
+
+function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
+  return 'name' in (error as ServerError)
+}
+
+function isServerParseError(
+  error: Error | ServerParseError | ServerError | null,
+): error is ServerParseError {
+  return 'bodyText' in (error as ServerParseError)
+}
+
+export function maskNetworkError(networkError: Error | ServerParseError | ServerError | null) {
+  if (!networkError) return null
+
+  if (isServerParseError(networkError) || isServerError(networkError)) {
+    return <Trans id='Something went wrong on the server, please try again later.' />
+  }
+
+  if (globalThis.navigator && !globalThis.navigator?.onLine) {
+    return <Trans id='It appears you are offline, please try again later.' />
+  }
+
+  return <Trans id='Something went wrong' />
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.45",
+  "version": "7.1.0-canary.47",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.45",
-    "@graphcommerce/graphql": "^7.1.0-canary.45",
-    "@graphcommerce/next-ui": "^7.1.0-canary.45",
-    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.45",
-    "@graphcommerce/react-hook-form": "^7.1.0-canary.45",
-    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.45",
+    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.47",
+    "@graphcommerce/graphql": "^7.1.0-canary.47",
+    "@graphcommerce/next-ui": "^7.1.0-canary.47",
+    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.47",
+    "@graphcommerce/react-hook-form": "^7.1.0-canary.47",
+    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.47",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",