Previewer not working, unexpected end of json input

[Mrcubix]

Describe the bug

The previewer refuses to work in a more complex project, this has been the same since 11.0.4

No errors appear in the output section of vscode, and you have to check the developer console to find these errors:

Sometimes, it's stuck at the 127 character like this, sometimes at the 12680th character, or around something like that.

To Reproduce

1. Open VSCode
2. Make sure VSCode is updated
3. Make sure the extension is updated
4. Make sure the project is updated to the latest version of Avalonia & .NET available
5. Open one or multiple axaml files
6. Try to preview Any of them
7. Trying to preview the same file multiple times result in a different error related to json input every single times

Avalonia for VS Code

v0.0.27

Avalonia version

11.0.4 - 11.0.7

VS Code version

1.85.2

Relevant log output

### Start of first example errors

mainThreadExtensionService.ts:81 [AvaloniaTeam.vscode-avalonia]Unexpected end of JSON input
$onExtensionRuntimeError @ mainThreadExtensionService.ts:81
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:82 SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at updateSolutionModel (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:62:23)
    at Socket.<anonymous> (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:99:13)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Socket.Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
$onExtensionRuntimeError @ mainThreadExtensionService.ts:82
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:81 [AvaloniaTeam.vscode-avalonia]Unexpected non-whitespace character after JSON at position 127
$onExtensionRuntimeError @ mainThreadExtensionService.ts:81
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:82 SyntaxError: Unexpected non-whitespace character after JSON at position 127
    at JSON.parse (<anonymous>)
    at updateSolutionModel (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:62:23)
    at Socket.<anonymous> (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:99:13)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Socket.Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

### Start of second example error

[AvaloniaTeam.vscode-avalonia]Expected ',' or '}' after property value in JSON at position 11264
$onExtensionRuntimeError @ mainThreadExtensionService.ts:81
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:82 SyntaxError: Expected ',' or '}' after property value in JSON at position 11264
    at JSON.parse (<anonymous>)
    at updateSolutionModel (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:62:23)
    at Socket.<anonymous> (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:99:13)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Socket.Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
$onExtensionRuntimeError @ mainThreadExtensionService.ts:82
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:81 [AvaloniaTeam.vscode-avalonia]Unexpected token ',', ",
      ""... is not valid JSON
$onExtensionRuntimeError @ mainThreadExtensionService.ts:81
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374
mainThreadExtensionService.ts:82 SyntaxError: Unexpected token ',', ",
      ""... is not valid JSON
    at JSON.parse (<anonymous>)
    at updateSolutionModel (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:62:23)
    at Socket.<anonymous> (c:\Users\tinta\.vscode\extensions\avaloniateam.vscode-avalonia-0.0.27\out\services\solutionParser.js:99:13)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Socket.Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
$onExtensionRuntimeError @ mainThreadExtensionService.ts:82
S @ rpcProtocol.ts:456
Q @ rpcProtocol.ts:441
M @ rpcProtocol.ts:371
L @ rpcProtocol.ts:297
(anonymous) @ rpcProtocol.ts:161
y @ event.ts:1148
fire @ event.ts:1179
fire @ ipc.net.ts:650
x.onmessage @ localProcessExtensionHost.ts:374

Additional context

[prashantvc]

is it possible to share a sample project to reproduce this issue?

[BinToss]

Does the Avalonia Client log print the path of the solution data JSON file? Search for "Solution data path" and–if you're comfortable with sharing some of your solution and project info–attach the JSON file here.

Chances are it's incomplete or incorrectly formatted.

[Mrcubix]

Touch-Gestures.sln.json

Here is the json filer in question after building once. As for the repo i'm using to achieve this error, it's currently private for now, would me sending an invite be fine?

[BinToss]

The JSON file is in perfect condition. Completely valid for Node's JSON.parse() function (which is oddly picky when it comes to stuff like trailing commas).

However, I do know where exactly the exception is coming from. https://github.com/AvaloniaUI/AvaloniaVSCode/blob/main/src/vscode-avalonia/src/services/solutionParser.ts#L113:~:text=const%20jsonContent%20=%20data.toString(); https://github.com/AvaloniaUI/AvaloniaVSCode/blob/24f11444d5e3065717154c2cfda3fd942520edfb/src/vscode-avalonia/src/services/solutionParser.ts#L112-L116 And it's a race condition. The dotnet process hosting the SolutionParser DLL begins writing the solution data JSON to stdout. The extension notices the new data and immediately begins parsing it...without checking if it's finished yet. Smaller solutions yield less data so their JSON data is completely written to stdout before the extension begins parsing the data.

[BinToss]

Duplicate of #75, btw

[prashantvc]

@Mrcubix could you invite me to the repo. I can see the JSON is all good It's probably the race condition like @BinToss mentioned

[Mrcubix]

Done, should be able to access https://github.com/Mrcubix/Touch-Gestures, i have provided an ISSUES.md file there containing files you can reproduce the issue for

[prashantvc]

@Mrcubix thanks for share the repo. I think I have fixed it, could you give this a try and let me know please? https://www.dropbox.com/scl/fi/w64l2d80kqa9dsbnn2sh1/vscode-avalonia-0.0.31.vsix?rlkey=9d2vh4ugukro39gktljkywqgu&dl=1

[Mrcubix]

Will start testing nlw in this project and a couple more and i will let you know

[Mrcubix]

It seem like previews work in simple cases.

Issues

Although i have found a couple issues:

• Currently, it seems like the extension will fail silently if the compilation fail or an unhandled error occur.

For instance, while i was trying to preview BindingsOverview, GestureSelectionScreen, TapSetup & SwipeSetup, i was missing a parameterless constructor.

• Currently, i am unable to style the design, for instance, let's say i want to add a background to the aboves, i would do something along the following:

<Design.PreviewWith>
  <views:BindingsOverview Background="{StaticResource BodyColorBrush}" />
</Design.PreviewWith>

This seems to silently fail with a long stacktrace looking at avalonia's logs.

Avalonia Client.log

• A Weird flicker of the tooltip on GestureTile, this only happen in the previewer :

https://github.com/AvaloniaUI/AvaloniaVSCode/assets/39861216/31906777-a1b0-4237-91a6-9cbbe5868f11

Previews

Other than those, as of right now, work about as expected when sticking to simple previews:

GestureTile :

BindingsOverview :

BindingSlectionScreen :

TapSetup :

Swipe Setup :

[prashantvc]

Thanks for trying it out. I will close this issue. You can file a new one issue for

Currently, it seems like the extension will fail silently if the compilation fail or an unhandled error occur.