Transaction never finishing

SDKs
1

Hello,

I’m trying to use sentry to monitor the performance of a vue.js v2 application.

I have setted up sentry with the following:

SDK version is sentry.javascript.vue 6.13.3,

        Sentry.init({
            Vue,
            logErrors: true,
            attachProps: true,
            dsn,
            environment,
            ignoreErrors,
            integrations: [
                new Integrations.BrowserTracing({
                    routingInstrumentation: Sentry.vueRouterInstrumentation(router),
                    tracingOrigins: [...tracingOrigins, /^\//],
                }),
            ],
            tracesSampleRate: environment === 'production' ? 0.1 : 1.0,
        });

The transactions I see on the performance screen are 15 seconds long, and end up with the status deadline_exceeded.
Even when the page is fully loaded:

image
image1296×472 49.7 KB

Is there something I’m missing ?

2

I found a probable cause: recurrent request happening to poll for user notifications.

This is very clause to the HeathCheck request explained in the documentation here.

Unfortunately, in my case the polling is done, like the rest of the front-end queries, via graphql, and shouldCreateSpanForRequest's url argument is always /graphql.
To make it work I would need a second argument (typicaly context) to check if it should be filtered or not.

no it wasn’t the problem: commenting out the polling didn’t change a thing.
The page takes 0.3s to load but the transaction stays open until it times out.

3

It turns out, the transaction was kept because, a span associated with Vue.update never finished.
It was the only span with the status «cancelled» of the event.
It is likely caused by one of the application’s component but I know very little about it at the moment.

I found a workaround for my initial problem:

Sentry.addGlobalEventProcessor(event => {
    if (event.spans) {
        // cancelled spans are problematic.
        // they extend the transaction duration to its timeout.
        // once the problematic span remove, we need to recompute the end of event timestamp.
        const spans = event.spans.filter(span => span.status !== 'cancelled');
        let length = spans.length,
            endTimestamp = -Infinity;
        if (event.spans.length !== length) {
            while (length--) {
                const value = spans[length].endTimestamp;
                if (value && value > endTimestamp) {
                    endTimestamp = value;
                }
            }
            return { ...event, spans, timestamp: endTimestamp };
        }
    }
    return event;
});

The transaction still has the status deadline_exceeded witch is fine by me, until I find what component is causing all of this.