Skip to content

fix: 🎨 Improve readability of long error messages in ErrorBoundary dialog#84

Open
wapec wants to merge 1 commit into
Euro-Office:mainfrom
wapec:feat/mobile-error-boundary
Open

fix: 🎨 Improve readability of long error messages in ErrorBoundary dialog#84
wapec wants to merge 1 commit into
Euro-Office:mainfrom
wapec:feat/mobile-error-boundary

Conversation

@wapec

@wapec wapec commented Jun 10, 2026

Copy link
Copy Markdown
Contributor
  • white-space: pre-wrap for stack-trace newlines and indentation
  • -webkit-line-clamp increase from 7 to 12 for more context per dialog
  • drop redundant max-height

How to trigger the dialog

Open any mobile editor, then in the editor iframe's DevTools console:

(() => {
    const app = document.getElementById('app');
    const reactKey = Object.keys(app).find(k => k.startsWith('__reactContainer'));
    const find = f => {
        if (!f) return null;
        const n = f.stateNode, t = f.type;
        if (n && typeof n.componentDidCatch === 'function' && typeof t?.getDerivedStateFromError === 'function') return n;
        return find(f.child) || find(f.sibling);
    };
    const eb = find(app[reactKey].stateNode.current);
    eb.componentDidCatch(new Error(
        "ReferenceError: someVariable is not defined\n" +
        "    at Object.handleClick (app.js:12345:67)\n" +
        "    at HTMLButtonElement.onClick (Component.jsx:42:18)\n" +
        "    at executeDispatch (react-dom.production.min.js:5481:9)\n" +
        "    at processDispatchQueue (react-dom.production.min.js:5512:9)"
    ));
})();

Before / after — last line clipping

Before (max-height: 120px, clamp 7) After (no max-height, clamp 12, pre-wrap)
before after

Test checklist

  • Stack-trace lines render on separate rows with indentation
  • Last visible line is fully shown or replaced by , not half-clipped
  • Short texts are shown in the same way as before

- white-space: pre-wrap for stack-trace newlines and indentation
- -webkit-line-clamp increase from 7 to 12 for more context per dialog
- drop redundant max-height

Signed-off-by: Bohdan Baranov <wapec@icloud.com>
@wapec wapec marked this pull request as ready for review June 11, 2026 04:55

@moodyjmz moodyjmz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two small follow-up items from the review:

color: @text-error;
text-align: left;
overflow-wrap: break-word;
white-space: pre-wrap;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A very long unbroken token (e.g. a minified URL in a stack frame) won't wrap at a word boundary with overflow-wrap: break-word alone — it only breaks at word boundaries. Adding word-break: break-all ensures any run of non-space characters is also wrapped.

Suggested change
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-all;

text-overflow: ellipsis;
max-height: 120px;
}
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule is shared by all four mobile editors (documenteditor, spreadsheeteditor, presentationeditor, visioeditor). Worth ticking the checklist against each one before merging, not just the one used for the test script above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants