fix: improve error handling in ConfigurationWrapper and useAsyncError hooks

Author: medyo

src/features/remoteConfig/providers/ConfigurationWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import BeatLoader from 'react-spinners/BeatLoader'
 import { useAsyncError } from 'src/hooks/useAsyncError'
 import { useGetRemoteConfig } from '../api/getRemoteConfig'
-import BeatLoader from 'react-spinners/BeatLoader'
 
 type ConfigurationWrapperProps = {
   children: React.ReactNode
@@ -11,6 +11,7 @@ export const ConfigurationWrapper = ({ children }: ConfigurationWrapperProps) =>
   const {
     isLoading,
     isError,
+    error,
     data: remoteConfig,
   } = useGetRemoteConfig({
     config: {
@@ -29,7 +30,9 @@ export const ConfigurationWrapper = ({ children }: ConfigurationWrapperProps) =>
   }
 
   if (isError || !remoteConfig) {
-    throwError('Could not fetch configuration data, Make sure you are connected to the internet')
+    throwError(
+      error ?? 'Could not fetch configuration data, Make sure you are connected to the internet.'
+    )
   }
 
   return <>{children}</>

src/hooks/useAsyncError.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useState } from 'react'
 
 export const useAsyncError = () => {
-  const [, setError] = useState()
-  return useCallback(
-    (e: string) => {
-      setError(() => {
-        throw e
-      })
-    },
-    [setError]
-  )
+  const [, setError] = useState<never>()
+
+  return useCallback((err: unknown) => {
+    setError(() => {
+      if (err instanceof Error) {
+        throw err
+      }
+      throw new Error(typeof err === 'string' ? err : JSON.stringify(err))
+    })
+  }, [])
 }