Skip to content

[APM] Surface http errors to users - #42160

Merged
sorenlouv merged 4 commits into
elastic:masterfrom
sorenlouv:display-fetch-errors
Jul 31, 2019
Merged

sorenlouv merged 4 commits into
elastic:masterfrom
sorenlouv:display-fetch-errors

Conversation

@sorenlouv

@sorenlouv sorenlouv commented Jul 29, 2019 •

Copy link
Copy Markdown
Contributor

Closes #40986

For components that don't handle errors explicitly a generic toast error will be displayed
Screen Shot 2019-07-29 at 17 33 03

The only component that handle errors explicitly is the service overview (this being the first page the users see, it's probably a bit more important)
Screen Shot 2019-07-29 at 16 27 20

@sorenlouv
sorenlouv requested a review from a team July 29, 2019 15:44
@elasticmachine

Copy link
Copy Markdown
Contributor

💔 Build Failed

@elasticmachine

Copy link
Copy Markdown
Contributor

Pinging @elastic/apm-ui

@elasticmachine

Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine

Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@sorenlouv
sorenlouv requested review from dgieselaar and ogupte July 30, 2019 15:02

@dgieselaar dgieselaar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM, just a few nits.

<NoServicesMessage isLoading={false} historicalDataFound={false} />
);
expect(wrapper).toMatchSnapshot();
Object.values(FETCH_STATUS).forEach(status => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

are these useful tests? I guess they don't hurt either, but it feels like it's just generating code paths and then generating snapshots of all the different code paths. The component itself seems to be simple (and will likely stay that way) to warrant snapshot tests.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I felt it was an okay-ish way to test the different code paths since the generated snapshots were rather small (I agree that changes in big snapshots are often overlooked). What do you suggest instead?

title: i18n.translate('xpack.apm.fetcher.error.title', {
defaultMessage: `Error while fetching resource`
}),
text: `${idx(err.res, r => r.status)}: ${idx(err.res, r => r.url)}`

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I feel like this could be a bit more user friendly. Maybe a little markup? Do we need the status code? Is there any property from the error (response) we can display instead? (e.g., often errors have a message property that we can surface).

@sorenlouv sorenlouv Jul 31, 2019 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

There is also the error.statusText which we can use instead of status. So instead of 404 it would show Not Found. It is not always as distinguishable as a status code (I'm thinking if the user takes a screenshot and opens a support ticket) but I'm okay with changing it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Full list of status codes and status texts: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Looks like the texts are unique so might be as good as a status code for us.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Added some markup and the statusText. Looks a whole bit nicer now :)

Screen Shot 2019-07-31 at 11 59 39

@elasticmachine

Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@sorenlouv
sorenlouv merged commit fc5b0fb into elastic:master Jul 31, 2019
@sorenlouv
sorenlouv deleted the display-fetch-errors branch July 31, 2019 11:17
sorenlouv added a commit that referenced this pull request Jul 31, 2019
* [APM] Surface http errors to users

* Fix tests

* Add markup to error message

* Remove transaction type from ui filters
sorenlouv added a commit that referenced this pull request Aug 7, 2019
* [APM] Surface http errors to users

* Fix tests

* Add markup to error message

* Remove transaction type from ui filters
sorenlouv added a commit that referenced this pull request Aug 8, 2019
* [APM] Surface http errors to users

* Fix tests

* Add markup to error message

* Remove transaction type from ui filters
@dgieselaar

dgieselaar commented Sep 10, 2019 •

Copy link
Copy Markdown
Contributor

The mechanism works, but seems like something else was changed and the content is now less than useful:

image

Created a bug: #45263

patrykkopycinski pushed a commit to patrykkopycinski/kibana that referenced this pull request May 6, 2026
* [APM] Surface http errors to users

* Fix tests

* Add markup to error message

* Remove transaction type from ui filters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[APM] Display errors to user instead of swallowing them

3 participants