How to enable open-telemetry with action

[nioc]

Hello,

I would like to set up open telemetry to trace the events of a Vue front.
I used the $onAction function to trace the use of a Pinia actions but the trace is not related to the XMLHttpRequest one.

Has anyone succeeded yet?

Otherwise would it be possible to wrap action to create a context with the trace and execute the original action in the context callback?

[rbanks54]

I'm not 100% clear on what you're wanting to do, but I'm assuming you're wanting to associate network calls made from within an action and calls to the action itself with some kind of correlation id or other info? I'm also guessing that the standard web instrumentation OpenTelemtry JS library functionality isn't sufficient?

If so, it's worth remembering that Pinia is specifically a state management library and has no knowledge of network calls. Any network calls within an action are because a developer added them, not because of Pinia's capabilities.

You'll need to build your own solution. I'd suggest that during the action you store a correlation id of some kind in a Pinia store, and then use something like Axios interceptors to handle the network calls and pull from the store the correlation id to include in any logging statements.

[nioc]

Thanks @rbanks54.
I agree that it's not up to the store to manage HTTP calls, but to add generic tracing code (for all actions without editing each one), it should be necessary to wrap the action function to manage the creation of the span asynchronously.
Here is what I tried (from the Pinia doc with my code added), it is working but do not get trace context (and spans are not related):

const unsubscribe = someStore.$onAction(
  ({
    name, // name of the action
    store, // store instance, same as `someStore`
    args, // array of parameters passed to the action
    after, // hook after the action returns or resolves
    onError, // hook if the action throws or rejects
  }) => {
    // a shared variable for this specific action call
    const startTime = Date.now()
    // this will trigger before an action on `store` is executed
    console.log(`Start "${name}" with params [${args.join(', ')}].`)
    // ** I actually start my span here but not satisfactory **
   const span = tracer.startSpan(name)

    // this will trigger if the action succeeds and after it has fully run.
    // it waits for any returned promised
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
      //  ** I actually end my span here but not satisfactory **
      span.setStatus({
        code: opentelemetry.SpanStatusCode.OK,
      })
      span.end()
    })

    // this will trigger if the action throws or returns a promise that rejects
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
      //  ** I actually end my span here but not satisfactory **
      span.recordException(error)
      span.setStatus({
        code: opentelemetry.SpanStatusCode.ERROR,
        message: error.message,
      });
      span.end()
    })
  }
)

And this is what I would like to achieve (call action function in span creation callback in order to get its context):

const unsubscribe = someStore.$onAction(
  ({
    name, // name of the action
    store, // store instance, same as `someStore`
    args, // array of parameters passed to the action
    after, // hook after the action returns or resolves
    onError, // hook if the action throws or rejects
    actionFunction, // <-- **what I wish**
  }) => {
    // a shared variable for this specific action call
    // this will trigger before an action on `store` is executed
    // ** What I would like to do **
    tracer.startActiveSpan(name, { }, async (span) => {
      try {
        await actionFunction(args)
        span.setStatus({
          code: opentelemetry.SpanStatusCode.OK,
        })
      } catch (error) {
        span.recordException(error)
        span.setStatus({
          code: opentelemetry.SpanStatusCode.ERROR,
          message: error.message,
        })
      }
      span.end()
    })
  }
)

[nioc]

I also tried to wrap the action from the store object but it didn't work.

[rbanks54]

Ah. That's a little clearer. It's basically an interceptor approach for actions.

You should be able to do what you need using a Pinia plugin, as the plugin system gives you the capability to intercept action calls.

https://pinia.vuejs.org/core-concepts/plugins.html#plugins

If you do a search on npm you might find some plugins that already do something with actions. You could borrow ideas from them to work out what your plugin needs to do.

[nioc]

Yes, this can be seen as an interceptor.
My previous code (using $onAction) was written as a plugin but I was blind to the context option parameter passed to the plugin...
Fortunately, your advice helped me to dig and find the solution 😌

const openTelemetryPiniaPlugin = ({ store, options }) => {
  const actionsTraced = {}
  for (const action in options.actions) {
    const original = store[action]
    actionsTraced[action] = function(...args) {
      return new Promise(function(resolve, reject) {
        tracer.startActiveSpan('store.action', {
          attributes: {
            'store.action.name': action,
          },
        }, async (span) => {
          try {
            const result = await original.apply(this, args)
            span.setStatus({
              code: SpanStatusCode.OK,
            })
            span.end()
            resolve(result)
          } catch (error) {
            span.recordException(error)
            span.setStatus({
              code: SpanStatusCode.ERROR,
              message: error.message,
            })
            span.end()
            reject(error)
          }
        })
      })
    }
  }
  return actionsTraced
}
pinia.use(openTelemetryPiniaPlugin)