Use RUM label for fatal react errors #218846
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
maryam-saeidi
added
release_note:skip
maryam-saeidi
added
ci:cloud-deploy
Contributor
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
Contributor
|
Project deployed, see credentials at: https://buildkite.com/elastic/kibana-deploy-project-from-pr/builds/425 |
Contributor
|
Cloud deployment initiated, see credentials at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/162 |
maryam-saeidi
removed
ci:cloud-deploy
Contributor
💚 Build Succeeded
Metrics [docs]Page load bundle
History
|
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
Closes elastic/observability-dev#4463 ## Summary Since we now have support for error labels in RUM ([PR](elastic/apm-agent-rum-js#1594)), this PR changes the way that we report rum errors to use labels similar to what we've done for toast errors ([PR](elastic#217948)). https://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad ###⚠️ Note In local development, the error is captured twice because react bubbles up the error, but it does not happen in production: ([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats)) > Production and development builds of React slightly differ in the way componentDidCatch handles errors. In development, the errors will bubble up to window, which means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch. ### 🧪 How to test Add the following to your kibana.yml file: ``` elastic.apm.active: true elastic.apm.transactionSampleRate: 1.0 elastic.apm.environment: yourName <-- Change to your name ``` <details> <summary>Throw a fatal react error</summary> Throw an error in the [alerts page](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx) and visit http://localhost:5601/kibana/app/observability/alerts </details> Then visit [kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load) filtered for `yourName` in the environment.
maryam-saeidi
added
v8.19.0
backport:version
Contributor
|
Starting backport for target branches: 8.19 |
Contributor
|
Starting backport for target branches: 8.19 |
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jun 2, 2025
Closes elastic/observability-dev#4463 ## Summary Since we now have support for error labels in RUM ([PR](elastic/apm-agent-rum-js#1594)), this PR changes the way that we report rum errors to use labels similar to what we've done for toast errors ([PR](elastic#217948)). https://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad ###⚠️ Note In local development, the error is captured twice because react bubbles up the error, but it does not happen in production: ([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats)) > Production and development builds of React slightly differ in the way componentDidCatch handles errors. In development, the errors will bubble up to window, which means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch. ### 🧪 How to test Add the following to your kibana.yml file: ``` elastic.apm.active: true elastic.apm.transactionSampleRate: 1.0 elastic.apm.environment: yourName <-- Change to your name ``` <details> <summary>Throw a fatal react error</summary> Throw an error in the [alerts page](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx) and visit http://localhost:5601/kibana/app/observability/alerts </details> Then visit [kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load) filtered for `yourName` in the environment. (cherry picked from commit cea253d)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jun 2, 2025
# Backport This will backport the following commits from `main` to `8.19`: - [Use RUM label for fatal react errors (#218846)](#218846) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Maryam Saeidi","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-29T08:14:48Z","message":"Use RUM label for fatal react errors (#218846)\n\nCloses https://github.com/elastic/observability-dev/issues/4463\n\n## Summary\n\nSince we now have support for error labels in RUM\n([PR](elastic/apm-agent-rum-js#1594)), this PR\nchanges the way that we report rum errors to use labels similar to what\nwe've done for toast errors\n([PR](https://github.com/elastic/kibana/pull/217948)).\n\n\n\nhttps://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad\n\n\n###⚠️ Note\n\nIn local development, the error is captured twice because react bubbles\nup the error, but it does not happen in production:\n([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats))\n\n> Production and development builds of React slightly differ in the way\ncomponentDidCatch handles errors. In development, the errors will bubble\nup to window, which means that any window.onerror or\nwindow.addEventListener('error', callback) will intercept the errors\nthat have been caught by componentDidCatch. In production, instead, the\nerrors will not bubble up, which means any ancestor error handler will\nonly receive errors not explicitly caught by componentDidCatch.\n\n### 🧪 How to test\n\nAdd the following to your kibana.yml file:\n\n```\nelastic.apm.active: true\nelastic.apm.transactionSampleRate: 1.0\nelastic.apm.environment: yourName <-- Change to your name\n```\n<details>\n<summary>Throw a fatal react error</summary>\n\nThrow an error in the [alerts\npage](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx)\nand visit http://localhost:5601/kibana/app/observability/alerts\n\n</details>\n\nThen visit\n[kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load)\nfiltered for `yourName` in the environment.","sha":"cea253dcc67ed2cfb460a0707ac1e66cdb9180fa","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","v9.1.0","v8.19.0"],"title":"Use RUM label for fatal react errors","number":218846,"url":"https://github.com/elastic/kibana/pull/218846","mergeCommit":{"message":"Use RUM label for fatal react errors (#218846)\n\nCloses https://github.com/elastic/observability-dev/issues/4463\n\n## Summary\n\nSince we now have support for error labels in RUM\n([PR](elastic/apm-agent-rum-js#1594)), this PR\nchanges the way that we report rum errors to use labels similar to what\nwe've done for toast errors\n([PR](https://github.com/elastic/kibana/pull/217948)).\n\n\n\nhttps://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad\n\n\n###⚠️ Note\n\nIn local development, the error is captured twice because react bubbles\nup the error, but it does not happen in production:\n([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats))\n\n> Production and development builds of React slightly differ in the way\ncomponentDidCatch handles errors. In development, the errors will bubble\nup to window, which means that any window.onerror or\nwindow.addEventListener('error', callback) will intercept the errors\nthat have been caught by componentDidCatch. In production, instead, the\nerrors will not bubble up, which means any ancestor error handler will\nonly receive errors not explicitly caught by componentDidCatch.\n\n### 🧪 How to test\n\nAdd the following to your kibana.yml file:\n\n```\nelastic.apm.active: true\nelastic.apm.transactionSampleRate: 1.0\nelastic.apm.environment: yourName <-- Change to your name\n```\n<details>\n<summary>Throw a fatal react error</summary>\n\nThrow an error in the [alerts\npage](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx)\nand visit http://localhost:5601/kibana/app/observability/alerts\n\n</details>\n\nThen visit\n[kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load)\nfiltered for `yourName` in the environment.","sha":"cea253dcc67ed2cfb460a0707ac1e66cdb9180fa"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/218846","number":218846,"mergeCommit":{"message":"Use RUM label for fatal react errors (#218846)\n\nCloses https://github.com/elastic/observability-dev/issues/4463\n\n## Summary\n\nSince we now have support for error labels in RUM\n([PR](elastic/apm-agent-rum-js#1594)), this PR\nchanges the way that we report rum errors to use labels similar to what\nwe've done for toast errors\n([PR](https://github.com/elastic/kibana/pull/217948)).\n\n\n\nhttps://github.com/user-attachments/assets/87a06ceb-705c-4c6e-ab26-d3e5874fe5ad\n\n\n###⚠️ Note\n\nIn local development, the error is captured twice because react bubbles\nup the error, but it does not happen in production:\n([doc](https://react.dev/reference/react/Component#componentdidcatch-caveats))\n\n> Production and development builds of React slightly differ in the way\ncomponentDidCatch handles errors. In development, the errors will bubble\nup to window, which means that any window.onerror or\nwindow.addEventListener('error', callback) will intercept the errors\nthat have been caught by componentDidCatch. In production, instead, the\nerrors will not bubble up, which means any ancestor error handler will\nonly receive errors not explicitly caught by componentDidCatch.\n\n### 🧪 How to test\n\nAdd the following to your kibana.yml file:\n\n```\nelastic.apm.active: true\nelastic.apm.transactionSampleRate: 1.0\nelastic.apm.environment: yourName <-- Change to your name\n```\n<details>\n<summary>Throw a fatal react error</summary>\n\nThrow an error in the [alerts\npage](https://github.com/elastic/kibana/blob/main/x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx)\nand visit http://localhost:5601/kibana/app/observability/alerts\n\n</details>\n\nThen visit\n[kibana-cloud-apm.elastic.dev](https://kibana-cloud-apm.elastic.dev/app/apm/services/kibana-frontend/errors?comparisonEnabled=true&environment=ENVIRONMENT_ALL&kuery=&latencyAggregationType=avg&offset=1d&rangeFrom=now-1h&rangeTo=now&serviceGroup=&transactionType=page-load)\nfiltered for `yourName` in the environment.","sha":"cea253dcc67ed2cfb460a0707ac1e66cdb9180fa"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Maryam Saeidi <[email protected]>
maryam-saeidi
added a commit
that referenced
this pull request
Jun 24, 2025
## Summary When checking the Overview cluster, I noticed that we previously had `labels.error_type` in APM. In this PR, I changed the label that I've added in the following PRs for fatal react errors and toast errors to use `labels.error_type` instead of `labels.errorType` for consistency. - Toast error: #217948 - Fatal react error: #218846
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jun 24, 2025
## Summary When checking the Overview cluster, I noticed that we previously had `labels.error_type` in APM. In this PR, I changed the label that I've added in the following PRs for fatal react errors and toast errors to use `labels.error_type` instead of `labels.errorType` for consistency. - Toast error: elastic#217948 - Fatal react error: elastic#218846 (cherry picked from commit 970cad1)
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
Jun 25, 2025
## Summary When checking the Overview cluster, I noticed that we previously had `labels.error_type` in APM. In this PR, I changed the label that I've added in the following PRs for fatal react errors and toast errors to use `labels.error_type` instead of `labels.errorType` for consistency. - Toast error: elastic#217948 - Fatal react error: elastic#218846
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes https://github.com/elastic/observability-dev/issues/4463
Summary
Since we now have support for error labels in RUM (PR), this PR changes the way that we report rum errors to use labels similar to what we've done for toast errors (PR).
Screen.Recording.2025-04-22.at.17.35.09.mov
In local development, the error is captured twice because react bubbles up the error, but it does not happen in production: (doc)
🧪 How to test
Add the following to your kibana.yml file:
Throw a fatal react error
Throw an error in the alerts page and visit http://localhost:5601/kibana/app/observability/alerts
Then visit kibana-cloud-apm.elastic.dev filtered for
yourNamein the environment.