CODEWITHSUNDEEP
angularsentry
Snæbjørn
Snæbjørn

Reputation: 10792

Send payload data with POST/PUT/PATCH requests to Sentry.io

I'm trying to add the payload data to the breadcrumbs sent to Sentry.io.

It just looks like this.

enter image description here

I found out how to add the response. 

const sentryConfig: BrowserOptions = {
  beforeBreadcrumb: (breadcrumb, hint) => {
    if (breadcrumb.category === 'xhr') {
      // hint.xhr is a whole XHR object that you can use to modify breadcrumb
      breadcrumb.data = (hint.xhr as XMLHttpRequest).response;
    }

    return breadcrumb;
  }
};

But I cannot seem to find a way to add the payload. XMLHttpRequest doesn't have this info.

Upvotes: 6

Views: 2671

Answers (3)

rhyek
rhyek

Reputation: 1869

Similar to Lucas' answer:

  beforeBreadcrumb: (breadcrumb, hint) => {
    if (breadcrumb.category === 'xhr' && hint) {
      const xhrKey = Object.keys(hint.xhr).find((key) =>
        /^__sentry_xhr_v\d+__$/.test(key),
      );
      if (!xhrKey) return breadcrumb;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const req: any = hint.xhr[xhrKey];
      try {
        req.body = JSON.parse(req.body);
      } catch {
        //
      }
      const data = {
        request: req,
        response: hint.xhr.response,
      };
      return { ...breadcrumb, data };
    }
    return breadcrumb;
  },

Upvotes: 1

Lucas Quinteiro
Lucas Quinteiro

Reputation: 86

It is possible to get the body (payload data) from your xhr this way:

beforeBreadcrumb: (breadcrumb, hint) => {
 if (breadcrumb.category === 'xhr') {
   const data = {
     requestBody: hint.xhr.__sentry_xhr__.body,
     response: hint.xhr.response,
     responseUrl: hint.xhr.responseURL
   }
   return { ...breadcrumb, data }
 }
 return breadcrumb
}

This is the PR where it was added.

Upvotes: 7

Markus Unterwaditzer
Markus Unterwaditzer

Reputation: 8244

I don't think there is a way to get the payload from the xhr request. I would just console.log() with the payload wherever you have it when creating the xhr request. It will not be part of the same breadcrumb but you will see it in Sentry.

Upvotes: 2

Related Questions