Adding lane crashes IE/Edge

[philippfromme]

Adding a lane can result in either an empty canvas or IE/Edge crashing.

Forum: https://forum.bpmn.io/t/microsoft-edge-ie11-crahes-when-adding-a-lane/1968

---

Related to SUPPORT-5815

[nikku]

Probably related to this forum report.

[gustavjf]

I just had a look at this and wasn't able to reproduce on IE11 or Edge 17. I can reproduce on IE11 but not on Edge 17. See attached gifs below.

As a sidenote, I noticed opening demo.bpmn.io on IE11 leads to a blank canvas. The console shows a syntax error related to unsupported class syntax usage in bpmn-js-signavio-compat.

On Edge using the provided diagram example in the forum post, I can add lanes above and below without experiencing a crash and without the canvas being empty.

Lane above:

Lane below:

Not shown in the gifs, but I tried convulsively adding lanes above and below - no crash or empty canvas.

I can look into the IE11 case.

[nikku]

As a sidenote, I noticed opening demo.bpmn.io on IE11 leads to a blank canvas. The console shows a syntax error related to unsupported class syntax usage in bpmn-js-signavio-compat.

This is about to be fixed in the update demo.

I just had a look at this and wasn't able to reproduce on IE11 or Edge 17. I can reproduce on IE11 but not on Edge 17.

I cannot reproduce any of the issues on IE11. I tried:

• Example diagram, opening, adding lane above / below
• Creating empty participant with (or without) lanes; updating lane / participant labels

Which one exactly can you still reproduce?

[gustavjf]

I can reproduce both locally using the modeler example in bpmn-js-examples.

I tried to do so on demo.bpmn.io after the syntax error fix you mentioned went live, but it doesn't happen there.

One thing, sometimes I couldn't reproduce either bug depending on the amount of open tabs I had with the modeler example running. I don't know why. If you aren't able to reproduce, make sure you have a single tab open in IE11 with the modeler example running and then follow the steps below. Reproduction is consistent for me this way. My mistake, turns out reproduction is sometimes inconsistent when following the steps below. Thankfully, I can reproduce both cases about 90% of the time but other times there is no error thrown when adding a lane or changing the participant name.

For the first case (Example diagram, opening, adding lane above / below):

1. Run modeler example in bpmn-js-examples.
2. Drag Titel.bpmn diagram file to viewport.
3. Once diagram has rendered, click on a lane.
4. Add lane below/above.
5. Observe participant element and its children disappear from canvas.

The stack trace is as reported in the forum post you linked above.

Note I was using 'eval-source-map' for webpack devtool so line numbers are different but it's the same stack:

unhandled error in event listener
Error: unspecified error.
  at prependTo (eval code:220:3)
  at Anonymous function (eval code:152:7)
  at forEach (eval code:202:7)
  at Anonymous function (eval code:149:5)
  at forEach (eval code:202:7)
  at GraphicsFactory.prototype.updateContainments (eval code:139:3)
  at Anonymous function (eval code:51:5)
  at invokeFunction (eval code:506:3)
  at EventBus.prototype._invokeListener (eval code:359:5)
  at EventBus.prototype._invokeListeners (eval code:345:5)
SCRIPT16389: Unspecified error.
EventBus.js (379,1)

For the second case (editing the participant name in a newly created diagram), I simplified the steps from the forum post a bit:

1. Run modeler example in bpmn-js-examples.
2. Create a new diagram.
3. Create a participant.
4. Create a task inside the participant.
5. Edit the task name with a single character. (I used s). Press enter.
6. Double click the participant name area on the left-hand side.
7. Enter any character then press enter. (I used s).
8. Observe the participant element disappears along with its children, but the editable participant name area is still there.

Here, the stack trace is the same as that of the first case.

On further interaction, more errors are logged to the console (Unable to get property 'childNodes' of undefined or null reference).

Do any of these steps work for you?

[gustavjf]

I forgot to mention, I didn't see the chinese characters while trying to reproduce these bugs locally but I do see them briefly when refreshing IE11 on https://demo.bpmn.io/new.

[gustavjf]

I spent some more time on this but wasn't able to figure out the cause of the error. Here's what I managed to find:

The stack trace points to a call to Node.insertBefore() here.

The bug is intermittent. Sometimes the repro steps work, sometimes they don't. Maybe an async issue?

The unspecified error's code is 16389. While searching for that, I noticed it seems to be a generic error that IE throws whenever it encounters some JS code it doesn't like.

That same error is thrown when I attempt to call getBoundingClientRect() on an element which is not yet present in the DOM:

try {
  var element = document.createElement('div');
  element.getBoundingClientRect();
} catch (e) {
  console.log(e.number & 0xFFFF) // 16389
}
// https:///developer.mozilla.org/en-US/docs/Web/JavaScript/Microsoft_Extensions/Error.number#Example

So then I thought perhaps it's because one of the elements passed as arguments to insertBefore() was not yet present in the DOM?

// Before error is thrown, paused execution before call to parentNode.insertBefore(...)
document.body.contains(newNode) // true, which is odd considering insertBefore hasn't yet been called
document.body.contains(parentNode) // true, makes sense
document.body.contains(parentNode.firstChild) // true, makes sense

That doesn't seem to be the problem.

// After error is thrown, paused execution after call to parentNode.insertBefore(...)
document.body.contains(newNode) // false
document.body.contains(parentNode) // true
document.body.contains(parentNode.firstChild) // false

My searches for insertBefore and unspecified error 16389 didn't give me much to go on.

Maybe what I've found is of some use and I've overlooked something.

FWIW, Here's a gif of the error following the repro steps of the second case:

[nikku]

The stack trace points to a call to Node.insertBefore() here.

This may be related to the fact that we don't explicitly pass null for non-existing reference nodes, as we should.

[gustavjf]

Right, that was another suspicion of mine but IE11 just inserts the newNode to the end of the child list if the second parameter isn't passed, just as if null were passed. There is no error thrown, compared to Chrome or FF.

Here's a jsbin snippet demonstrating that.

[nikku]

Forget my previous comment; I reverted it as Node#firstChild is null, if not given, cross browser.

😢

[nikku]

Good news is that I can reliably reproduce the issue you describe in your previous comment on my IE 11 (inside a VM)!

[gustavjf]

Wonderful! Glad to hear it.

[nikku]

We applied a MS IE / Edge fix just recently that may circumvent this issue.

[gustavjf]

Thanks for the tip - I just reinstalled the modeler example's dependencies with bpmn-js at 3.2.1 but unfortunately I can still reproduce the issue in IE11 when changing the participant label.

[nikku]

Did you update diagram-js, too?

[gustavjf]

I did, yes. It's at 3.1.3.

[philippfromme]

It's very likely that this is an issue with the second parameter of #insertBefore being undefined.

As MDN states:

referenceNode is not an optional parameter -- you must explicitly pass a Node or null. Failing to provide it or passing invalid values may behave differently in different browser versions.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

[nikku]

Which second parameter do you refer to? Which usage of #insertBefore?

[philippfromme]

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

I'm referring to referenceNode. insertBefore is used in https://github.com/bpmn-io/diagram-js/blob/master/lib/core/GraphicsFactory.js#L237.

[nikku]

Closed via 202eff5

[nikku]

Released as v4.0.1.