Sentry-javascript: Sentry requests pending indefinitely

[petercasinelli]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [ ] other:

Version:

4.2.3

Description

I am finding that some requests to Sentry are left indefinitely in a pending state. I added debug mode and when I sent the same two errors, I did receive a Sentry debug notice saying it ignored the last message since it was already sent, so it seems to be recording them internally.

Any ideas on how to debug this further? Here is my network tab...

[venkatd]

We have a similar issue in our app.

@petercasinelli for your reference, it looks like the logic for checking for duplicate events is here:

https://github.com/getsentry/sentry-javascript/blob/65965ff30b4c978c4f200ef8bb5c88d220059324/packages/core/src/integrations/dedupe.ts#L167

Perhaps using the version from source and adding Log statements in the conditionals could narrow down what is triggering the logic.

[mattrobenolt]

Are you able to use the "Copy as cURL" command from Chrome and try to send the request from cURL and see if you get anymore information? Maybe throw a -v onto the command.

[iWader]

Copy as curl highlighted our problem, only because the payload was so large. We use redux-logger in our dev builds which the sentry client was then capturing our entire redux state many times.

Our solution was to filter out any console.log() breadcrumbs as they're largely verbose and not useful.

beforeBreadcrumb(breadcrumb, hint) {
    if (breadcrumb.category === 'console' && breadcrumb.level === 'log') {
        return null
    }

    return breadcrumb
}

[kamilogorek]

Please see: https://docs.sentry.io/enriching-error-data/context/?platform=browser#extra-context

Be aware of maximum payload size - There are times, when you may want to send the whole application state as extra data. This is not recommended as application state can be very large and easily exceed the 200kB maximum that Sentry has on individual event payloads. 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).

[eteisman]

I dont understand.

I copied the exact code that sentry.io told me to put in my application.
Then I see my request to sentry.io simply keep pending.

The Sentry.io website does not give clear instruction on how to solve this issue.

EDIT: I was finally able to solve the problem by changing my configuration, and reducing the number of BreadCrumps send. https://docs.sentry.io/error-reporting/configuration/?platform=browser