I am working with a custom React hook which uses the @apollo/client library to call a GraphQL API.

import {useMutation} from '@apollo/client';

export const useCreateAccount() => {
   ...
   const {loading, error, data} =  useMutation(query, options);
   ...
   return [loading ,data, error];
}

And in my component, I am calling my custom hook:

import {useCreateAccount} from './createAccountHook.js';

export const MyComponent() => {
   ...
   const [loading ,data, error] = useCreateAccount();
   ...
}

I also have a logging library for logging errors. I want to log GraphQL errors that fail because may a parameter is unaccepted, or an account with the same name exists. I can't change the API so I need to do some logging from the React UI side.

Wondering if best practice is to log errors in my custom React hook or within the React component that calls the custom React hook? Below are two ideas I thought of but open to what makes the most sense when it comes to logging more-or-less server-sided errors.

Option A

export const useCreateAccount() => {
  ...
  const {loading, error, data} =  useMutation(query, options);
  logger.error('An error occurred', error);
  ...
  return [loading ,data, error];
}

Option B

import {useCreateAccount} from './createAccountHook.js';

export const MyComponent() => {
   ...
   const [data, loading, error] = useCreateAccount();
   if (error) { logger.error('an error occurred', error};
  ...
}