Distributed Tracing - Laravel InertiaJS Vue3 Sentry

[RChutchev]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

@sentry/vue@7.108.0 , @sentry/webpack-plugin@2.16.0

Framework Version

Laravel Framework 10.48.4

Link to Sentry event

No response

SDK Setup

/*

                    IMPORTANT!

     Some comments may be inappropriate for someone
   or may contain private project / corp information

                   DON'T FORGET
     TO ENABLE OPTION WHICH REMOVES ALL COMMENTS
         FOR PRODUCTION BEFORE PRODUCTION!


Last edit: RChutchev, 4/1/2024
*/
require("./bootstrap");
// Import modules...
import { createApp, h } from "vue";
import { createInertiaApp, router } from "@inertiajs/vue3";
import * as Sentry from "@sentry/vue";
import * as SentryIntegrations from "@sentry/integrations";

import Filters from "./filters";

createInertiaApp({
    id:'app',
    progress: {
        color: '#8d2618',
    },
    resolve: (name) => require(`./Pages/${name}`).default,
    setup({ el, App, props, plugin }) {

        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .mixin({methods: {route}});
        Sentry.init({
            app,
            dsn: process.env.MIX_APP_SENTRY_DSN_PUBLIC,
            environment: process.env.MIX_APP_ENV,
            release: process.env.MIX_SENTRY_RELEASE,
            integrations: [
                // NOTE: Migrate to entry.browserTracingIntegration, 
                // but this will not work with routingInstrumentation 
                // and we'll unable to use inertiaRoutingInstrumentation function... 
                // temporally workaround to use old new Sentry.BrowserTracing
                // new Sentry.browserTracingIntegration(
                //    enableInp: true,
                // ),
                new Sentry.BrowserTracing({
                    // Helps to send pageload and navigation OPs to Sentry for InertiaJS
                    routingInstrumentation: inertiaRoutingInstrumentation,
                    enableInp: true,
                    tracePropagationTargets: [
                        "/http:\/\/subdomain\.domain\.local\/",
                        "/https:\/\/subdomain\.domain\.local\/",
                        "/https:\/\/subdomain\.domain\.net\/",
                        "/http:\/\/subdomain\.domain\.net\/",
                    ],
                    tracingOrigins: [
                        "localhost",
                        "subdomain.domain.local",
                        "subdomain.domain.net",
                    ]
                }),
                Sentry.replayIntegration({
                    maskAllText: false,
                    blockAllMedia: false,
                }),
                Sentry.replayCanvasIntegration(),
                SentryIntegrations.captureConsoleIntegration({
                    // Add 'warn', 'error', 'debug', 'assert' console output types to Sentry
                    // and additionally possible to add 'log' and 'info' console output types to Sentry if required
                    levels: ['log', 'info', 'warn', 'error', 'debug', 'assert'],
                }),
                SentryIntegrations.contextLinesIntegration({
                    frameContextLines: 50,
                }),
                SentryIntegrations.httpClientIntegration(),
            ],
            //Now not required to use beforeSend and modify event, but we're able to do that if req.
            //beforeSend: function(event, hint) {
            //    if (hint && hint.originalException instanceof Event) {
            //        event.extra.isTrusted = hint.originalException.isTrusted;
            //        event.extra.detail = hint.originalException.detail;
            //        event.extra.type = hint.originalException.type;
            //    }
            //    return event;
            //},
            sendDefaultPii: true,
            tracesSampleRate: process.env.MIX_SENTRY_TRACES_SAMPLE_RATE,
            replaysSessionSampleRate: 0.1,
            replaysOnErrorSampleRate: 1.0,
            autoSessionTracking: true,
            // Disable for Dev/Prod?
            telemetry: true,
            denyUrls:
                [
                    // All browser extensions
                    /extensions\//i,
                    /^safari-extension:\/\//i,
                    /^safari-web-extension:\/\//i,
                    /^moz-extension:\/\//i,
                    /^chrome:\/\//i,
                    /^chrome-extension:\/\//i,
                    /moz-extension/i,
                ],
            ignoreErrors:
                [
                    // Let's ignore some output as unnecessary for us now
                    '@webkit-masked-url',
                    'debugger eval',
                    'Not implemented',
                    //'Failed to fetch',
                ],
        });
        Sentry.attachErrorHandler(app, {
            logErrors: true,
        });
        app.config.globalProperties.$filters = Filters;
        app.mixin(
            Sentry.createTracingMixins({ 
                trackComponents: true 
            })
        );
        app.mount(el);


        /*

            Some code which not working or unnecessary now, starts here after this comment
                        Please, KEEP IT HERE and DON'T DELETE
                            or angry developer kill you (:

        */

        /*
        router.on('start', (event) => {

            //inertiaRoutingInstrumentation(Sentry.browserTracingIntegration);
            console.info(`Начинается переход к ${event.detail.visit.url}`);
            let sentryDataOnStart = props.initialPage.props.sentry || {};
            console.info(sentryDataOnStart);

            if (sentryDataOnStart.baggage) {
                event.detail.visit.headers['baggage'] = sentryDataOnStart.baggage;
            }
            if (sentryDataOnStart.sentryTrace) {
                event.detail.visit.headers['sentry-trace'] = sentryDataOnStart.sentryTrace;
            }
        });
        */

        /*
        router.on('navigate', (event) => {
            console.info(`Navigated to ${event.detail.page.url}`)
            let sentryData = event.detail.page.props || {};
            console.info(sentryData);

            if (sentryData.baggage) {
                // event.detail.visit.headers unavalible here let's try window.axios.defaults.headers.common
                // event.detail.visit.headers["X-Socket-ID"] = echo.socketId();
                window.axios.defaults.headers.common['baggage'] = sentryData.baggage;
            }
            if (sentryDataOnNavigate.sentryTrace) {
                window.axios.defaults.headers.common['sentry-trace'] = sentryDataOnNavigate.sentryTrace;
            }
        }); 
        */

        router.on('navigate', (event) => {
            console.info(`Navigate in router.on`);
            console.info(props.initialPage.props.sentry);
        });
        
        /*
        router.on('before', (event) => {
            // Let's try to set sentry headers from props on Before 
            console.info(`Navigated to ${event.detail.page.url}`)
            let sentryData = props.initialPage.props.sentry || {};
            console.log(sentryData);

            if (sentryData.baggage) {
                event.detail.visit.headers['baggage'] = sentryData.baggage;
            }
            if (sentryData.sentryTrace) {
                event.detail.visit.headers['sentry-trace'] = sentryData.sentryTrace;
            }

        })
        */
    },
});


