Browser compatibility matrix

Dashboard
1

Hi
What browsers and versions are officially supported for node-red-dashboard?
Thanks
uma

1 Like
2

We develop using Chrome and Firefox so they get the most attention. There are many Safari users also. We do occasionally get issues with IE11 - but don't regularly test with that.

What is the context ? Do you have an issue with a specific browser ? or just asking generally ?

4

Hi Dave
I am having problems with IE 11- I get an error saying TypeError: Object doesn't support property or method 'startsWith'. I understand that startsWith was added to string in ES6 which IE does not support. What is puzzling is that I can find no usage of this method in my template code or in node-red-dashboard. Any thoughts? Unfortunately my company forbids posting code- so that is a bit limiting.
Thanks
Uma

5

Most odd. I can certainly add a polyfill to try to see if that fixes it for you, though if it's not that then I'm sure then there will be something else ES6 that with trip up IE11 - but yes I can't see it in any of the main dashboard code. Any chance you can use/try the Edge browser ?

I've pushed a version to master on github for you to try. Install into your Node-RED user directory as

 npm i node-red/node-red-dashboard
6

IE11 certainly does not support startsWith or endsWith as I recently found out when developing uibuilder :frowning:

Not really surprising given its age. However, I simply added a polyfill for endsWith which is what I needed. I took that from the MDN site.

7

Thanks Dave- will try it out and let you know. In case this helps, the IE 11 debugger pauses at this error:

/* Start Code */

/**

  • Expose Backoff.
    */

module.exports = Backoff;

/**

  • Initialize backoff timer with opts.
    • min initial timeout in milliseconds [100]
    • max max timeout [10000]
    • jitter [0]
    • factor [2]
  • @param {Object} opts
  • @api public
    */

function Backoff(opts) {
opts = opts || {};
this.ms = opts.min || 100;
this.max = opts.max || 10000;
this.factor = opts.factor || 2;
this.jitter = opts.jitter > 0 && opts.jitter <= 1 ? opts.jitter : 0;
this.attempts = 0;
}

/**

  • Return the backoff duration.
  • @return {Number}
  • @api public
    */

Backoff.prototype.duration = function(){
var ms = this.ms * Math.pow(this.factor, this.attempts++);
if (this.jitter) {
var rand = Math.random();
var deviation = Math.floor(rand * this.jitter * ms);
ms = (Math.floor(rand * 10) & 1) == 0 ? ms - deviation : ms + deviation;
}
return Math.min(ms, this.max) | 0;
};

/**

  • Reset the number of attempts.
  • @api public
    */

Backoff.prototype.reset = function(){
this.attempts = 0;
};

/**

  • Set the minimum duration
  • @api public
    */

Backoff.prototype.setMin = function(min){
this.ms = min;
};

/**

  • Set the maximum duration
  • @api public
    */

Backoff.prototype.setMax = function(max){
this.max = max;
};

/**

  • Set the jitter
  • @api public
    */

Backoff.prototype.setJitter = function(jitter){
this.jitter = jitter;
};

//////////////////
// WEBPACK FOOTER
// ./~/backo2/index.js
// module id = 40
// module chunks = 0

/* End Code */

8

sorry - what has this to do with the previous error ? Is this the next thing it trips up on after you have tried the polyfill ? What line does it say is in error ? This seems to be coming from the socket.io library.

9

Sorry I wasn't clear- this happens before the polyfill- will let you know shortly how the polyfill went.
Thanks Dave

10

The debugger pauses at line 83 in index.js- please see attached screen snippet.ie11%20debug%20error%20sans%20polyfill

11

Thanks Dave- your polyfill worked a treat- thanks again

12

It is kind of surprising how many people still use IE 11- the joys of supporting legacy browsers :slight_smile:

13

Yup. Windows 7 and corporate users.

14

Hi Dave,
I build a dashboard display with a Raspi 3 A+ and the newest Raspbian stretch. I started by using Chromium browser but it kept crashing 2-3 time a day so I moved to kweb. It works pretty good but it has a few glitches.For one all the label texts (ui_text, ui_gauge) are placed in the upper left corner. On the other hand the text is centered correctly in the chart node. If I just have a label in the text node, I can use <center>xx</center> to fix that but the "Label" and the "Value format" in a text node are always shown in two rows no matter what layout I select.
The thing that bothers me most is the Y value in a chart node. I want to show the battery voltage of a sensor. So I defined a min. value of 2.7 and a max. value of 4.5. When I open the dashboard in FF the values shown are 2.7, 3.15, 3.6, 4.05 and 4.5. In kweb it shows 2.7, 3.14999999999995, 3.59999999996 ...
I could live with the rest of the settings but this reduces the width of my chart by half. Any suggestions how I could work around this?
Is anybody else using kweb? The search in this forum did not show anything.