1660959 - Debugger goes blank when pausing in a Vue2 project

Status: NEW

(DevTools :: Debugger, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

(copied from https://github.com/firefox-devtools/debugger/issues/8294)

Here's some log from the browser console:

Error: source sourceURL-webpack-internal:///1165/originalSource-5232e3bf96c96b9ce8811861756ac7c7 does not exist
    [devtools/client/debugger/src/reducers/sources.js getSourceFromId](https://searchfox.org/mozilla-central/rev/19c23d725f27d0989e4a60f36d64004cebb39736/devtools/client/debugger/src/reducers/sources.js#643)  resource://devtools/client/debugger/src/reducers/sources.js:525
    mapStateToProps resource://devtools/client/debugger/src/components/SecondaryPanes/index.js:490
    Redux 10
    waitUntilService resource://devtools/client/debugger/src/actions/utils/middleware/wait-service.js:71
    promiseMiddleware resource://devtools/client/debugger/src/actions/utils/middleware/promise.js:46
    context resource://devtools/client/debugger/src/actions/utils/middleware/context.js:35
    thunk resource://devtools/client/debugger/src/actions/utils/middleware/thunk.js:29
    dispatch Redux
    mapFrames resource://devtools/client/debugger/src/actions/pause/mapFrames.js:150
react-dom.js:12769:13
    React 19
    Redux 5
    waitUntilService resource://devtools/client/debugger/src/actions/utils/middleware/wait-service.js:71
    promiseMiddleware resource://devtools/client/debugger/src/actions/utils/middleware/promise.js:46
    context resource://devtools/client/debugger/src/actions/utils/middleware/context.js:35
    thunk resource://devtools/client/debugger/src/actions/utils/middleware/thunk.js:29
    dispatch Redux
    mapFrames resource://devtools/client/debugger/src/actions/pause/mapFrames.js:150
Error: source sourceURL-webpack-internal:///1165/originalSource-5232e3bf96c96b9ce8811861756ac7c7 does not exist sources.js:525:11

I don't know the root issue, but the debugger goes blank because we throw in https://searchfox.org/mozilla-central/rev/19c23d725f27d0989e4a60f36d64004cebb39736/devtools/client/debugger/src/reducers/sources.js#643 .
We could probably not throw and handle cases where the source wasn't found.

Comment 1

[Nicolas Vandeginste (Kuinox)]

I think you missed this parsing error in the log i posted:
https://github.com/firefox-devtools/debugger/issues/8294#issuecomment-679240961
Should I open a separate issue ?

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for cloning the bug Nicolas!
Do we have any STRs for this?

Marking as P2 we should fix it.

Honza

Comment 3

[Nicolas Vandeginste (Kuinox)]

Sadly I don't have time this week to do a minimal reproduction (I may try this weekend).
I can reproduce the parsing error that I mentioned in my last message, on a webapp I work on, but I don't think I can share sources.
I tried to pinpoint the parsing error, but I gave up when I understood there was no debugger hooked on the devtools itself :p.

For the bug described in this ticket, I don't know if I can reproduce it (I may try this weekend too).

Comment 4

[Nicolas Vandeginste (Kuinox)]

I reproduced the parsing error, but still at work, so I don't have the time to do a minimal reproduction:

SyntaxError: Unexpected token (38:17) 2 parser-worker.js:7490:13
    parse resource://devtools/client/debugger/dist/parser-worker.js:7490
    parseVueScript resource://devtools/client/debugger/dist/parser-worker.js:7539
    getAst resource://devtools/client/debugger/dist/parser-worker.js:7580
    traverseAst resource://devtools/client/debugger/dist/parser-worker.js:7601
    extractSymbols resource://devtools/client/debugger/dist/parser-worker.js:16633
    getSymbols resource://devtools/client/debugger/dist/parser-worker.js:16829
    workerHandler resource://devtools/client/debugger/dist/parser-worker.js:7196
    workerHandler resource://devtools/client/debugger/dist/parser-worker.js:7194

export default class Dashboard extends Vue {
  @Prop({ required: true })
  observationType!: Navigation; // line 17

It fails on the exclamation mark.

Comment 5

[Nicolas Vandeginste (Kuinox)]

I got a minimal reproduction:

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  test!: number;
  mounted() {
    debugger;
  }
}

Looks like it fails to parse the "!".