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

Forward webview console log messages to browser console #13084

Merged
merged 2 commits into from
Nov 27, 2023

Conversation

tortmayr
Copy link
Contributor

What it does

This ensures that webview console logs are correctly propagated to the backend logger.
Webview are rendered inside of an IFrame this means console logs are isolated and are not forwarded to the backend logger
(in contrast to console logs of the main frontend process).

This change extends the default script injected into webviews to override the global console and send a log message via the postMessage API instead. This event is than handled by the `Webview´ base class and forwarded to the browser console.
In addition to forwarding to the backend logger this also makes it easier to identify log messages that are coming from webviews as they are now prefixed with [webview: ]

Contributed on behalf of STMicroelectronics

How to test

This can be tested with any vsocde-extension that provides a webview with console logs.
I used the CatCoding webview sample and added the following console logs to the webview main script:

    console.log("Test extension webview  is ready!")
    console.debug("Debug test message")
    console.error("Error test message")
    console.warn("Warn test message")
    console.info("Info test message")
    console.trace("Trace test message")
    const foo=()=>{console.log("foo")};
    console.log("Function foo",foo);

The vsix for this customized cat coder can be found here:
cat-coding-0.0.1.zip

To test, add it to the plugin folder,
open the Theia application and then use the Cat Coding: Start coding session command to open the webview.

Expected result: The console logs mentioned above should show up in the browser console and the backend console.

Follow-ups

Review checklist

Reminder for reviewers

This ensures that webview logs are correctly propagated to the backend logger
Contributed on behalf of STMicroelectronics
@tortmayr tortmayr requested a review from tsmaeder November 21, 2023 13:55
Copy link
Member

@msujew msujew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, thanks!

I have a formatting related comment, but everything else looks good 👍

packages/plugin-ext/src/main/browser/webview/pre/main.js Outdated Show resolved Hide resolved
packages/plugin-ext/src/main/browser/webview/pre/main.js Outdated Show resolved Hide resolved
@tortmayr
Copy link
Contributor Author

@msujew Thanks for the fast review. I have (hopefully) fixed the mentioned formatting issues. Also I made sure to remove any indentation overhead at the beginning of each line (as template strings preserver whitespaces).

@tortmayr tortmayr merged commit 59613f9 into eclipse-theia:master Nov 27, 2023
13 of 14 checks passed
@sdirix sdirix deleted the forward-console-log branch November 27, 2023 16:14
@vince-fugnitto vince-fugnitto added this to the 1.44.0 milestone Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants