Copied from notes in https://gerrit.wikimedia.org/r/c/wikimedia/toolhub/+/642553.

I just noticed that the scheme (http/https) is optional in this regex. The regex will actually accept "1.2.3.4" or "foo.domain" as valid urls. These will however be rejected by the backend code where the scheme is not optional. When this validation mismatch happens, the API returns an HTTP 400 error response that looks like:

{
  "code": "1000",
  "message": "Validation Failed",
  "errors": [
    {
      "code": "2012",
      "field": "url",
      "message": "Enter a valid URL."
    }
  ]
}

The Vue client then displays a generic "Uh oh! Something went wrong. Error: Bad Request" message to the user.

The API has a uniform error response after T267432: Improve error responses from API endpoints was completed. Error responses should have a json payload following the general form of the example given above.

Adding notes from a duplicate task T280099 below:

In some places we are fetching errors like this:

const explanation = ( 'statusCode' in failure ) ? failure.response.statusText : failure;
this._vm.$notify.error( i18n.t( 'apierror', [ explanation ] ) );

in other places as stated below:

const data = getFailurePayload( failure );
for ( const err in data.errors )    {
        this._vm.$notify.error(
            i18n.t( 'apierrors', [
                data.errors[ err ].field,
                data.errors[ err ].message
            ] )
     );
}

And, we have a bunch of translation strings that the notify plugin uses:

• "apierror": "Oops! An error occurred: $1",
• "apierrors": "Oops! An error occured in $1: $2",
• "auditlogs-apierror": "Error fetching page $1: $2",
• "developersettings-appupdateerror": "An error occurred while updating the app with client id '$1'",
• "editformerror": "Oops! '$1' error occured in '$2': $3"

Ideally:

• There is one consistent way to fetch errors, perhaps using the getFailurePayload method.
• The display logic around showing errors in .js files moved to a central location to avoid code duplication.
• There is one translation string (atleast for errors) that we stick to.