when printing errors to console, append a new line between errors and string type 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.

[vzaidman]

improving the code