CODEWITHSUNDEEP
htmljsonazure-devopssdkazure-devops-extensions
Joe Colvile
Joe Colvile

Reputation: 1

Devops extension consol error - No handler found on any channel for message

Hopefully I am just being thick. I am new to devops extensions, I have stripped back my code to the bare minimum to try and solve this issue but with no luck. Copilot has been pretty useless as well. I have installed my extension on my devops environment and when loading it up, I get the consol error even though my html loads up fine:

No handler found on any channel for message: {"id":1,"methodName":"","instanceId":"JColvile.ally.ally","instanceContext":{"user":{"id":"199e5f78-06e1-648d-b8bd-71ec64702aa0","name":"Joseph colvile","subjectType":"msa","subjectId":"199e5f78-06e1-748d-b8bd-71ec64702aa0","email":"[email protected]","uniqueName":"[email protected]"},"project":{"id":"45af2015-9cd4-449e-9708-d7dc6ce25661","name":"Test"},"collection":{"id":"0dee7a15-1ab5-4d3f-8099-621326a484c5","name":"josephcolvile","uri":"https://dev.azure.com/josephcolvile/","relativeUri":"/josephcolvile/"},"account":{"id":"4aab89c0-5375-4d4f-b539-b47aeb1d04f1","name":"josephcolvile","uri":"https://dev.azure.com/josephcolvile/","relativeUri":"/josephcolvile/"},"host":{"id":"0dee7a15-1ab5-4d3f-8099-621326a484c5","name":"josephcolvile","uri":"https://dev.azure.com/josephcolvile/","relativeUri":"/josephcolvile/","hostType":4,"scheme":"https","authority":"dev.azure.com"}},"params":null,"jsonrpc":"2.0"}

This is my HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            if (typeof SDK !== 'undefined') {
                console.log("SDK is defined. Trying to initialize...");
                SDK.init();
                SDK.ready().then(() => {
                    console.log("SDK is ready");
                    document.getElementById("name").innerText = SDK.getUser().displayName;
                });
            } else {
                console.log('SDK is not defined');
            }
        });
    </script>
    <link rel="stylesheet" href="style.css">
</head>
<body>        
    <h1>AI Assist - User Story Generation</h1>
    <form id="userStoryForm" onsubmit="return false;">
        <label for="Description">Requirement Description:</label><br>
        <input type="text" id="Description" name="Description"><br>
        <input type="submit" value="Generate User Story">
    </form>
    <div id="result"></div>
    <footer>
        <p>Logged in as: <span id="name"></span></p>
    </footer>
</body>
</html>

And this is my vss-extension.json contents:

{
    "manifestVersion": 1,
    "id": "ally",
    "publisher": "JColvile",
    "version": "1.0.10",
    "name": "ally",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "ally",
            "type": "ms.vss-work-web.work-item-form-page",
            "targets": [
                "ms.vss-work-web.work-item-form"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "ally.html"
            }
        }
    ],
    "files": [
        {
            "path": "ally.html",
            "addressable": true
        },
        {
            "path": "style.css",
            "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

Any ideas on how I resolve this? Or could this be one of those errors that I can just ignore ;)

Installed npm install azure-devops-extension-sdk --save

This populated my node_modules files. I then created my vss-extension.json file and populated it with the MS default from https://learn.microsoft.com/en-us/azure/devops/extend/get-started/node?toc=%2Fazure%2Fdevops%2Fmarketplace-extensibility%2Ftoc.json&view=azure-devops.

I then created my basic HTML page, ensuring that the html file is referenced in the vss-extension.

I then ran the npx tfx-cli extension create command to package and create my vsix file. I then published this to the devops extension store and installed on my devops organization. I am working through step by step as this is my first extension and am unsure why this consol error is occurring.

Upvotes: 0

Views: 56

Answers (1)

Ziyang Liu-MSFT
Ziyang Liu-MSFT

Reputation: 5296

The error message "No handler found on any channel for message" typically indicates that your extension is trying to send or receive a message, but there is no handler registered to process it. Checking your HTML, I don't find any handler registered like:

            VSS.register(VSS.getContribution().id, function () {
                return {
                    // Called when the active work item is modified
                    onFieldChanged: function(args) {
                        $(".events").append($("<div/>").text("onFieldChanged - " + JSON.stringify(args)));
                    },
                    
                    // Called when a new work item is being loaded in the UI
                    onLoaded: function (args) {
            
                        getWorkItemFormService().then(function(service) {            
                            // Get the current values for a few of the common fields
                            service.getFieldValues(["System.Id", "System.Title", "System.State", "System.CreatedDate"]).then(
                                function (value) {
                                    $(".events").append($("<div/>").text("onLoaded - " + JSON.stringify(value)));
                                },
                                function(error) { 
                                    window.alert(error.message); 
                                });
                        });
                    },
                    
                    // Called when the active work item is being unloaded in the UI
                    onUnloaded: function (args) {
                        $(".events").empty();
                        $(".events").append($("<div/>").text("onUnloaded - " + JSON.stringify(args)));
                    },
                    
                    // Called after the work item has been saved
                    onSaved: function (args) {
                        $(".events").append($("<div/>").text("onSaved - " + JSON.stringify(args)));
                    },
                    
                    // Called when the work item is reset to its unmodified state (undo)
                    onReset: function (args) {
                        $(".events").append($("<div/>").text("onReset - " + JSON.stringify(args)));
                    },
                    
                    // Called when the work item has been refreshed from the server
                    onRefreshed: function (args) {
                        $(".events").append($("<div/>").text("onRefreshed - " + JSON.stringify(args)));
                    }
                }
            });

You can refer to this example to understand how to use message handlers.

Upvotes: 0

Related Questions