Chart not shown , getting NS_ERROR_FAILURE: in Firefox v59.0

[h470734]

Description

Chart is not shown, getting NS_ERROR_FAILURE with Firefox browser.

Same internal example app works with Chrome. Using standalone Billboard.js not minimized. D3JS version 5 locally

I have checked that this bug is visible in version 1.4, 1.3. Earlier versions like 1.2 are working.

Error Stack in FF console:

getSizeFor1Char/< https://localhost:5000/static/javascripts/billboard_1.3.0.js:1568:14 call https://localhost:5000/static/javascripts/d3_v5.min.js:2:105091 getSizeFor1Char https://localhost:5000/static/javascripts/billboard_1.3.0.js:1567:26 axis/< https://localhost:5000/static/javascripts/billboard_1.3.0.js:1505:23 each https://localhost:5000/static/javascripts/d3_v5.min.js:2:105567 axis https://localhost:5000/static/javascripts/billboard_1.3.0.js:1420:3 call https://localhost:5000/static/javascripts/d3_v5.min.js:2:105091 updateDimension https://localhost:5000/static/javascripts/billboard_1.3.0.js:747:106 initWithData https://localhost:5000/static/javascripts/billboard_1.3.0.js:497:523 init https://localhost:5000/static/javascripts/billboard_1.3.0.js:440:370 Chart https://localhost:5000/static/javascripts/billboard_1.3.0.js:1001:69 generate https://localhost:5000/static/javascripts/billboard_1.3.0.js:1694:14

[netil]

Hi @h470734, thanks for the report.

I checked all the examples roughly on Mac with Firefox 60, but it seems working fine. Anyway, I'll check for that.

[h470734]

Hi netil, I did simplify my code.

            var chart = bb.generate({
                bindto: "#chart",
                data: {
                    columns: [ ["data1"] ]
                },
                type: "line"
            });

            let rowsData = [ 'data1' , 0,2,3,56,7,32 ]

            chart.load( { columns: [rowsData] }  );

Even this piece of code gives NS_ERROR_FAILURE, but works fine in Chromium and strangely also works with codepen in Firefox.

The error comes at bb.generate(), the rest of the code does not even executed..

https://codepen.io/anon/pen/zjPvwB?editors=1111

How can this be true?

[netil]

I tested with different Firefox versions(see the list below) with the given example above, but none of these caused same error you mentioned.

Loaded files

<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js@1.4.1/dist/billboard.js"></script>

Tested versions

Windows 7

• 59.0.3

MacOS

• 54.0.1
• 57.0.4
• 59.0.2

[whossname]

I am getting a similar error. I am using Vue, not sure if that is relevant. I think this was working yesterday, and reversing recent commits hasn't fixed the issue. It is working for a different project.

Firefox version: 59.0.2 (64-bit), Firefox for Ubuntu canonical-1.0

Exception columnNumber: 0 data: null filename: "webpack-internal:///./node_modules/billboard.js/dist/billboard.js" lineNumber: 1680 message: "" name: "NS_ERROR_FAILURE" result: 2147500037 stack: "getSizeFor1Char/<@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1680:14\nwebpack_exports__.a@webpack-internal:///./node_modules/d3-selection/src/selection/call.js:4:3\ngetSizeFor1Char@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1679:26\naxis/<@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1619:23\nwebpack_exports.a@webpack-internal:///./node_modules/d3-selection/src/selection/each.js:5:28\naxis@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1534:3\nwebpack_exports__.a@webpack-internal:///./node_modules/d3-selection/src/selection/call.js:4:3\nupdateDimension@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:624:106\ninitWithData@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:374:523\ninit@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:317:370\nChart@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:234:69\ngenerate@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:156:14\nupdateChart@webpack-internal:///./src/components/pages/live_status/chart.js:225:3\nfetchData/<@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"/home/buz/source/work/haultrax/hx-ui/fleetops-ui/node_modules/.cache/cache-loader\"}!./node_modules/babel-loader/lib/index.js?{\"presets\":[\"/home/buz/.config/yarn/global/node_modules/@vue/babel-preset-app/index.js\"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/live_status/LiveStatus.vue:66:21\n"

