fixed missing new line before string error causes

[vzaidman]

Fixing Error Causes of String Type Printed To Console Without New Line

The bug is caused by error type being a "span" to which a "text" "cause" is appended, without appending a new line beforehand.

That "span" actually creates a new line if the last span within it contains more than one element.

To solve it, I wrap all "causes" with divs.

Test plan

For the code:

// cause is "string"
console.error(new Error('aaa', {cause: 'bbb'}));

// cause is "error" which cause is "string"
console.error(new Error('ccc', {
    cause: new Error('ddd', {cause: 'eee'})
}));

// cause is "error" which cause also "error" which cause is "string"
console.error(new Error('fff', {
    cause: new Error('ggg', {
        cause: new Error('hhh', {
          cause: 'iii'
        })
    })
}));

Before:

Notice the cause in the second line in the first error is appended directly to the stack trace:

at global (:1:24)Caused by: bbb

After:

Also tested more complicated use cases with ignored frames and such.

• This change maintains backwards compatibility with previous Local Storage data (if modifying settings, experiments, or other persisted client state).

Upstreaming plan

• This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
• This commit is React Native-specific and cannot be upstreamed.

[hoxyq]

Please add a test that covers this logic.

There are screenshot tests also, but the last time I checked, screenshots are downloaded from some Google's CDN, which requires authorization, so we probably can't add more :(

[vzaidman]

I don't see a neat way to test this very UI centric feature. I'd suggest upstreaming it as is.

[vzaidman]

Upstreamed as https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6718313