// Uses https://inertiajs.com/events
function inertiaRoutingInstrumentation(
    customStartTransaction,
    startTransactionOnPageLoad = true,
    startTransactionOnLocationChange = true,
) {
    console.info('inertiaRoutingInstrumentation Started');

    let activeTransaction;
    let name;
    if (startTransactionOnPageLoad) {
        console.info('Start transaction on page load');
        name = '/'+route().current();

        activeTransaction = customStartTransaction({
            name,
            op: 'pageload',
            metadata: {
                source: 'route',
            },
        });
    }

    if (startTransactionOnLocationChange) {
        console.info('Start transaction on location change');
        console.info(propsForSentry);
        router.on('before', (_to, _from) => {
            if (activeTransaction) {
                activeTransaction.finish();
            }

            const newName = '/'+route().current();
            console.info('Old name: '+name+'. New name: '+newName)

            if (newName !== name) {
                console.info('Old name is not equal to new name!');
                activeTransaction = customStartTransaction({
                    name: newName,
                    op: 'navigation',
                    metadata: {
                        source: 'route',
                    },
                });
            }
        });

        router.on('finish', () => {
            console.info('Router on finish. Route: '+'/'+route().current())
            activeTransaction.setName('/'+route().current(), 'route');
        });
    }
    console.info('inertiaRoutingInstrumentation Finished');
}

Steps to Reproduce

1. I've an application in production on Laravel 10 (Vue 3, InertiaJS - users portal, and Filament - admin portal)
   based on Github but of course, modified and working with new ver. of Laravel etc, but anyway code is based on the repo code and you can check it if it's required for understanding.
