feat: add ErrorBox showing full error details

[timdeschryver]

When there's an error while running a query, the error isn't visible as the text will be "undefined".
Because of this, the error will never be shown at:

<div className="output">
  <span className="text-blue-600">&gt; </span>
  {parsed.text || parsed.error || 'undefined'}
</div>

Before

After

[timdeschryver]

While taking the screenshot, I also saw the preview with "That is great, ship it!"
As this is not that great 😅 - I also changed that.

WDYT about the message, should it say something else?
We could later on add suggestions to resolve errors.

[smeijer]

Thanks! This is awesome.

About the error, let's merge this fix. But at the same time, I think we should create an issue with a feature request. It should be possible to navigate over multiple results. But first things first, fix the bug 😇

Regarding the message, I do feel that showing the exact same error twice (under and next to the js code) is a bit weird.

If you take a look here:

https://github.com/smeijer/testing-playground/blob/e7634daec7b13c4942110341bea6548fdf5ca336/src/parser.js#L112-L113

You can see that we have both an error and an errorBody property. I think it would make sense to show the error + errorBody on the right when an error occurs? Only the error below, and both right next to it?

Hide the element info, and only show a big red error box on the right side with all the details?

What do you think?

[timdeschryver]

I agree, I also found it weird looking - thanks for the suggestion!
If I understood it correctly, this is what you mean?

Also, if there's a better way to hide the element info feel free to ask for changes (or refactor it yourself if that's easier) as I'm not a React developer by day 😅

[smeijer]

I haven't looked at the code yet, I'll do that tomorrow 😇

Regarding layout, that's exactly what I meant.

It can benefit from className="whitespace-pre-wrap", and the "divider" should be removed. (You also might need to merge in master, to get the errorBody as a string instead of an array)

[smeijer]

I hope you don't mind. I've merged in master, and extracted the error handling to a dedicated ErrorBox component. I believe we can merge this thing 😎

What do you think?

left production, right this PR

[timdeschryver]

@smeijer LGTM - the UI and the code are better than before 👍

[smeijer]

Thanks for your work on this one @timdeschryver!

Now let's test this thing:

@all-contributors please add @timdeschryver for code

[allcontributors]

@smeijer

I've put up a pull request to add @timdeschryver! 🎉