[APM] Mobile crashes & errors

[bryce-b]

Summary

This PR adds back the Errors tab to mobile apm services under the title Errors & Crashes. This new page is split into too sections: errors, and crashes.

Error Tab:

Crashes Tab:

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[yngrdyn]

I was checking you PR.
What I would do is:

x-pack/plugins/apm/public/components/app/mobile/error_group_overview/tabs/tabs.tsx

1. would receive an input, this input would be the selected tabId.
2. conditionally this component will render errors or crashes depending on the selected tabId.

x-pack/plugins/apm/public/components/routing/mobile_service_detail/index.tsx

1. Modify the params of the route '/mobile-services/{serviceName}/errors' to include our new param tabId (I'd recommend to use a more clear name for example mobileSelectedTab is the one being used already for other screens in mobile)

x-pack/plugins/apm/public/components/app/mobile/error_group_overview/index.tsx

1. would use useApmParams to get what we have in the url, for this particular case we are interested in tabId
2. would pass the selectedTab (in this case tabId) to Tabs component

Then you wouldn't need to keep the state in Tabs component converting it in sort of a pure visual component

[cla-checker-service]

💚 CLA has been signed

[elasticmachine]

Pinging @elastic/apm-ui (Team:APM)

[kpatticha]

I've noticed some code duplication between errors and crashes. We need to remove the unnecessary components

[bryce-b]

Checks is failing, but I get a "not found" when trying to view the details...

[kpatticha]

Checks is failing, but I get a "not found" when trying to view the details...

it's due to translations, you can fix it by running
node scripts/i18n_check.js --fix

[kpatticha]

I've identified two potential blockers that need to be addressed before merging, as well as a few UI enhancements that can be tackled separately.

1. Crash details page is not accessible due to the params, it's an easy fix
2. The filters don't persist between the overview and the details page.

Screen.Recording.2023-11-30.at.11.36.49.mov

I strongly recommend addressing the UI enhancements separately to avoid expanding the scope of the pull request.

1. Changing the filters some of the charts are not displaying any loaders
2. Most affected chart has no empty state so it looks like broken where there are no data. That was even before not related to this PR :D
3. Layout of the crash/error details page is not consistent with the overview in terms of spaces and size of the panels

[kpatticha]

The "Crash type" link is broken when clicked; it needs to align with the errors table. (I think clicking on the type is updates the kuery)

Screen.Recording.2023-12-01.at.15.44.53.mov

Note

It seems inconsistent that we show the error rate for the error tab while displaying crash occurrences (in line graph vs bars) for the crashes tab, even though both tables present the occurrences in the last column. We could discuss and improve in a follow up

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 1672026
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
apm	1530	1546	+16

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/apm-synthtrace-client	184	188	+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
apm	3.7MB	3.7MB	+26.0KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
apm	120	127	+7

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
apm	36.7KB	36.7KB	+49.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/apm-synthtrace-client	184	188	+4

ESLint disabled line counts

id	before	after	diff
apm	75	77	+2

Total ESLint disabled count

id	before	after	diff
apm	89	91	+2

History

• 💚 Build #180736 succeeded 3e46d7f
• 💔 Build #180654 failed 14b283b
• 💔 Build #180592 failed 2b4e77b
• 💔 Build #180303 failed e860014
• 💔 Build #180291 failed d781939
• 💔 Build #180200 failed 6a84479

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream