Register plugins that don't use `app.use`

[4350pChris]

Hey, I'm in the process of converting a project I'm working on to use this integration and replace my custom one. However, one thing I don't know how to solve right now is registering client-side plugins that don't use app.use - specifically, the Sentry plugin. Here's the code I'm currently using in my +onRenderClient.ts file (truncated):

import { init as sentryInit, BrowserTracing } from "@sentry/vue";
// ...
export async function onRenderClient(pageContext: PageContextClient) {
  if (!app) {
    // ...
    const { sentryRelease, sentryDsn } = pageContext;
    sentryInit({
      app,
      dsn: sentryDsn,
      integrations: (defaults) =>
        defaults.concat(
          new BrowserTracing({
            tracingOrigins: [/.*.example.com/, /^\//],
          })
        ),
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production
      tracesSampleRate: 0.2,
      logErrors: !import.meta.env.PROD,
      environment,
      release: sentryRelease,
    });
  // ...
  }
  // ...
}

Now, I could move this to the client init code or do it in my root component using import.meta.env.SSR - however, that would delay the plugin's registration and I'm worried some errors might not be propagated to Sentry in that case, which is why this is one of the first things I'm doing right now in the aforementioned file.

Any suggestions how I could leverage what's available right now to do this properly?

[brillout]

I can make +client.js to be the first lines of JavaScript that are injected, which would solve the issue right?

[4350pChris]

I'm not sure. Imo the documentation on that is lacking - in what context is the script executed, e.g. do I have access to pageContext already? Just from looking at it, it looks like it is plain JS that gets injected, probably before the Vue app is initialized, which would mean I can't register sentry either (since it needs the Vue app). So Sentry really should be initialized after creating app but before rendering it - both of which happen in onClientRender.ts right now. I'm sure there's a way to do it if I really wanted to by queueing any errors and waiting for Sentry to be initialized, but I'd rather not add complexity around that.

[brillout]

I see. How about a custom hook onCreateApp() provided by vike-vue? (And, yes, better documentation is very much on the radar.)

[4350pChris]

Yup, sounds like the best approach here.

[brillout]

PR welcome if you want :) (but let us know if you're busy, I can implement it).