Distributed Tracing - Laravel InertiaJS Vue3 Sentry

[RChutchev]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] 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/[email protected] , @sentry/[email protected]

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.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[xyNNN]

@RChutchev Do you have a working solution for it?

[RChutchev]

@RChutchev Do you have a working solution for it?

Hello, nope and I forget about this issue a little bit b/c was busy with another functionality.

IDK what's going on, maybe Sentry have not enough documentation for Distributed Tracing or Sentry is incompatible with Inertia (and/or Single Page Application), anyway Sentry only partially works with navigation event (that's real screenshot from production)

And vice versa Sentry working good for full page reload (I mean pageload event)

Anyway idk how to fix this issue. Also, looks like new ver. 8, is incompatible with routingInstrumentation and inertiaRoutingInstrumentation function (we're using this function to set route name for activeTransaction. Code in my first message.

I think I'll delete all custom code later and enable integrations AS IS, b/c Sentry representative cant help me with that. I provided all code below, but received recommendation: "using debug: true in Sentry.init" and spend hours to debug.

[RChutchev]

@RChutchev Do you have a working solution for it?

See also this discussion if your project requires custom routing. Perhaps Mr. @AbhiPrasad will post an update for a function that will be compatible with Sentry ver 8.

[AbhiPrasad]

@RChutchev - we'll update the docs for better inertia js examples, it's on my todo!

[xyNNN]

Thanks @AbhiPrasad - Have you an ETA for this? Or how I can inform about the updated docs? Will you write a comment in this ticket? Thanks for your effort!

[AbhiPrasad]

we have a general tracking task here: https://github.com/getsentry/sentry-docs/issues/9943

we'll be creating more specific tasks in a little bit, just need to sync up with the team!

[RChutchev]

@RChutchev - we'll update the docs for better inertia js examples, it's on my todo!

Thanks, that's great! I hope it will be done soon.

[xyNNN]

Sorry for bothering again, but is there some ETA (1-2 weeks, up to 2 months, more than a half year) available for the integration guide of InertiaJS? Thanks @AbhiPrasad !

[AbhiPrasad]

A more formal guide will take atleast a couple months, the team is busy with some other projects. That does suck though - so here's a quick guide I just tested that you can try!

You can set up Sentry.init with Sentry.browserTracingIntegration based on https://github.com/getsentry/sentry-javascript/discussions/8528 to get distributed tracing/performance monitoring working. You can use tracePropagationTargets to set up what endpoints/services you want to do frontend -> backend distributed tracing.

Therefore your SDK init should look something like so:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: __SENTRY_DSN__,
  integrations: [
    Sentry.browserTracingIntegration({
      // disable automatic span creation
      instrumentNavigation: false,
      instrumentPageLoad: false,
    }),
    // optionally add session replay - https://docs.sentry.io/platforms/javascript/session-replay/
  ],
  // We recommend adjusting this value in production, or using tracesSampler for finer control
  tracesSampleRate: 1.0,
  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

// We start the pageload span as early as possible!
let name = route().current();
let pageLoadSpan = Sentry.startBrowserTracingPageLoadSpan({ op: "pageload", name });

router.on("before", (route) => {
  const client = Sentry.getClient();

  const newName = route().current();
  if (newName !== name) {
    name = newName;
    // every time the route changes, we trigger a navigation
    Sentry.startBrowserTracingNavigationSpan(client, {
        op: "navigation",
        name,
        attributes: {
          [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "route",
        },
      });
    }
  }
});

router.on('finish', () => {
  name = route().current();
  // always make sure we are using the correct route name
  const span = Sentry.getActiveSpan();
  const op = span && Sentry.spanToJSON(span).op;
  if (op === 'pageload' || op === 'navigation') {
    span.setName(name);
  }
});

To link your backend to your frontend pageload, you'll need to serialize meta tags into the HTML that the SDK can pick up on. Here's a guide: https://docs.sentry.io/platforms/php/guides/laravel/distributed-tracing/custom-instrumentation/#inject-tracing-information-into-rendered-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Serialize span information from active span in PHP land to HTML -->
        <?= sprintf('<meta name="baggage" content="%s"/>', \Sentry\getBaggage()); ?>
        <?= sprintf('<meta name="sentry-trace" content="%s"/>', \Sentry\getTraceparent()); ?>
    </head>
    <body>
        <p>This is a website.</p>
    </body>
</html>

With that both set up, you should be good to go!

[RChutchev]

A more formal guide will take atleast a couple months, the team is busy with some other projects. That does suck though - so here's a quick guide I just tested that you can try!

You can set up Sentry.init with Sentry.browserTracingIntegration based on #8528 to get distributed tracing/performance monitoring working. You can use tracePropagationTargets to set up what endpoints/services you want to do frontend -> backend distributed tracing.

Therefore your SDK init should look something like so:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: __SENTRY_DSN__,
  integrations: [
    Sentry.browserTracingIntegration({
      // disable automatic span creation
      instrumentNavigation: false,
      instrumentPageLoad: false,
    }),
    // optionally add session replay - https://docs.sentry.io/platforms/javascript/session-replay/
  ],
  // We recommend adjusting this value in production, or using tracesSampler for finer control
  tracesSampleRate: 1.0,
  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

// We start the pageload span as early as possible!
let name = route().current();
let pageLoadSpan = Sentry.startBrowserTracingPageLoadSpan({ op: "pageload", name });

router.on("before", (route) => {
  const client = Sentry.getClient();

  const newName = route().current();
  if (newName !== name) {
    name = newName;
    // every time the route changes, we trigger a navigation
    Sentry.startBrowserTracingNavigationSpan(client, {
        op: "navigation",
        name,
        attributes: {
          [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "route",
        },
      });
    }
  }
});

router.on('finish', () => {
  name = route().current();
  // always make sure we are using the correct route name
  const span = Sentry.getActiveSpan();
  const op = span && Sentry.spanToJSON(span).op;
  if (op === 'pageload' || op === 'navigation) {
    span.setName(name);
  }
});

To link your backend to your frontend pageload, you'll need to serialize meta tags into the HTML that the SDK can pick up on. Here's a guide: https://docs.sentry.io/platforms/php/guides/laravel/distributed-tracing/custom-instrumentation/#inject-tracing-information-into-rendered-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Serialize span information from active span in PHP land to HTML -->
        <?= sprintf('<meta name="baggage" content="%s"/>', \Sentry\getBaggage()); ?>
        <?= sprintf('<meta name="sentry-trace" content="%s"/>', \Sentry\getTraceparent()); ?>
    </head>
    <body>
        <p>This is a website.</p>
    </body>
</html>

With that both set up, you should be good to go!

Hello, it looks like your solution has errors in syntaxis first of all. this part

router.on("before", (route) => {
  const client = Sentry.getClient();

  const newName = route().current();
  if (newName !== name) {
    name = newName;
    // every time the route changes, we trigger a navigation
    Sentry.startBrowserTracingNavigationSpan(client, {
        op: "navigation",
        name,
        attributes: {
          [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "route",
        },
      });
    }
  }
});

should be

router.on("before", (route) => {
    const client = Sentry.getClient();

    const newName = route().current();
    if (newName !== name) {
        name = newName;
        // every time the route changes, we trigger a navigation
        Sentry.startBrowserTracingNavigationSpan(client, {
            op: "navigation",
            name,
            attributes: {
                [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "route",
            },
        });
    }
});

this one too has a syntaxis error

router.on('finish', () => {
    name = route().current();
    // always make sure we are using the correct route name
    const span = Sentry.getActiveSpan();
    const op = span && Sentry.spanToJSON(span).op;
    if (op === 'pageload' || op === 'navigation) {
        span.setName(name);
}
});

should be

router.on('finish', () => {
    name = route().current();
    // always make sure we are using the correct route name
    const span = Sentry.getActiveSpan();
    const op = span && Sentry.spanToJSON(span).op;
    if (op === 'pageload' || op === 'navigation') {
        span.setName(name);
}
});

[RChutchev]

@AbhiPrasad, thanks for offering a solution, anyway it's working better but only partially working for me, 2 different problems, I'm getting errors in the console for

route().current();

but looks like that's happening because we're loading the non-Inertia page as an iframe. I'll think about how to fix that, but that's our application-specific problem, I think I should exclude this request from the Sentry workflow. Or maybe you know, how to exclude all iframes from Sentry recording?

The second one is weird, with the new 8 ver, sometimes Sentry records some transactions as not connected to each other (for example if the user reloads the page a new TraceID will be created, and used but only the Backend event will be recorded with this ID, and this page load event will be recorded with a new TraceID and all next events will be recorded together with this ID, but root transaction will be missing), maybe that's the same problem - our application-specific but looks like something went wrong here. See an example after some navigation...

For pure Laravel everything works good

[xyNNN]

@RChutchev The problem with route() is that ne first parameter in the callback is called also route ... so this will be a conflict. Change the parameter so something else and this problem will solve. Currently integrating and will give feedback asap

[xyNNN]

For me the solution doesn't work ... the two transactions are linked in the trace, yes .. this works ... but no replay is recorded .... and I don't know why..

[RChutchev]

@RChutchev The problem with route() is that ne first parameter in the callback is called also route ... so this will be a conflict. Change the parameter so something else and this problem will solve. Currently integrating and will give feedback asap

Nope, I'm pretty sure that this error is because we're loading the page into an iframe but this page is a non-inertia page, a request to an ordinary Laravel page will cause this error. In a pure Laravel page no route().current is set, that's the reason why we're getting this error.

If you are interested you can check the production URL that's our corp service like Linktree. Currently, Sentry v.7 is in use, but I hope the new v.8 integration will be finished this month. In the user area (the faster way to register a Google OAuth) we have a preview (right panel) that loads a pure Laravel page (non-inertia). This request causes a problem in my case.

[RChutchev]

For me the solution doesn't work ... the two transactions are linked in the trace, yes .. this works ... but no replay is recorded .... and I don't know why..

Wow, can you show a screenshot of this issue, b/c I'm not sure that that's a problem. All transactions should be connected in distributed tracing, which looks like a normal behavior. For example, when the user opens /home page in distributed tracing we should be able to see backend rendering and frontend rendering (pageload) than if the user clicks on another link (e.g. /page1) we should see http.server and pageload for this page with same trace. @AbhiPrasad Am I right?

In addition, to record a trace in the Init Sentry.replayIntegration should be enabled,

Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false
}),

Did you set up something like this?

[RChutchev]

@xyNNN I'm sorry in my email notification I saw another of your comments here but now I don't see those, I was a little bit busy with offline activity. Also, sometimes I had one or two days of internet connection problems like the day before yesterday, that country-specific problem haha. Here temperature is above +35 degrees for the night and +45 for the day, sometimes that causes an outage for the provider's backbone equipment and a planned power outage for at least 2 hours per day. Active development for our corp project is finished, and now we're live, only critical fixes should be provided according to an agreement with my customer, upgrade Sentry integration to v.8 is not a critical and important fix, b/c v.7 still working well. I hope the new version of our corporate project will be agreed upon Dec. 2024 and active development will be continued in Jan 2025.

But I'm still online and I'm pretty sure that we find a solution to implement this integration for Senty v.8 and Inertia as soon as possible, when the integration is tested and works I'll update the production server outside the range of critical/scheduled updates

[xyNNN]

Thank you very much @RChutchev

Where are you currently? These temperatures are insane.... wish you all the best wish your power supply and stay hydrated and keep safe!

At first to clarify something. The provided solution from @AbhiPrasad is for Sentry v8, right? Because the syntax for v7 is not compatible in several ways.