Should the returned error text be displayed, or just the generic one as above?

Let's return the text for the various errors and have the fallback generic one.

Do we want to do any logging of the returned errors?

Yes, seems useful

Image file is required.

@nayoub to upload

The scope of this ticket is only the UI side; logging is covered in T303545.

Possible errors returned by API: https://www.mediawiki.org/wiki/API:Parsing_wikitext#Possible_errors

SVG illustration for error state:

Change 772970 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Add nicer realtime preview error messages

https://gerrit.wikimedia.org/r/772970

@nayoub:

• The error message is constrained in its width. It looks like it's about 50ex, is that alright?
• I'm not sure of the standards around greyed-out buttons/icons, but generally OOUI has grey meaning 'disabled', and the grey colour in your mock above (#72777d) is the same as the disabled grey. (Actually, it's setting the opacity to 0.51, but results in that colour.) The above patch sets this same opacity.

Hi @Samwilson!

• Yes it's constrained in its width. The font is set to OOUI Smaller UI text on Figma (Helvetica Neue, 13px, 400, Regular) for a width of 268px.
• Yes you're right, let's set it to the OOUI default for a quiet button then: Base 10 (#202122). I'll update the visual reference here :)

Great! Sounds good. I've updated the patch.

Change 772970 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Add nicer realtime preview error messages

https://gerrit.wikimedia.org/r/772970

QA notes: updated Patch Demo at https://patchdemo.wmflabs.org/wikis/58d2936e38/wiki/Main_Page.

Testing error states is hard! If you have access to the server-side (you don't with Patch Demo), after you've loaded Realtime Preview, you can add a syntax error or something to ApiParse::__construct. On Patch Demo, the only way I was able to reproduce an error was to:

• Open up an editor and enable Realtime Preview
• Using my browser's developer tools, simulate a slow connection (tutorial)
• Add a ridiculous amount of text to the editor (try copying/pasting text a bunch of times)
• Turn off your internet connection
• Wait ~30 secs (I think?). Eventually you should see the timeout error.

I think I've only been able to make three errors:

• timeout (large/complex wikitext)
• turn off internet connection (I use https://add0n.com/work-offline.html this Firefox extension)
• make the API return some weird error (e.g. throw an exception, make some syntax error in PHP, etc.)

Another thing I've noticed (and this might be a different discussion) is that the Translate extension can give warnings on save but lets preview happen (e.g. nested <translate> tags prevent saving, but are rendered as plain text in the preview). It's a bit annoying that it can't explain what's wrong while previewing.

One way to test this might be to use an intercepting proxy (such as https://www.zaproxy.org/) to change the response from the API/server. @imaigwilo let me know if you need any help.

I saw this error with placeholder in the message in Beta. Is there something missing on Beta? @Samwilson

@imaigwilo:Good catch. And no, that's as expected (for now). That's the error that's displayed when the preview is taking too long, and will be fixed in T304568: Manual refresh message in case of slow connection.

ok thank you. @Samwilson