2. Sentry integration added to Filament and works well, and added to InertiaJS, but InertiaJS works only with page-load. For all navigation events not working at all.
3. I've created a new Sentry.BrowserTracing({*}); entity for integrations in Sentry.init, etc check in SDK Setup here.
4. I've added config for webpack.mix.js which requires webpackConfig with devtool: "source-map" and sentryWebpackPlugin with ORG, PROJECT, and authToken configs. Everything transferred to Sentry successfully and works with Filament and Inertia fine.
5. Opening a new page or full reload will cause an update tag for Sentry and send correct data to Sentry, but without page reload incorrect baggage and sentry-trace added on the page and no data will be sent to Sentry for Inertia navigation.
6. Yes, i imported Laravel integration via use Sentry\Laravel\Integration;
7. And added {!! Integration::sentryMeta() !!} in app.blade.php (main file for Inertia app) where application loading ( etc), and that's the reason why incorrect meta adds, but I didn't find another way to add bagger and sentry-trace to pages with Inertia.
8. I am unable to find any good docs for Distributed Tracing with Vue and Inertia.
   Maybe I'm dumb, but it's going me crazy.
9. I've also tried to add
   event.detail.visit.headers['baggage'] = sentryDataOnStart.baggage;
   and
   event.detail.visit.headers['sentry-trace'] = sentryDataOnStart.sentryTrace;
   to my js file from
   props.initialPage.props.sentry
   and added this code to the public function share in HandleInertiaRequests in the Middleware file.

$data['sentry'] = [
    'baggage' => $baggage,
    'sentryTrace' => $sentryTrace,
]; 

10. but still unable to set a proper header for the inertia app in setup for all outgoing requests b/c when I'm getting sentryData from event.detail.page.props it returns the same baggage and sentry-trace as for pageload.
11. IDK how to set up Distributed Tracing and BrowserTracing properly with the Inertia app, do you have any idea how to fix that?

Expected Result

1. I'm able to add BrowserTracing and Distributed Tracing Sentry future by reading Docs.
2. Distributed Tracing and BrowserTracing for Laravel app with InertiaJS works and I'm getting correct data in Sentry for both navigation and page load events.
3. Like on those screenshots for the Event when the page was reloaded and the event was recorded successfully and fully.
   
   

Actual Result

I'm getting this (no page view)

or this (multiply events from different pages to one Event)

[RChutchev]

That's the 'log' from the browser's console
(new sentryTrace ID only after page reloaded event)

[Lms24]

Hey @RChutchev thanks for writing in! I think we're talking about multiple issues here:

I'm getting this (no page view)

So in this case I assume that the page that the server rendered did not include any <meta> tags for Sentry that the Vue SDK would use to continue the trace started on the server. Just talked to @cleptric who maintains the Laravel SDK and you need to inject these tags manually (see link above).

or this (multiply events from different pages to one Event)

I can only guess here but I assume this happens for one of two reasons:

1. The client application makes requests to these server endpoints and they have the same trace id. This is not ideal and we're working on reducing the "lifetime" of a traceId on the browser side. However, if these requests happen as long as your browser's pageload transaction is still active, I'd argue this is expected behaviour.
2. The additional two http.server transactions are not part of this pageload and not triggered by a request from a client. Before investigating this further (suspected bleed of trace id) I'd like to rule out 1 though.

Let me know if this fixes your first and/or explains your second problem.

[RChutchev]

Hey @RChutchev thanks for writing in! I think we're talking about multiple issues here:

I'm getting this (no page view)

So in this case I assume that the page that the server rendered did not include any <meta> tags for Sentry that the Vue SDK would use to continue the trace started on the server. Just talked to @cleptric who maintains the Laravel SDK and you need to inject these tags manually (see link above).

or this (multiply events from different pages to one Event)

I can only guess here but I assume this happens for one of two reasons:

1. The client application makes requests to these server endpoints and they have the same trace id. This is not ideal and we're working on reducing the "lifetime" of a traceId on the browser side. However, if these requests happen as long as your browser's pageload transaction is still active, I'd argue this is expected behaviour.
2. The additional two http.server transactions are not part of this pageload and not triggered by a request from a client. Before investigating this further (suspected bleed of trace id) I'd like to rule out 1 though.

