[Improvement] breadcrumbCallback - allow to capture more XHR data than method and url

[alekbarszczewski]

Current behaviour

Only method and url of XHR are captured, and those are only data available inside breadcrumbCallback.

Expected behaviour

All XHR data (such as request body and headers) should be available inside breadcrumbCallback (though not all captured by sentry by default).

Use case

When using GraphQL api I end up with all XHR breadcrumbs look same like this:

xhr | POST https://api.myapp.com/graphql [200]
xhr | POST https://api.myapp.com/graphql [200]
xhr | POST https://api.myapp.com/graphql [200]
...
xhr | POST https://api.myapp.com/graphql [200]

Would be nice to be able to also capture GraphQL query name for example.
It's not possible right now since request body is not available inside breadcrumbCallback.

[kamilogorek]

It'll be possible in the next major release, which is scheduled for the second part of Q3 :)

[kamilogorek]

It's doable through breadcrumb hints in the new SDK now.

init({
  dsn: 'https://some.dsn/123',
  beforeBreadcrumb (breadcrumb, hint) {
    if (breadcrumb.category === 'xhr') {
      // hint.xhr is a whole XHR object that you can use to modify breadcrumb
    }
    return breadcrumb;
  }
})

[alekbarszczewski]

@kamilogorek In which SDK exactly this option is available? Just upgraded raven-js to 3.27.0 and this option does not work (beforeBreadcrumb never gets called).

[kamilogorek]

in the new SDK

aka sentry-javascript, so this exact repo. There are beta versions and rc-0 available. We won't port this functionality to raven-js.

Also please see #1401 (comment)

[filipows]

Hi @kamilogorek

Is there any limit for the size of a breadcrumb?

I tried as test to include the whole response (that I'm getting from XHR object after GraphQL request) in a breadcrumb, using mentioned beforeBreadcrumb hook and I noticed that some of the errors are not sent to sentry. So far, I noticed that if the responses are reasonable small, the consecutive errors are sent successfully to Sentry. However, if the response is bigger (and so the breadcrumb size) the request hangs and is in pending status.

Do you have any idea, what could be the cause of that?

[kamilogorek]

@filipows yes, there's a hard limit of 200kB for a whole event sent to Sentry.

https://docs.sentry.io/clients/javascript/usage/?platform=browser

Be aware of maximum payload size - There are times, when you may want to send the whole application state as extra data. This can be quite a large object, which can easily weigh more than 200kB. This 200kB is currently the maximum payload size of a single event you can send to Sentry. When this happens, you’ll get an HTTP Error 413 Payload Too Large message as the server response or (when keepalive: true is set as fetch parameter), the request will stay in the pending state forever (eg. in Chrome).

[filipows]

Thank you @kamilogorek ! You've probably just saved me a lot of time 😄

It might be worth adding it as a note in the docs under current @sentry/browser' client as well (as the mentioned note looks like is under "Legacy Clients" section).

Ps. I've just noticed interesting thing, that the same payload in Chrome is being blocked (request stays "pending"), whilst the same one from Firefox is successful with HTTP 200 response. In both situations the payload size was 143kB.

[kamilogorek]

@filipows sent a PR - getsentry/sentry-docs#470 :)

[kamilogorek]

@filipows also see this: https://github.com/getsentry/sentry-docs/pull/310/files#diff-1412e3df3283d554d6037ceef9fe1c80R302 (probable cause of this difference)

[alexbjorlig]

It's doable through breadcrumb hints in the new SDK now.

init({
  dsn: 'https://some.dsn/123',
  beforeBreadcrumb (breadcrumb, hint) {
    if (breadcrumb.category === 'xhr') {
      // hint.xhr is a whole XHR object that you can use to modify breadcrumb
    }
    return breadcrumb;
  }
})

When using typescript - is it possilbe to get types for the hint.xhr type?

update
just had to use const xhr = hint.xhr as XMLHttpRequest;