October: Fix copying of ApplicationException popup messages

[ghost]

I think trying to create a piece of code in October is not as friendly as it could be. With the error messages being displayed using sweet alert vendor package. I can't copy the error message to do a web search to find the solution.

This got me thinking and wanted to open a github issue to try and make things a little bit better.

Solution 1

• Allow the error message to be copy and paste.

Solution 2

• Allow a button to be pressed that will search the internet for the displayed error message.

Example

Before:

After:

In the case of the 'Search on Google' button the link would be something like this:

<a class="btn btn-primary" href="https://www.google.com/search?q=array+to+string+conversion" rel="noopener noreferrer" target="_blank">Search on Google</a>

Then to make it a bit more customizable allow the user to select their own search link in the settings or config file. For example, someone may want to Search in Stackoverflow, or search in OctoberCMS website or a different search engine etc.

I leave it for people to make suggestions now.

[bennothommo]

@ayumihamasaki2019 I think it's a great idea, as long as it's only shown in debug mode.

[ghost]

@bennothommo Thanks, yah good point "only shown in debug mode" makes total sense. As it should be shown only to developers and not clients (just expanding your comment if anyone else reads this issue).

Just wondering if October uses a custom file to generate the error messages or it's coming straight out of the javascript vendor file which would be a major issue.

[Rike-cz]

Sorry, not for. Most of errors needs to use brain instead of Google, some of them means something different than error message says. But it's only my opinion.

[bennothommo]

@ayumihamasaki2019 The popup is part of the Storm UI library. It's this file in particular that controls nearly all the popups: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/popup.js

@Rike-cz I feel it's simply a shortcut to Google, and not necessarily something that is going to completely solve all issues, but it will help to encourage people to be a bit more proactive with errors and perhaps finding if other people have had the same issue.

[LukeTowers]

@bennothommo @ayumihamasaki2019 while I think that the "Search on Google" UX is clever and cute, I don't feel like we should be encouraging that behaviour for every error. I think the proper solution to this (which would also solve other related problems) is just to fix that popup so that users can copy and paste the message like they would with anything else.

[Samuell1]

More like this is like "Warning that something went wrong" developers should look in error log where they can copy and see more about that error.

[ghost]

@LukeTowers to expand on your comment:

My three main issues with the error message popup are as follows:

1. Can not copy and paste the error - have to go into the dom to copy it.

2. Add keyboard navigation to the error message popup - you can't close that modal using keyboard controls, you can only close it by mouse clicking. Haven't tested it with touch screen though.

3. Connection issues (e.g. Cloudflare Server Code) display a bunch of escaped HTML message, it would be nice if the HTML message was passed through something like HTMLPurifier and not show basic HTML escaped.

[drmzio]

Not a big fan of this. Maybe link to the log page instead? Also from a UX perspective, the blue button is competing with the OK button. Maybe make it a secondary button or just a link button with the arrow (↗️) that indicates an external link. Just my thoughts.

[LarryBarker]

Totally agree that copy and paste should be available in the popups. I think this issue may have been started because of the new Laravel 6 error page (Ignition), which implements all sorts of features to make it easier to find information on exceptions. @LukeTowers As October gets closer to upgrading to Laravel 6, do we know if we are going to support Ignition?

[LukeTowers]

@LarBearrr I'm certainly not opposed to it, haven't looked into adding it myself at all. If someone can get it working as a plugin I'm sure I would be willing to take the time to review it for merging.

[nizzac]

What's wrong with highting what you're wanting to copy and copying it as normal?

[LukeTowers]

@nizzac as I recall you can't actually do that on that popup for some reason. It's very annoying.

[bennothommo]

All, please feel free to test #4740 and let me know if this resolves the copy+paste issue for you.

[bennothommo]

Fixed by #4740.