Sentry-javascript: RavenVue / Vue plugins: 413 Request Entity Too Large

[bjunc]

I'm just getting started with Sentry/Raven. I'd like to get this running in Vue 2, but I'm experiencing an issue that might be a bug, or at least requires better documentation.

Environment

Vue 2, Webpack 2, raven-js via yarn (npm). Attempting to use RavenVue and Vue plugins with .addPlugin(RavenVue, Vue).

What is the current behavior?

When using RavenVue and Vue plugins, I get a 413 (Request Entity Too Large) error response. If I delete data.extra.propsData in the config's dataCallback, the request will go through. What is the size limit, 100k (#339)?

[ehfeng]

Yes, the size limit is currently 100kb.

I'd like to understand how your event is larger than 100kbs. Are you attaching a large number of tags or body data? Or is the naive configuration of vue.js sending 100kb+ events?

[benvinegar]

The Vue plugin basically dumps part of the app state (propsData) as extraData. That app state could be arbitrarily large (e.g. nested objects/arrays).

We realistically need to summarize/limit it in an intelligent way (e.g. only pass shallow objects). This would be good for other plugins too (e.g. Redux middleware).

[bjunc]

Our SPA makes many calls to a REST API, and all of that data gets stored within Vue (some of it is more than we need, but that's REST for you). Over the course of the app's life, the sum of all that JSON could add up. 100K is a lot of JSON, but I can't let a Raven limit dictate what the app loads/doesn't load from the server for the fear that it might go over 100k. Not sure I would call that "naive" on the part of Vue, but rather on the part of Raven for _assuming_ the app state would never go above 100k.

For us, we've simply disabled this part of the plugin by calling delete data.extra.propsData before send. It hasn't really hindered our ability to diagnose problems on the front-end, but it would be a nice feature to have (maybe a shallow version of objects are sent, or the data is clipped before the request reaches 100k).

[fcoury]

I am running into this very same problem with raven-js and redux plugins. My app state has around 180kb. Is there a way to bump the limit on Sentry?

[bjunc]

@fcoury maybe I don't know what I'm missing as far as the benefits of having the data in Sentry, but I just delete the propsData before send (see above). Even since moving from REST to GraphQL, it's not worth the hassle of worrying about going over 100k, and not capturing the exception.

[fcoury]

@bjunc the benefit I see is that I can inspect the user's redux state when the error was triggered. That helps a lot with the insights about the issue.

[bjunc]

@fcoury I know what it's supposed to be able to do. I'm simply saying, since I don't get to do it, I don't really "miss" it. I would like it, for sure (that's why I created the issue in the first place).

Anyway, have you considered attempting to prune the data on your end, before sending? That's on my todo list, but I haven't gotten around to it. Basically, write a prune method that is called in the exception callback that recursively goes through the data until it hits 100k.

[fcoury]

@bjunc I am trying to learn how to intercept and change the payload before sending it out to Sentry. Do you know where I add such intercepting code?

[fcoury]

@bjunc just found dataCallback option. I am going to play with it a bit.

[bjunc]

@fcoury I haven't really looked into it, but if I were to start somewhere, I was considering something along the lines of the json-size NPM package. If the data is less than 100k, then send the whole thing. If not, go through and prune (maybe something along the lines of _.cloneWith)

[fcoury]

@bjunc for now I settled with removing the fields unconditionally but this seems like a good approach as well. I wish Sentry provided an add-on to allow going over the limit.

[kamilogorek]

Documented in the latest docs

[bjunc]

@kamilogorek can you share the exact link for this? What's the TL;DR?

[kamilogorek]

@bjunc

https://github.com/getsentry/sentry-docs/pull/310

tl;dr

What is the size limit, 100k

200kB, or 64kB you use keepalive:true in fetch

Is there a way to bump the limit on Sentry?

no, it's not JS SDK limitation, but rather a whole system's

how to intercept and change the payload before sending it out to Sentry

old SDK: dataCallback
new SDK: beforeSend or event processors once we document them fully

I was considering something along the lines of the json-size NPM package. If the data is less than

100k, then send the whole thing. If not, go through and prune
See my implementation of this approach here: https://github.com/getsentry/sentry-javascript/issues/874#issuecomment-379731186 which can be easily modified to be used in the Vue. We'll most likely provide more straightforward solution moving forward.

[bjunc]

@kamilogorek
Great, thank you.