Setting error message other than url messes up transaction name and stack trace for API error

[ThomasAitken]

I'm just trying to understand Sentry better. It seems like it should be possible to do what I'm trying to do but every thing I try raises new complications and the source code seems to be a labyrinth.

Using @sentry/react, I'm intercepting AxiosErrors and using a custom error class to try to set a custom message and name. In case this is relevant, this is happening in the context of a Webpack bundle. One sample:

  client.interceptors.response.use(
    (res: AxiosResponse) => {
      return res;
    },
    (err: unknown) => {
      if (!axios.isAxiosError(err)) {
        throw err;
      }
      let error: CustomBaseError;
      const status = err?.response?.status ?? 0;
      const responseData = err?.response?.data || {};
      if (status === 400 && Object.keys(responseData).length > 0) {
        error = new CustomHTTPValidationError(
          err.config.url ?? '',
          err.config.data ?? {},
          status,
          err?.response?.headers ?? <AxiosResponseHeaders>{},
          responseData,
       )
       Sentry.withScope((scope: Sentry.Scope) => {
        if (error instanceof CustomBaseError) {
          scope.setFingerprint(error.getFingerprint());
          // const customTransactionName = error.getTransactionName();
          // if (customTransactionName !== null) {
            // scope.setTransactionName(customTransactionName);
          // }
          const extraContext = error.getExtraContext();
          Object.keys(extraContext).forEach((key) => {
            scope.setExtra(key, extraContext[key]);
          });
        }
        Sentry.captureException(error);
      });
      throw err;

Here CustomHTTPValidationError extends CustomBaseError which extends Error and in its constructor sets the error message:

export class CustomBaseError extends Error {
  name = 'CustomBaseError';

  constructor(message: string) {
    super(message);
  }

If message here is err.config.url, then the Sentry error header looks like:

CustomHTTPValidationError CustomHttpValidationError: (my/api/url/path)
my/api/url/path

And the stack trace recognises the nature of the error:
my/api/url/path in CustomHTTPValidationError

If I instead pass a custom message into the Error constructor (rather than the API url), then the Sentry error header looks like:

CustomHTTPValidationError /path/to/webpack/bundle/file.js
My custom message here

Note that the transaction name no longer refers to my custom error class and the API url. Furthermore, the stack trace also just locates the error in terms of the webpack bundle file, rather than locating it in terms of my custom error class. If you look at the first sample, when I comment out the code including the scope method setTransactionName, then I'm able to make the error header look how I want it to:

CustomHTTPValidationError CustomHttpValidationError: (my/api/url/path)
My custom message here

In this case, "CustomHttpValidationError: (my/api/url/path)" is the transaction name I had to set manually via setTransactionName.

Even though I now have the error header looking like I want it to, the stack trace only references the webpack bundle file, rather than locating it in terms of my custom error class.

How can I get all the following to work:

• A transaction name that looks like the transaction name when I set the error message as the API url
• A custom message
• The stack trace referring to the custom error class and the API url rather than the file path

[ThomasAitken]

Update: if I simply include the url somewhere in the custom message, then the transaction name and stack trace details work fine again automatically. Can someone tell me the logic that determines this? This all feels very weird and non-intuitive!

[ThomasAitken]

No wait, it gets weirder. It's not merely including the url, I think you need to specifically include a substring in the format Url: ${url}. I somehow stumbled across this by accident.. scratching my head so hard at this point

[ThomasAitken]

This whole thing feels like total alchemy

[thraizz]

Any updates here? 😸
Super interesting, I am struggling as well to get meaningful sentry issues with react + axios.