topic Re: How to Debug while developing Custom Visuals in Developer

How to Debug while developing Custom Visuals

Anonymous — Fri, 02 Jun 2017 13:51:33 GMT

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 ?

Re: How to Debug while developing Custom Visuals

MawashiKid — Sun, 04 Jun 2017 19:20:51 GMT

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-developer-tools/

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.

Re: How to Debug while developing Custom Visuals

Anonymous — Fri, 16 Feb 2018 12:41:33 GMT

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

Re: How to Debug while developing Custom Visuals

v-viig — Mon, 19 Feb 2018 13:16:02 GMT

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

Re: How to Debug while developing Custom Visuals

Anonymous — Tue, 20 Feb 2018 09:18:34 GMT

Thank you. Yes it worked as expected.

Re: How to Debug while developing Custom Visuals

Anonymous — Thu, 23 Aug 2018 20:18:31 GMT

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"

Re: How to Debug while developing Custom Visuals

mikorym — Sat, 25 Aug 2018 16:25:23 GMT

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

Re: How to Debug while developing Custom Visuals

mikorym — Sat, 25 Aug 2018 17:45:33 GMT

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>

Re: How to Debug while developing Custom Visuals

Anonymous — Tue, 10 Mar 2020 14:57:12 GMT

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

Re: How to Debug while developing Custom Visuals

Shawn_Eary — Fri, 10 Apr 2020 15:01:03 GMT

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...

Re: How to Debug while developing Custom Visuals

richardcalvert — Wed, 24 Apr 2024 11:56:05 GMT

Debugger and console.log also work in this context.