`showMethodName` with quasar framework yields *wrong* names

[s-light]

i would like to use vuejs3-logger with my quasar app.

i translated the setup to this boot file:

import { boot } from 'quasar/wrappers'

import VueLogger from 'vuejs3-logger';

export default boot(({app}) => {
  const isProduction = process.env.NODE_ENV === 'production';
  const options = {
      // https://github.com/MarcSchaetz/vuejs3-logger#properties
      isEnabled: true,
      logLevel : isProduction ? 'error' : 'debug',
      stringifyArguments : false,
      showLogLevel : true,
      showMethodName : true,
      separator: '|',
      showConsoleColors: true
  };
  app.use(VueLogger, options);
})

in my HelloWorldPage.vue file i have

<template>
  <q-page class="flex flex-center">
      <q-btn label="log something.." @click="logSomething"/>
  </q-page>
</template>

<script setup>
import { defineComponent, inject } from 'vue'

const log = inject('vuejs3-logger')
log.debug('test', 42)

const logSomething = (event) => {
    log.debug('logSomething called..', event.target)
    console.log('logSomething called..', event.target)
}
</script>

after loading this and clicking once on the button
in the console i get

18:08:44.992 debug | /node_modules/@vue/runtime-core/dist/runtime-core | test 42 vue3-logger.js:99 18:08:47.020 debug | /node_modules/@vue/runtime-core/dist/runtime-core | logSomething called.. <span class="block"> vue3-logger.js:99 18:08:47.021 logSomething called.. <span class="block"> HelloWorldPage.vue:15

so basically it is working - but the shown function names are not what i was expecting.. the normal call to console.log at least has the file and line-number correct.. so it is more helpfull than the logger output. is there anything i can change in my setup? or is this some vue3 / quasar related limitation?

if anybody has any tips or other tools to do some sort of logging in quasar please let me know :-)

PS: i originally posted this to the quasar forum

[MarcSchaetz]

Hi @s-light, sorry for the massively late reply. I tried out a stackblitz with the Quasar Framework and vuejs3-logger@1.0.0 but did not get the same error.

This is the output:

debug |  local-corp |  logSomething called.. 
<span class="block">
[vuejs3-logger.js:166:23](https://quasarframework-1rjny5--9000.local-corp.webcontainer.io/node_modules/.q-cache/vite/spa/deps/vuejs3-logger.js?v=1f76d41c)

logSomething called.. 
<span class="block">[HelloWorldPage.vue:15:11](https://quasarframework-1rjny5--9000.local-corp.webcontainer.io/home/projects/quasarframework-1rjny5/src/pages/HelloWorldPage.vue)

Is the error still present and can you provide a minimal project to test it locally?

[nick-ma]

I just reproduced the problem as s-light mentioned above. I assume that the reason is vite. I use quasar with vite build tool, and I can only get the filename 'vue3-logger.ts'.

[s-light]

sorry for the massively late reply.

no problem ;-) i can try to reproduce it in some day - (currently on a holiday trip)

i did use webpack with plain js (no ts).