How to Debug while developing Custom Visuals

[Anonymous]

Hi,

Normally in Javascript while developing on the web I use console.log but with power BI I don't know how to debeug (except target.innerHTML)

Any hint please ?

[MawashiKid · Accepted solution]

RE: How to debug Custom Visuals

Hi,

I would say that using the Power BI Online - developer tool with adding decorator + logException in your Custom Visual source code are perhaps your best choices when it comes to debugging Custom Visuals.

Most of all, the developer tool feature gives you a 'live' action of what's happening and thus avoids you to redundantly have to delete exisitng version and reinsert a new version of the custom visual in Visualizations panel each time you want to bring a modification to your code.

1. Browse and sign into your app.powerbi.com account, then enable the live preview of developer visual option by selecting the gear icon then selecting Settings menu option.


2. Then under General tab, select Developer option and then make sure to have the Enable developer visual for testing
   checkbox is activated.


3. In Visual Studio Code, you can start debugging your custom visuals by first opening the Integrated Panel
in root directory of your project [or using Command Prompt ]then simply type: pbiviz start.



4. This will establish a connection... [Note that the process will restart every time a change of code is detected...]

5. In app.powerbi.com simply select the Developer Visual icon in Visualizations panel. [Note that this acts mainly as your debugging channel and  will mainly focus on ONE componant at a time.]



6. If you encounter similar error as image below while trying to preview your custom visual,  chances are you'll need to create  a trusted https server on your machine Before you can start, you will need to install an SSL certificate which will allow visual assets to load in your web browser. Please refer to this link...

https://powerbi.microsoft.com/en-us/documentation/powerbi-custom-visuals-getting-started-with-develo...


7. Last but not least...Dealing with breakpoints and logException. Whenever you're dealing with Custom Visuals code you have to take into account that you're not really dealing directly with JavaScript code that sits in a Web page but a pbiviz custom visual... So one key factor to keep in mind is that the visuals content is entirely reloaded every time the custom visuals
is updated, making any breakpoints mostly unreachable or completely ignored. To work around this, you can use debugger statements in your code. It is recommended that you turn off auto-reload while using debugger in your code.

A) To log exceptions in your visual add a similar logExceptions() function code to your visual to define an exception logging decorator:

module powerbi.extensibility.visual {
    export function logExceptions(): MethodDecorator {
        return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<Function>)
        : TypedPropertyDescriptor<Function> {
            
            return {
                value: function () {
                    try {
                        return descriptor.value.apply(this, arguments);
                    } catch (e) {
                        console.error(e);
                        throw e;
                    }
                }
            }
        }
    }
}

B)Then, you can use this decorator on any function to see error logging like this:

@logExceptions()
public update(options: VisualUpdateOptions) {
    console.log('Visual update', options);
    debugger; <------!!!
    this.target.innerHTML = `<p>Update count: <em>${(this.updateCount++)}</em></p>`;
}

You can always check following link for further infos..

https://github.com/Microsoft/PowerBI-visuals/blob/master/tools/debugging.md

Hope this helps.

[v-viig · Accepted solution]

You might try to use something like this:

module powerbi.extensibility.visual {
    export function logExceptions(): MethodDecorator {
        return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>)
            : TypedPropertyDescriptor<any> {

            return {
                value: function () {
                    try {
                        return descriptor.value.apply(this, arguments);
                    } catch (e) {
                        console.error(e);
                        throw e;
                    }
                }
            }
        }
    }
}

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[MawashiKid · Accepted solution]

RE: How to debug Custom Visuals

Hi,

I would say that using the Power BI Online - developer tool with adding decorator + logException in your Custom Visual source code are perhaps your best choices when it comes to debugging Custom Visuals.

Most of all, the developer tool feature gives you a 'live' action of what's happening and thus avoids you to redundantly have to delete exisitng version and reinsert a new version of the custom visual in Visualizations panel each time you want to bring a modification to your code.

1. Browse and sign into your app.powerbi.com account, then enable the live preview of developer visual option by selecting the gear icon then selecting Settings menu option.


2. Then under General tab, select Developer option and then make sure to have the Enable developer visual for testing
   checkbox is activated.


3. In Visual Studio Code, you can start debugging your custom visuals by first opening the Integrated Panel
in root directory of your project [or using Command Prompt ]then simply type: pbiviz start.



4. This will establish a connection... [Note that the process will restart every time a change of code is detected...]

5. In app.powerbi.com simply select the Developer Visual icon in Visualizations panel. [Note that this acts mainly as your debugging channel and  will mainly focus on ONE componant at a time.]



6. If you encounter similar error as image below while trying to preview your custom visual,  chances are you'll need to create  a trusted https server on your machine Before you can start, you will need to install an SSL certificate which will allow visual assets to load in your web browser. Please refer to this link...

https://powerbi.microsoft.com/en-us/documentation/powerbi-custom-visuals-getting-started-with-develo...


7. Last but not least...Dealing with breakpoints and logException. Whenever you're dealing with Custom Visuals code you have to take into account that you're not really dealing directly with JavaScript code that sits in a Web page but a pbiviz custom visual... So one key factor to keep in mind is that the visuals content is entirely reloaded every time the custom visuals
is updated, making any breakpoints mostly unreachable or completely ignored. To work around this, you can use debugger statements in your code. It is recommended that you turn off auto-reload while using debugger in your code.

A) To log exceptions in your visual add a similar logExceptions() function code to your visual to define an exception logging decorator:

module powerbi.extensibility.visual {
    export function logExceptions(): MethodDecorator {
        return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<Function>)
        : TypedPropertyDescriptor<Function> {
            
            return {
                value: function () {
                    try {
                        return descriptor.value.apply(this, arguments);
                    } catch (e) {
                        console.error(e);
                        throw e;
                    }
                }
            }
        }
    }
}

B)Then, you can use this decorator on any function to see error logging like this:

@logExceptions()
public update(options: VisualUpdateOptions) {
    console.log('Visual update', options);
    debugger; <------!!!
    this.target.innerHTML = `<p>Update count: <em>${(this.updateCount++)}</em></p>`;
}

You can always check following link for further infos..

https://github.com/Microsoft/PowerBI-visuals/blob/master/tools/debugging.md

Hope this helps.

[mikorym]

Is point 7. of this solution still valid?

Upon adding the logExceptions() function, the error I get is:

[ts]
Type '<T>(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<Function>) => TypedP...' is not assignable to type 'MethodDecorator'.
Types of parameters 'descriptor' and 'descriptor' are incompatible.
Type 'TypedPropertyDescriptor<T>' is not assignable to type 'TypedPropertyDescriptor<Function>'.
Type 'T' is not assignable to type 'Function'.

(local function)(): any

[mikorym]

I am going to answer my own question:

The code block by v-viig is slightly different and seems to work. In his code block, "<Function>" is replaced by "<any>" in two places.

descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any>

[Anonymous]

Hi all, 

I am developing a custom control using PowerBI tools for NodeJs and Visual Studio Code as IDE.

And I am having days trying to debug:, it says:

Cannot connect to runtime process, timeout after 10000ms -(reason cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229).

When i open "launch.json" i have it configured to be attach to the port, like this: 

launch.json

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "node",

            "request": "attach",

            "name": "Attach",

            "port": 9229,

            "skipFiles": [

                "<node_internals>/**"

            ]

        }],

    "compounds": []

}

package.json

{

  "name": "visual",

  "scripts": {

    "pbiviz": "pbiviz",

    "start": "pbiviz start",

    "package": "pbiviz package",

    "lint": "tslint -c tslint.json -p tsconfig.json"

  },

  "dependencies": {

    "@babel/runtime": "7.6.0",

    "@babel/runtime-corejs2": "7.6.0",

    "@types/d3": "^5.7.2",

    "@types/googlemaps": "^3.39.3",

    "core-js": "^3.6.4",

    "d3": "^5.15.0",

    "powerbi-visuals-utils-dataviewutils": "2.2.1"

  },

  "devDependencies": {

    "powerbi-visuals-api": "^2.6.2",

    "ts-loader": "6.1.0",

    "tslint": "^5.18.0",

    "tslint-microsoft-contrib": "^6.2.0",

    "typescript": "3.6.3"

  }

}

Please, do you have any idea?

@v-viig @mikorym @Anonymous @Anonymous 

[Shawn_Eary]

I don't think any of this will work for custom visuals written in R Script...   In fact, I can't even get the "print" statement to work for my custom visuals that I'm trying to write in R Script...

I need a way to debug R Script visuals because the R Scripting language is much easier to work with than JavaScript.  Yes, I am a former WebDeveloper and I know basic JavaScript, but the custom visuals SDK that Microsoft provides for Power BI seems to have a lot of: bloat; overhead; and, a notable learning curve.  On the other hand, R feels pretty straightforward assuming I can just figure out how to parse the dataset comming in from Power BI.

The sad thing is I can't find an easy way to debug my R code once it's in Power BI.  Sure, I can debug it when I use tools external to Power BI, but I haven't figured out how do that within the Power BI context...

[Anonymous]

Hi, 
I try to use the mentioned logException() code but I get an error !

[ts]
Der Typ "<T>(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<Function>) => TypedP..." kann dem Typ "MethodDecorator" nicht zugewiesen werden.
Die Typen der Parameter "descriptor" und "descriptor" sind nicht kompatibel.
Der Typ "TypedPropertyDescriptor<T>" kann dem Typ "TypedPropertyDescriptor<Function>" nicht zugewiesen werden.
Der Typ "T" kann dem Typ "Function" nicht zugewiesen werden.
(local function)(): any

 

I tried it with an empty visual (after executing pbiviz new myVisual), so it cannot be the problem with the code. Is there any new method for handling debugging ??

best regards,

feelfine

[v-viig · Accepted solution]

You might try to use something like this:

module powerbi.extensibility.visual {
    export function logExceptions(): MethodDecorator {
        return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>)
            : TypedPropertyDescriptor<any> {

            return {
                value: function () {
                    try {
                        return descriptor.value.apply(this, arguments);
                    } catch (e) {
                        console.error(e);
                        throw e;
                    }
                }
            }
        }
    }
}

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

Thank you. Yes it worked as expected. 

[Anonymous · Accepted solution]

This is helpful but @Anonymous or @v-viig do either of you know how to actually stop the server from listenting? After running "pbiviz start" you get the message "Server listening on port 8080". If I want to stop listening and go back to command line how do I do this? The only way I can stop now is by closing the command prompt window entirely and reopening

UPDATE-- found the answer, just press ctrl+C, then type "Y"