Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sourcemap points to wrong line for thrown error at <template> directive #500

Open
8 of 9 tasks
mertcb opened this issue Jan 3, 2025 · 0 comments
Open
8 of 9 tasks

Comments

@mertcb
Copy link

mertcb commented Jan 3, 2025

Related plugins

Describe the bug

I am developing a tool that makes it easier to find errors by redirecting the errors thrown by Vue applications to the relevant lines in our own repositories, and with this problem, we can't redirect developers to right line of code.

You can find a slackblitz that shows the exact scenario.

In this scenario what I expect is after restoring stacktrace by sourcemap, I'd to see error has been thrown at line 14 of HelloWorld.vue

What happening is, after restoring stacktrace by sourcemap, stacktrace points error has been thrown at line 8, which is the end of the <script> directive, and it's wrong.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mpsjmqwf?file=package.json

Steps to reproduce

Run npm install on slackblitz then, run npm run build then npm run preview. You'll see some dist js and map files at dist/assets folder. Then open inspect tab in your browser and click throw error. Copy that stacktrace from error like following,

Error: This is test error!
    at ar.onClick.s.<computed>.s.<computed> (index-C5DAgDqG.js:17:6605)
    at yt (index-C5DAgDqG.js:13:38)
    at we (index-C5DAgDqG.js:13:108)
    at HTMLButtonElement.s (index-C5DAgDqG.js:17:4000)

and paste into https://sourcemap.tools/ after then copy the contents of map file in dist/assets and paste into this website too.

Then you'll see the stacktrace as following

Error: This is test error!
  at (../../src/components/HelloWorld.vue:8:19)
  at fn (../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:199:18)
  at callWithErrorHandling (../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:206:16)
  at callWithAsyncErrorHandling (../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:729:4)

After restoring stacktrace with sourcemap, you'll see the error points to end of the <script> directive, not the line where error has been thrown.

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 88.73 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.0.1
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.1 
    vite: ^6.0.7 => 6.0.7

Used Package Manager

npm

Logs

No response

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant