Application ( with php8.1 InertiaJS Laravel8 Vue3) and Sentry Integration

HI All, I think the title of my question gets straight to the point :) but please read the details below: I am working on a project with the following technology stack: php8.1, Laravel8, VueJS3, and InertiaJS as an adapter for routing. That means the project is not using the Vue router because that whole part is managed on the backend with Inertia and Laravel. We use Sentry on the backend already. However, we want to integrate it with the frontend too. My question is: Can we integrate VueJS3 and Inertia with Sentry? I know VueJS3 is compatible with Sentry, but because of InertiaJS the router is not available so I can not pass the router to the method as the documentation suggests: routingInstrumentation: Sentry.vueRouterInstrumentation(router) https://docs.sentry.io/platforms/javascript/guides/vue/ Is there any solution for this? Do you have any idea or experience with this? Can I integrate it even if the router is not available in the format as the spec says?

Thanks for the answer!

Sinnbeck

4 years ago

Level 102

I personally dont use vue, but it looks like the sentry docs shows how to initialize sentry manually: https://docs.sentry.io/platforms/javascript/guides/vue/#vue-3---manual-initialization

Not sure if it works, but should be easy to test: https://docs.sentry.io/platforms/javascript/guides/vue/#verify

1 like

biroa

4 years ago

Level 3

Hi @Sinnbeck Thank you! I have missed that piece of information. I am going to check it!

christian-qode

3 years ago

Level 8

@biroa Did you find a solution to make it work with the Inertia/Ziggy router?

biroa

3 years ago

Level 3

Hi @christian-qode, Sorry for the delayed feedback. Yes I did. You need to extend the app.js based on the Manual Initialization. I have something like this. Cheers, Adam

import * as Sentry from "@sentry/vue";

createInertiaApp({
    // eslint-disable-next-line global-require
    resolve: (name) => require(`./Pages/${xxxx}`),
    setup({ el, App, props, plugin }) {
   	
     // use and provide statements
   	.use()	
   	.provide()
   	
            Sentry.init({
            app,
            dsn: "",
            // Set tracesSampleRate to 1.0 to capture 100%
            // of transactions for performance monitoring.
            // We recommend adjusting this value in production
            tracesSampleRate: 1.0,
        });
        // Sentry configuration
        app.mixin(Sentry.createTracingMixins({ trackComponents: true }));
        Sentry.attachErrorHandler(app, { logErrors: true });
        app.mount(el);
    },
});

2 likes

christian-qode

3 years ago

Level 8

@biroa Great, thank you!

I also find a solution in the meantime, but I'm enabling trackComponents and logErrors in the Sentry init function. Do you know the difference/benefits of your approach?


import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

        Sentry.init({
          app,
          dsn: "",
          environment: 'production',
          tracesSampleRate: 1.0,
          trackComponents: true,
          logErrors: true,
          integrations: [new BrowserTracing()],
        });

Please or to participate in this conversation.