axios capture response message

[chr4ss12]

hi,

in case of axios if you do request and axios returns 400, the error logged by Sentry contains minimum amount of data which in most cases is not useful. It just says "request failed with response 400", but there is actually no response data why it failed.

What is the preferred way/place to make Sentry capture more information in case of AxiosError?

this is what I came up with currently:

if (axios.isAxiosError(ex)) {
    ex.message = ex.message + (JSON.stringify(ex.response?.data, null, 4))
}

Sentry.captureException(ex, scope1);

that seems to be alright, although not sure if it is the correct way. Maybe a way to modify ExtraErrorData and pass some kind of extra function that allows me to check if error is AxiosError and then provide the fields I am interested in?

Or is using context more appropriate?

• I am using axios 0.21.1
• I am using ExtraErrorData

• "@sentry/integrations": "^6.11.0",
  

  "@sentry/react-native": "^2.6.2",

[AbhiPrasad]

We pass in the originalException in the hint, so you can use the hint + beforeSend to update events accordingly. See our docs on event hints.

You can also override the enhanceEventWithErrorData method on ExtraErrorData to add any context you find appropriate.

sentry-javascript/packages/integrations/src/extraerrordata.ts

Line 42 in e5ede4c

public enhanceEventWithErrorData(event: Event, hint?: EventHint): Event {

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[mljlynch]

@AbhiPrasad it would be helpful if your docs had a more thorough description of handling this as axios is a very commonly used library.

[Freundschaft]

beforeSend(event, hint) {
          if(hint && hint.originalException && hint.originalException.isAxiosError) {
            if (hint.originalException.response && hint.originalException.response.data) {
              let contexts = {
                ...event.contexts
              };
              contexts.errorResponse = {
                data: hint.originalException.response.data
              };
              event.contexts = contexts;
            }
          }
          
          return event;
        },

did this the trick for me.

[nbolton]

My solution, based on @Freundschaft's code:

import { AxiosError, isAxiosError } from "axios";

Sentry.init({
  //...
  beforeSend: handleSentryBeforeSend
});

function handleSentryBeforeSend(event: Event, hint: EventHint) {
  addAxiosContextRecursive(event, hint?.originalException);
}

function addAxiosContextRecursive(event: Event, error: unknown) {
  if (isAxiosError(error)) {
    addAxiosContext(event, error);
  } else if (error instanceof Error && error.cause) {
    addAxiosContextRecursive(event, error.cause);
  }
}

function addAxiosContext(event: Event, error: AxiosError) {
  if (error.response) {
    const contexts = { ...event.contexts };
    contexts.Axios = { Response: error.response };
    event.contexts = contexts;
  }
}

This works in TypeScript and it also handles recursive errors (i.e. when error.cause is set).