[whossname]

This bug doesn't seem to exist when using the billboard-charts polymer wrapper package. This package uses billboard.js ^1.2.0

[netil]

Just with the NS_ERROR_FAILURE can't figure out the meaning of the error.

NS_ERROR_FAILURE (0x80004005) This is the most general of all the errors and occurs for all errors for which a more specific error code does not apply.

• https://developer.mozilla.org/en-US/docs/Mozilla/Errors

I think the internal getSizeFor1Char modification is causing the error.

• https://github.com/naver/billboard.js/commit/8dc08bd4021c23935d064ce535252d8d6e5b8072#diff-83bceaafea39df1d68417facd9d00f24

I can't reproduce the issue on my work env, but I'll try to fix this. Thanks @whossname for your comments.

[netil]

@h470734, @whossname I couldn't exactly reproduce the issue and checked, but I found suspicious calls causing the possible error. I already updated and merged to master.

If you don't mind, could you make a test with the latest build?

• https://github.com/naver/billboard.js/tree/nightly/dist

[whossname]

This did the trick for me. Thanks @netil

[s4njee]

I'm getting similar errors with Firefox, but not chrome using react. Also using the latest master from git.

getSizeFor1Char/< billboard.js:1680 ./node_modules/react-billboardjs/node_modules/d3-selection/src/selection/call.js/__webpack_exports__.a call.js:4 getSizeFor1Char billboard.js:1679 axis/< billboard.js:1619 ./node_modules/react-billboardjs/node_modules/d3-selection/src/selection/each.js/__webpack_exports__.a each.js:5 axis billboard.js:1534 ./node_modules/react-billboardjs/node_modules/d3-selection/src/selection/call.js/__webpack_exports__.a call.js:4 redraw billboard.js:1031 redraw billboard.js:495 load billboard.js:5552 loadFromArgs billboard.js:5564 load billboard.js:10367 load self-hosted:975:17 loadData BillboardChart.js:176 createMethod/< index.js:67 updateChart BillboardChart.js:229 createMethod/< index.js:67 componentWillUpdate BillboardChart.js:70 createMethod/< index.js:67 updateClassInstance react-dom.development.js:7216 updateClassComponent react-dom.development.js:8345 beginWork react-dom.development.js:8982 performUnitOfWork react-dom.development.js:11814 workLoop react-dom.development.js:11843 callCallback react-dom.development.js:100 invokeGuardedCallbackDev react-dom.development.js:138 invokeGuardedCallback react-dom.development.js:187 replayUnitOfWork react-dom.development.js:11318 renderRoot react-dom.development.js:11885 performWorkOnRoot react-dom.development.js:12449 performWork react-dom.development.js:12370 performSyncWork react-dom.development.js:12347 interactiveUpdates react-dom.development.js:12597 interactiveUpdates react-dom.development.js:1958 dispatchInteractiveEvent react-dom.development.js:4259 dispatchInteractiveEvent self-hosted:1019:17

[whossname]

Do you get this issue if you use the nightly dist instead like we were discussing above? The package.json for billboard should be

    "billboard.js": "git://github.com/naver/billboard.js.git#nightly"

[s4njee]

Oh wow, it works perfectly.

I checked the merged commit and compared the source and it looked like the changes were already in master.

Thanks.

[porfirioribeiro]

I am having the same issue with version 1.5.1

