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

Webview is unable to load resources while reconstructing after a reload #89038

Closed
akonwi opened this issue Jan 21, 2020 · 33 comments · Fixed by #97777
Closed

Webview is unable to load resources while reconstructing after a reload #89038

akonwi opened this issue Jan 21, 2020 · 33 comments · Fixed by #97777
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders markdown Markdown support issues verified Verification succeeded webview Webview issues
Milestone

Comments

@akonwi
Copy link

akonwi commented Jan 21, 2020

  • VSCode Version: Insiders Version: 1.42.0-insider
    -- Commit: 2832fc3
    -- Date: 2020-01-21T11:30:21.087Z
    -- OS Version: OSX

Steps to Reproduce:

With CodeStream extension:

  1. Open the webview
  2. Reload the window
  3. CodeStream panel will be blank
  4. Open webview dev tools
  5. The console will contain errors like Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
  6. Close the blank panel
  7. Re-open the CodeStream view
  8. Content should be displayed

With Markdown Preview:

  1. Open markdown preview for a markdown file
  2. Reload the window
  3. Preview panel will display message about an error restoring

EDIT: markdown preview seems fine now

@vscodebot vscodebot bot added the markdown Markdown support issues label Jan 21, 2020
@mjbvz
Copy link
Contributor

mjbvz commented Jan 21, 2020

Can't reproduce this issue in the markdown preview with current VS Code insiders on MacOS 10.15.2

What MacOS version?

@akonwi
Copy link
Author

akonwi commented Jan 21, 2020

I'm also on 10.15.2. Oddly enough, I just attempted to reproduce it again with markdown preview and it's working as expected.

@mjbvz
Copy link
Contributor

mjbvz commented Jan 21, 2020

Ok, closing as not-reproducible

@mjbvz mjbvz closed this as completed Jan 21, 2020
@mjbvz mjbvz added *not-reproducible Issue cannot be reproduced by VS Code Team member as described webview Webview issues labels Jan 21, 2020
@akonwi
Copy link
Author

akonwi commented Jan 21, 2020

It's still an issue for the codestream extension though

@mjbvz
Copy link
Contributor

mjbvz commented Jan 21, 2020

How can I easily test that?

@akonwi
Copy link
Author

akonwi commented Jan 22, 2020

Just install the extension and the webview should open immediately once installed. If it doesn't, use the CodeStream: Sign in command in the palette. Then reload the window

@mjbvz
Copy link
Contributor

mjbvz commented Jan 22, 2020

I don't see the web view getting restored at all (no errors or anything). Does it have a serializer?

@akonwi
Copy link
Author

akonwi commented Jan 22, 2020

Sorry, we just only re-display the webview if you're already logged in. We don't use a serializer.

I've made a video reproducing it. It starts with the webview displayed correctly, I open up the dev tools and inspect the uri for the js we load, then reload the window. On reload, the webview panel is displayed again but left blank and in the webview dev tools, you'll see the error. The requested uri is still correct though. Then I'll close the corrupted webview and re-open it, and it works correctly again.

@mjbvz mjbvz reopened this Jan 22, 2020
@mjbvz mjbvz removed the *not-reproducible Issue cannot be reproduced by VS Code Team member as described label Jan 22, 2020
@mjbvz
Copy link
Contributor

mjbvz commented Feb 26, 2020

I've now also seen this but only when the dev tools were open (on the main VS Code window)

@mjbvz mjbvz added this to the Backlog milestone Feb 26, 2020
@mjbvz mjbvz added the bug Issue identified by VS Code Team member as probable bug label Feb 26, 2020
mjbvz added a commit that referenced this issue Mar 3, 2020
Possible fix for #89038/#91506. In both cases, it looks like we try to use the protocol before it is properly registered. If this fix doesn't work, there's probably something weird going on on the electron side of things
@connor4312
Copy link
Member

I'm seeing this happen pretty often as well. Let me know if there's any info I can get for you

@planteater
Copy link

@mjbvz - Has this been attached to a future milestone yet? We're trying to find workarounds on our end but right now this is having a huge impact on our customers' experience.

@mjbvz
Copy link
Contributor

mjbvz commented Mar 25, 2020

No but since you can reproduce this reliably, it would be good if you could try investigating what's going wrong:

It should wait until the protocol is registered before sending over the html but something is failing (possibly on the electron side)

@hrj
Copy link

hrj commented Mar 26, 2020

@mjbvz At the point where registerFileProtocol() is called there is no await or callback. The code directly resolves the ready promise:

registerFileProtocol(contents, WebviewResourceScheme, fileService, getExtensionLocation(), getLocalResourceRoots);
this._resolve();

@mjbvz
Copy link
Contributor

mjbvz commented Mar 26, 2020

The registerFileProtocol calls in electron should now be synchronous, see #92138

@bcanzanella
Copy link

@mjbvz while registerFileProtocol is synchronous, what about the function it calls registerBufferProtocol? it has an async callback with what appears to be some kind of success check. Would this._resolve() need to be called inside registerBufferProtocol's callback? pseudo code below:

registerFileProtocol(contents, WebviewResourceScheme, fileService, getExtensionLocation(), getLocalResourceRoots, () => this._resolve());

export function registerFileProtocol(
	contents: electron.WebContents,
	protocol: string,
	fileService: IFileService,
	extensionLocation: URI | undefined,
	getRoots: () => ReadonlyArray<URI>,
        onRegistered: () => void // new arg
) {
	contents.session.protocol.registerBufferProtocol(protocol, async (request, callback: any) => {
		try {
			const result = await loadLocalResource(URI.parse(request.url), fileService, extensionLocation, getRoots);
			if (result.type === WebviewResourceResponse.Type.Success) {
                                 // new code
                                if (typeof(onRegistered) === 'Function') {
                                     onRegistered();
                                 }
				return callback({
					data: Buffer.from(result.data.buffer),
					mimeType: result.mimeType
				});
			}

@mjbvz
Copy link
Contributor

mjbvz commented Mar 26, 2020

This one should also be async now, see https://www.electronjs.org/docs/api/breaking-changes-ns#planned-breaking-api-changes

The other callback ( async (request, callback: any)) is the handler for requests themselves once they come in

@hrj
Copy link

hrj commented Mar 27, 2020

This is one of the changes mentioned in that doc:

The registered or intercepted protocol does not have effect on current page until navigation happens.

Just a hunch: Could it be that navigation is sometimes being triggered before the registration is started? (I couldn't find the relevant code)

@Kruemelkatze
Copy link

Kruemelkatze commented Apr 2, 2020

We also get this issue with my Dashboard extension, which uses a webview for a custom UI. Reopening the webview solves the problem.

Kruemelkatze/vscode-dashboard#35.

guitoof added a commit to bamlab/conceptor that referenced this issue May 11, 2020
This prevents from having to load the package locally with the buggy asWebviewUri (microsoft/vscode#89038)

Closes #11
@alefragnani
Copy link

I just noticed the same issue while updating two of my extensions. I'm with VS Code 1.45 Stable and VS Code 1.46 Insiders, on MacOS. Loading on Windows, worked perfectly.

The failed resources are a css and a png file I use. Another remote png loads fine.

But, it only happens when the WebView is loaded at extension's activation, with in my case is defined as activationEvents: *. If I close the WebView and call it again, it works.

It's a bit weird, because I have the same WebView on other extensions and it is working fine. I thought it could be something related to recent updates I made on this Webview, but if I install older versions of the same extension (using the VS Code Extension feature), it also fails.

Just noticed I didn't embrace https://code.visualstudio.com/updates/v1_39#_warning-if-webviews-dont-use-webviewaswebviewuri-for-local-resources yet. I'm still loading local resources using { scheme: "vscode-resource" }. Could it be connected somehow?

I'll try to update, and post here if something new appear.

@alefragnani
Copy link

Unfortunately, didn't work 😞 .

At first it appeared ok, but after a few retries, the issue reappeared. It's instable, at least.

Just out of curiosity, using scheme: "vscode-resource" gives me this:

<img src="vscode-resource:/thePath/vscode-readme.png">

Using asWebviewUri has a slight different syntax:

<img src="vscode-resource://file///thePath/vscode-readme.png">

I hope the above PR should solve this, and be released as an patch to 1.45.

Thank you

@RandomFractals
Copy link

@mjbvz does it have to be new vscode-webview-resource protocol?

Even if that pull request fixes things, it would still require all extension authors to update their extensions for the broken vscode-resource loading on reload.

@mjbvz
Copy link
Contributor

mjbvz commented May 15, 2020

@RandomFractals Yes. Extensions that use asWebviewUri will just automatically start using the new protocol. The PR also tries to rewrite any hardcoded vscode-resource uris (which have been deprecated for a while since they also don't work on web)

@mjbvz
Copy link
Contributor

mjbvz commented Jun 1, 2020

Had to revert this fix due to #98768

Will revisit for June

@agrawal-d
Copy link

agrawal-d commented Jun 9, 2020

@mjbvz If you need to test with extensions for testing/reproduction, you can use mine. Just create a simple .py file :

print("ok")

and press Ctrl+Alt+B. It should open a web view ( which is a React App ), and the react script sometimes fails to load with Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME error.

agrawal-d added a commit to agrawal-d/cph that referenced this issue Jun 9, 2020
Upstream VS Code bug (microsoft/vscode#89038).
For now, load resource using `fs`. Revert when upstream issue is fixed.
@mjbvz mjbvz closed this as completed in d2ae606 Jun 15, 2020
@connor4312 connor4312 added the verified Verification succeeded label Jul 2, 2020
@connor4312
Copy link
Member

I have not seen this in the last few weeks working on webview debugging or reproduce it as I used to be able to, thus marking verified.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 31, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders markdown Markdown support issues verified Verification succeeded webview Webview issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.

15 participants