if i use vue2 with vite, can this plugin work?

[weirui88888]

No description provided.

[ikenfin]

Hi @weirui88888 !
Theoretically you can use this plugin with any library or vanilla based project, because there is no any dependency on user code. I've checked plugin with vue2 project - it works without any problems 👍

[weirui88888]

Hi @weirui88888 ! Theoretically you can use this plugin with any library or vanilla based project, because there is no any dependency on user code. I've checked plugin with vue2 project - it works without any problems 👍

I am frustrated, everything is configured according to the documentation。but it seems that the located source file is always wrong。:tired_face:

[ikenfin]

Hi @weirui88888 ! Theoretically you can use this plugin with any library or vanilla based project, because there is no any dependency on user code. I've checked plugin with vue2 project - it works without any problems 👍

I am frustrated, everything is configured according to the documentation。but it seems that the located source file is always wrong。😫

Can you please provide some context? What you already did, maybe part of configs?

There are multiple situations when sentry will not load/use source maps, for example when the app is not in public url (you can use ngrok/localtunnel in that situations), or there can be wrong urlPrefix.

[weirui88888]

There are multiple situations when sentry will not load/use source maps, for example when the app is not in public url (you can use ngrok/localtunnel in that situations), or there can be wrong urlPrefix.

thanks! i think my config of urlPrefix is right. I think it may be a problem that the build tool compresses the code and causes confusion。

Below is my configuration：

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import viteSentry from "vite-plugin-sentry"
import legacy from "@vitejs/plugin-legacy"
import { minifyHtml } from "vite-plugin-html"
import builtins from "rollup-plugin-node-builtins"

const builtinsPlugin = { ...builtins({ crypto: true }), name: "rollup-plugin-node-builtins" }

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    builtinsPlugin,
    vue(),
    legacy({
      targets: ["defaults", "iOS >= 10"]
    }),
    minifyHtml(),
    viteSentry({
      debug: true,
      url: "xxx",
      authToken: "xxx",
      org: "xxx",
      project: "xxx",
      deploy: {
        env: "production"
      },
      setCommits: {
        auto: false
      },
      release: "v0.0.3",
      sourceMaps: {
        include: ["./dist/assets"],
        ignore: ["node_modules"],
        urlPrefix: "~/assets"
      }
    })
  ],
  define: {
    "process.env": process.env
  },
  build: {
    target: "es2015",
    cssTarget: "chrome61",
    chunkSizeWarningLimit: 1555,
    sourcemap: true,
    minify: false
  }
})

Too tired, tossing for a few days 😟

[ikenfin]

Hmmm, config seems to be correct 🤔

Make sure to pass same release/environment settings in Sentry.init call and try to disable 'Enable JavaScript source fetching' in sentry project settings and check access token permissions.

I've used this permissions setup:

Here is config i've used for vue2 test setup (you can also try to set dist option):

{
// ...
plugins: [
    createVuePlugin(), 
    vitePluginSentry({
      authToken: 'x',
      org: 'x',
      project: 'vue',
      release: version, // from package.json
      deploy: {
        env: "production"
      },
      setCommits: {
        auto: true,
        ignoreEmpty: true
      },
      sourceMaps: {
        // dist: 'prod', // you can try to set this option to add tag to sourcemaps, and set the same option in .init
        sourceMapReference: true,
        ext: ['map', 'js'],
        include: ['./dist/assets'],
        ignore: ['node_modules'],
        urlPrefix: '~/assets/'
      }
    })
  ]
}

And here's client sdk setup:

import Vue from 'vue'
import * as Sentry from "@sentry/vue"
import { version } from '../package.json'
Sentry.init({
  Vue,
  release: version,
  environment: 'production',
  dsn: "x",
  // dist: 'prod', <-- sourcemaps tag
});

Also, please check this issue, maybe your problem is related

[ikenfin]

Oh and i totally forgot - try to upgrade to latest version, i've sent updates to npm about 3hrs ago. Latest plugin version contains updated @sentry/cli package! 👍

[weirui88888]

Oh and i totally forgot - try to upgrade to latest version, i've sent updates to npm about 3hrs ago. Latest plugin version contains updated @sentry/cli package! 👍

I will try one by one ，Thank you so much for your help。

When I succeed, I will be the first to notify you。:smile:

[weirui88888]

I follow your suggestion to configure，but i got an error that sourceMaps do not support dist.

[weirui88888]

Still there? In order to maintain a similar configuration with you, I created a demo project with vite, which uses vue2. Why can't I locate it accurately? I'll find a way for you to try to see my demo. 👊

[ikenfin]

@weirui88888 yeah, this dist option seems to be undocumented a little in cli project, but it's supported by their binary. You can read about it here - https://forum.sentry.io/t/source-code-not-found-on-js-files/13565/13

[weirui88888]

below is my demo,please clone it,and config sentry as youself

hi friend，I wrote a simple demo. Can you clone it down and help me see it? Remember to configure your own sentry config. Thank you very much。

Sentry demo url

[ikenfin]

Hmm, just tested it with your settings and seems it just fine.

Here all my diffs from original config:

On sentry sourcemaps artifacts all the needed files:

And here is error output:

The only problem which i see - there is no sourcemap files for polyfills-legacy after building.

Also, i see that you use url - are you using sentry on-demand? If so, check that this url is configured correctly and also check is on-demand sentry version compatible with @sentry/cli.

[weirui88888]

Hmm, just tested it with your settings and seems it just fine.

Here all my diffs from original config:

On sentry sourcemaps artifacts all the needed files:

And here is error output:

The only problem which i see - there is no sourcemap files for polyfills-legacy after building.

Also, i see that you use url - are you using sentry on-demand? If so, check that this url is configured correctly and also check is on-demand sentry version compatible with @sentry/cli.

[weirui88888]

In your screenshot, I didn't find that I can accurately locate the error to the source file.

[weirui88888]

In your screenshot, I didn't find that I can accurately locate the error to the source file.

[weirui88888]

---

In sentry, there are two places to get auth_token. I don't know the difference between the two tokens. It seems that you use the first token and don't configure the URL. In my configuration, I use the second token and configure the URL

[ikenfin]

In your screenshot, I didn't find that I can accurately locate the error to the source file.

Yeah, i see now. I thought you had problem with uploading source maps.

Unfortunately, after some investigation, i can't say why sourcemaps for vue was generated that in that way 😔 It does'nt looks like a plugin bug, because it just upload ready to use sourcemap files and nothing else. I think problem is hidden somewhere deeper.

Seems that generated sourcemaps missing all the Vue single component logic tags (script,template,style) and because of that we getting wrong error positions in sentry output.

[weirui88888]

In your screenshot, I didn't find that I can accurately locate the error to the source file.

Yeah, i see now. I thought you had problem with uploading source maps.

Unfortunately, after some investigation, i can't say why sourcemaps for vue was generated that in that way 😔 It does'nt looks like a plugin bug, because it just upload ready to use sourcemap files and nothing else. I think problem is hidden somewhere deeper.

Seems that generated sourcemaps missing all the Vue single component logic tags (script,template,style) and because of that we getting wrong error positions in sentry output.

I agree with you very much. Although we can all upload the sourcemap file, we can't accurately locate the wrong place. It's so distressing. 😢

[weirui88888]

Maybe we can find the answer here. It seems to be a plug-in problem in vite-plugin-vue2