Let me know if this fixes your first and/or explains your second problem.

Hello @Lms24, thanks for your reply.

1. The first link you provided isn't working
   
2. Yes. This transaction is triggered by a request from a client but that's user navigation on the app page.

Example user flow:

1. User - Opened a main page
   new Sentry Tracing (Server Laravel + Client JS)
2. User navigated to Login (with page reload) with Inertia
   new Sentry Tracing (Server Laravel + Client JS)
   (Note: if a user clicks "Create an account" it will cause a partial pagereload and an error will occur here)
3. Successfully logged in and redirected to the main app page (with Inertia) in the client's area
   new Sentry Tracing (Server Laravel + Client JS)
4. Navigated to the Metrics page (or any other page) (with Inertia and partial reload) in the client area
   Expected: new Sentry Tracing (Server Laravel + Client JS)
   Now: ERROR as shown on the second screenshot on my first comment (i mean multiply events from different pages to one Event)

Server Laravel - creates new IDs

In my HandleInertiaRequests.php in class, HandleInertiaRequests extends Middleware i've public function share(Request $request) containing this code (log from this place in code shown on my screenshot):

$baggage = function_exists('Sentry\getBaggage') ? \Sentry\getBaggage() : null;
        $sentryTrace = function_exists('Sentry\getTraceparent') ? \Sentry\getTraceparent() : null;

        $data['sentry'] = [
            'baggage' => $baggage,
            'sentryTrace' => $sentryTrace,
        ];

        Log::debug('SentryTrace {id} was initiated.', ['id' => $sentryTrace]);

But this ID doesn't send to the frontend when the partial page reload occurs.
I can't replace because the main page is already loaded and Inertia is already initialized (createInertiaApp executed and next time will be executed only after full page reload).
I added {!! Integration::sentryMeta() !!} to app.blade.php which contain for all application's pages.

But it also contains @ inertia which creates Inertia App.
All other page navigations will be partial page reloads.

Client JS data on page navigation doesn't send or send but is lost in a lot of events in Sentry.

Inertia JS app doesn't reload the page when the user navigate to another page.
When the InertiaJS App is created, any Navigation event will be served without page reload, and only the main content will be reloaded (I mean partial reload). Only when the session is destroyed page be redirected and the app will be fully reloaded. Or manually, if the user reloads the page. In any other case user will get content without the main page reload, only vue JS 'view' will be rendered/reloaded.
This is standard behavior for Inertia (Docs)

IDK how to track it into Sentry, do you have any advice for Sentry + Inertia integration or Sentry and JS applications with partial page reload?

[Lms24]

Hey @RChutchev before we get to finding a solution here, I'd like to know if I understood your ask correctly. (Really sorry but right now, I'm not sure that I do understand it yet):

1. Can you confirm that page load traces are correctly connected? So when a user first loads the page (or full-reloads it), the frontend pageload transaction is connected with the http.server transaction in your backend?
2. As far as I understand your problem, it seems like navigation transactions (i.e. "partial" reloads) don't work correctly? I see you already created an inertiaRoutingInstrumentation which, as far as I can tell without knowledge about intertia, looks fine.

---

The general expectation for Sentry SDKs and how we handle pageload and navigation traces is as following (assuming tracesSampleRate > 0 and BrowserTracing or browserTracingIntegration is used):

1. On browser SDK initialization, the SDK will start an op: pageload transaction. If it finds <meta> tags for sentry-trace and baggage, it'll continue the provided trace (e.g. the traceId). If there are none, the SDK assumes it is the "head of the trace", meaning it'll create a new traceId. The pageload transaction will live until there are no more activities (usually for a couple of seconds) and then finish itself and be sent to Sentry.
2. For any subsquent navigation (so no full reload but client side routing), the SDK should create an op: navigation transaction. These navigation transactions are always the head of the trace, so they should always create their own, new traceId.

I can only recommend using debug: true in Sentry.init to log out transaction and span creations to check what's going on exactly.