fix: Handle network errors with proper Error objects

src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx

@@ -6,6 +6,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 
 import config from 'config'
 
+import { NetworkError } from 'shared/api/rejectNetworkError'
 import { useUser } from 'services/user'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -213,7 +214,10 @@ class NetworkErrorBoundary extends Component {
   static getDerivedStateFromError(error) {
     // if the error is not a network error, we don't do anything and
     // another error boundary will take it from there
-    if (Object.keys(errorToUI).includes(String(error.status))) {
+    if (
+      error instanceof NetworkError &&
+      Object.keys(errorToUI).includes(String(error.status))
+    ) {
       return { hasNetworkError: true, error }
     }
 

src/shared/api/rejectNetworkError.ts

@@ -9,6 +9,26 @@ export type NetworkErrorName =
   | NotFoundError
   | OwnerNotActivatedError
 
+export class NetworkError extends Error {
+  status: number
+  data: { detail?: React.ReactNode } | undefined
+
+  constructor({
+    status,
+    data,
+    dev,
+  }: {
+    status: number
+    data?: { detail?: React.ReactNode }
+    dev: string
+  }) {
+    super(dev)
+    this.name = 'NetworkError'
+    this.status = status
+    this.data = data
+  }
+}
+
 export type ParsingErrorObject = {
   errorName: ParsingError
   errorDetails: { error: Error; callingFn: string }
@@ -107,9 +127,11 @@ export function rejectNetworkError(error: NetworkErrorObject) {
 
   const status = determineStatusCode(errorName)
 
-  return Promise.reject({
-    dev: devMsg,
-    data: 'data' in error ? error.data : undefined,
-    status: status,
-  })
+  return Promise.reject(
+    new NetworkError({
+      dev: devMsg,
+      data: 'data' in error ? error.data : undefined,
+      status: status,
+    })
+  )
 }