Repository navigation
RavenVue / Vue plugins: 413 Request Entity Too Large #937
Description
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)?
Activity
ehfeng commentedon May 15, 2017
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 commentedon May 15, 2017
The Vue plugin basically dumps part of the app state (
propsData) asextraData. 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 commentedon May 30, 2017
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.propsDatabefore 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 commentedon Dec 7, 2017
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 commentedon Dec 7, 2017
@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 commentedon Dec 7, 2017
@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 commentedon Dec 7, 2017
@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 commentedon Dec 7, 2017
@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 commentedon Dec 7, 2017
@bjunc just found
dataCallbackoption. I am going to play with it a bit.bjunc commentedon Dec 7, 2017
@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-sizeNPM 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 commentedon Dec 7, 2017
@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 commentedon Sep 4, 2018
Documented in the latest docs
bjunc commentedon Sep 4, 2018
@kamilogorek can you share the exact link for this? What's the TL;DR?
kamilogorek commentedon Sep 4, 2018
@bjunc
getsentry/sentry-docs#310
tl;dr
200kB, or 64kB you use
keepalive:truein fetchno, it's not JS SDK limitation, but rather a whole system's
old SDK:
dataCallbacknew SDK:
beforeSendor event processors once we document them fully100k, then send the whole thing. If not, go through and prune
See my implementation of this approach here: #874 (comment) which can be easily modified to be used in the Vue. We'll most likely provide more straightforward solution moving forward.
bjunc commentedon Sep 4, 2018
@kamilogorek
Great, thank you.
feat: Update Sentry SDK for telemetry (getsentry#937)