NS_ERROR_FAILURE: billboard.js:1801
getSizeFor1Char/<
billboard.js:1801
../../node_modules/d3-selection/src/selection/call.js/__webpack_exports__.a
call.js:4
getSizeFor1Char
billboard.js:1800
axis/<
billboard.js:1662
../../node_modules/d3-selection/src/selection/each.js/__webpack_exports__.a
each.js:5
axis
billboard.js:1591
../../node_modules/d3-selection/src/selection/call.js/__webpack_exports__.a
call.js:4
updateDimension
billboard.js:657
initWithData
billboard.js:384
init
billboard.js:332
Chart
billboard.js:249
generate
billboard.js:171
genBillboardFromProps
Chart.js:17
wrappedMethod
react-hot-loader.development.js:568
componentDidMount
Chart.js:45
wrappedMethod
react-hot-loader.development.js:558
commitLifeCycles
react-dom.development.js:9784
commitAllLifeCycles
react-dom.development.js:11455
callCallback
react-dom.development.js:100
invokeGuardedCallbackDev
react-dom.development.js:138
invokeGuardedCallback
react-dom.development.js:187
commitRoot
react-dom.development.js:11594
completeRoot
react-dom.development.js:12502
performWorkOnRoot
react-dom.development.js:12452
performWork
react-dom.development.js:12370
performSyncWork
react-dom.development.js:12347
requestWork
react-dom.development.js:12247
scheduleWorkImpl
react-dom.development.js:12122
scheduleWork
react-dom.development.js:12082
enqueueSetState
react-dom.development.js:6644
../../node_modules/react/cjs/react.development.js/Component.prototype.setState
react.development.js:238
PredictionPage/_this.onTabChange/<
index.js:58
run
es6.promise.js:75
notify/<
es6.promise.js:92
flush
_microtask.js:18

[porfirioribeiro]

My mistake sorry, i was trying to hide first tick values doing:

  .bb-axis-y .tick:first-of-type,
  .bb-axis-y2 .tick:first-of-type {
    display: none !important;
  }

Replaced it with:

  .bb-axis-y .tick:first-of-type,
  .bb-axis-y2 .tick:first-of-type {
    visibility: hidden !important;
  }

And now it's not giving error, seems like firefox does not like to have getBBox called on a element with display: none

[netil]

Hi @porfirioribeiro, I'll get into that. Thanks for the info!

[whossname]

I'm seeing this again, running billboard 1.5.1

It is only for one specific graph (a new one I am working on) and it only occurs on the first render, only in Firefox. If I render again after changing to another page and back again, it works again for some reason.

Exception
​
columnNumber: 0
​
data: null
​
filename: "webpack-internal:///./node_modules/billboard.js/dist/billboard.js"
​
lineNumber: 1801
​
message: ""
​
name: "NS_ERROR_FAILURE"
​
result: 2147500037
​
stack: "getSizeFor1Char/<@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1801:13\n__webpack_exports__.a@webpack-internal:///./node_modules/d3-selection/src/selection/call.js:4:3\ngetSizeFor1Char@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1800:25\naxis/<@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1662:47\n__webpack_exports__.a@webpack-internal:///./node_modules/d3-selection/src/selection/each.js:5:28\naxis@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:1591:3\n__webpack_exports__.a@webpack-internal:///./node_modules/d3-selection/src/selection/call.js:4:3\nupdateDimension@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:657:106\ninitWithData@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:384:702\ninit@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:332:370\nChart@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:249:69\ngenerate@webpack-internal:///./node_modules/billboard.js/dist/billboard.js:171:14\nupdateChart@webpack-internal:///./src/components/pages/queue_profile/truckCountChart.js:167:11\ndisplayChart@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"/home/tyson/source/work/haultrax/hx-ui/fleetops-ui/node_modules/.cache/cache-loader\"}!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/queue_profile/TruckCountChart.vue:105:9\nget@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3137:13\nevaluate@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3244:16\ncomputedGetter@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3502:9\nget@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1915:7\nrender@webpack-internal:///./node_modules/vue-loader/lib/template-compiler/index.js?{\"id\":\"data-v-c64a24a2\",\"hasScoped\":false,\"optionsId\":\"0\",\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/pages/queue_profile/TruckCountChart.vue:60:48\nrenderMixin/Vue.prototype._render@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4539:15\nupdateComponent@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2783:18\nget@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3137:13\nrun@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3214:17\nflushSchedulerQueue@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2976:5\nnextTick/<@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1832:9\nflushCallbacks@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1753:5\n"
​
<prototype>: ExceptionPrototype { toString: toString(), name: Getter, message: Getter, … }