How can I capture custom backend error details in React using Firebase SDK functions?

Below is an explanation and solution to your problem.

The Problem

The issue is that the error you see in the network (with properties like:

JAVASCRIPTCopied
{
  additionalInfo: { error: "AddSecurity is not implemented" },
  code: "invalid-argument",
  details: { error: "AddSecurity is not implemented" },
  message: "AddSecurity is not implemented"
}

) is not “bubbling through” on the client. Instead, your catch block is only seeing a generic error:

JAVASCRIPTCopied
{
  code: "functions/internal",
  customData: undefined,
  details: undefined,
  name: "FirebaseError",
  message: "internal",
  stack: "FirebaseError: internal"
}

This happens because if your backend (Cloud Function) throws a non‑standard error, the Firebase SDK converts it to a generic internal error when you call it via an HTTPS callable function. In other words, you’re not exposing the custom error details you intended.

The Solution

To have your client receive the proper error details you sent from your backend, make sure that your function throws a properly formatted error using the Firebase functions SDK’s HttpsError. In your Cloud Function, instead of doing something like:

JAVASCRIPTCopied
throw new Error('AddSecurity is not implemented');

you should do:

JAVASCRIPTCopied
const functions = require('firebase-functions');

throw new functions.https.HttpsError(
  'invalid-argument', // error code recognized by Firebase Functions
  'AddSecurity is not implemented', // human‑readable message
  { error: 'AddSecurity is not implemented' } // additional details that will be passed to the client
);

When you throw an error with HttpsError, the Firebase client SDK can unwrap and forward the custom details to your catch block.

Client Side Handling

Once you update your backend, your client code can inspect the error as follows:

JAVASCRIPTCopied
const saveKey = async () => {
  const payload = getPayload();
  try {
    const result = await createKeyFunction({
      functionName: 'testName',
      payload: payload,
    });
  } catch (error) {
    console.error('Error code:', error.code);
    console.error('Error message:', error.message);
    console.error('Error details:', error.details); // Should now include { error: "AddSecurity is not implemented" }
  }
};

Summary

• Backend: Use functions.https.HttpsError to throw errors and include your custom details.
• Client: Catch the error and inspect the error.details property, which will now have the backend information.

This change will ensure that the error details sent from your backend are correctly captured on the client side.