feat(inbound-filters): Add react-hydration-errors filter by priscilawebdev · Pull Request #45188 · getsentry/sentry

priscilawebdev · 2023-02-28T15:34:39Z

Problem:

We want to make it clear how Sentry is transforming error payloads, specifically for react-minified errors. This is because it can be hard to tell how to filter these errors (using either beforeSend or server-side inbound filters) as the UI shows the transformed message, not the original one.

Solution:

A new "Inbound Filters" called "Filter out hydration errors" is added via this PR, so users only have to toggle and relay will filter out the most common react hydration errors.

More Details:
Fixes: #45038
Fixes: getsentry/sentry-javascript#6295

andriisoldatenko · 2023-02-28T16:35:42Z

src/sentry/ingest/test.json

@@ -0,0 +1,3 @@
+{"event_id":"65fad5091a3f4db1b9812777f6dcc052","sent_at":"2023-02-28T16:05:58.058Z","sdk":{"name":"sentry.javascript.nextjs","version":"7.39.0"}}


why do we need this file?

Yep... I think it was included by mistake @priscilawebdev ?

yes that was included by mistake... I am removing and turning this back to "ready to review" 😉

RaduW

With the exception of the Json file (which I think was added by mistake) everything seems fine.
Please remove the test.json (unless I completely miss something) then I think it's good to go.

priscilawebdev · 2023-02-28T20:58:07Z

tests/sentry/api/endpoints/snapshots/ProjectFiltersTest/test_get.pysnap

  hello: localhost - Filter out events coming from localhost
  id: localhost
  name: Filter out events coming from localhost
+- active: false


@andriisoldatenko @RaduW I used the following command to update this file 😉

SENTRY_SNAPSHOTS_WRITEBACK=1 pytest tests/sentry/api/endpoints/test_project_filters.py

iker-barriocanal

(I've only looked at the relay part.) Does this come with a PR in relay?

iker-barriocanal · 2023-03-01T10:11:04Z

src/sentry/ingest/inbound_filters.py

+_react_hydration_errors_filter = _FilterSpec(
+    id=FilterStatKeys.REACT_HYDRATION_ERRORS,
+    name="Filter out hydration errors",
+    description="React falls back to do a full re-render on a page and these errors are often not actionable.",


Are we targeting all hydration errors, or only these coming from React?

iker-barriocanal · 2023-03-01T10:18:00Z

src/sentry/relay/config/__init__.py

+                # Text content does not match server-rendered HTML.
+                "https://reactjs.org/docs/error-decoder.html?invariant=425",
+            ]
+            error_messages = [*error_messages, *react_known_hydration_errors]


error_messages here may be None if the option above is not registered, and in that case the unpacking fails.

iker-barriocanal · 2023-03-01T10:25:08Z

src/sentry/relay/config/__init__.py

+            error_messages = [*error_messages, *react_known_hydration_errors]
+
        if error_messages:
            filter_settings["errorMessages"] = {"patterns": error_messages}


errorMessages are here in relay, and patterns are globs. Do you want to escape special characters in the links above, like ??

github-actions · 2023-03-01T11:44:16Z

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

priscilawebdev · 2023-03-01T11:49:56Z

Sorry @iker-barriocanal but I just completely changed the logic based on @jan-auer feedback

src/sentry/api/serializers/models/project.py

codecov · 2023-03-02T08:48:29Z

Codecov Report

Merging #45188 (2413734) into master (043f4ac) will decrease coverage by 2.69%.
The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #45188      +/-   ##
==========================================
- Coverage   79.71%   77.02%   -2.69%     
==========================================
  Files        4724     4720       -4     
  Lines      198812   198690     -122     
  Branches    12007    12006       -1     
==========================================
- Hits       158482   153050    -5432     
- Misses      40068    45378    +5310     
  Partials      262      262

Impacted Files	Coverage Δ
src/sentry/api/serializers/models/project.py	`97.16% <ø> (-0.26%)`	⬇️
src/sentry/models/options/project_option.py	`98.64% <ø> (ø)`
...pp/components/events/eventReplay/replayPreview.tsx	`96.42% <ø> (-0.13%)`	⬇️
...ponents/events/interfaces/frame/stacktraceLink.tsx	`85.07% <ø> (-0.85%)`	⬇️
static/app/components/menuListItem.tsx	`100.00% <ø> (ø)`
static/app/components/replays/playerDOMAlert.tsx	`100.00% <ø> (ø)`
...tics/integrations/stacktraceLinkAnalyticsEvents.ts	`100.00% <ø> (ø)`
static/app/views/issueDetails/groupDetails.tsx	`64.28% <ø> (ø)`
static/app/views/monitors/monitors.tsx	`0.00% <ø> (ø)`
...c/app/views/organizationStats/usageChart/index.tsx	`73.91% <ø> (ø)`
... and 475 more

priscilawebdev · 2023-03-02T10:08:32Z

frontend #45300

jjbayer · 2023-03-02T10:17:40Z

src/sentry/relay/config/__init__.py

+            "https://reactjs.org/docs/error-decoder.html?invariant=418",
+            # The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.
+            "https://reactjs.org/docs/error-decoder.html?invariant=419",
+            # There was an error while hydrating this Suspense boundary. Switched to client rendering.
+            "https://reactjs.org/docs/error-decoder.html?invariant=422",
+            # There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
+            "https://reactjs.org/docs/error-decoder.html?invariant=423",
+            # Text content does not match server-rendered HTML.
+            "https://reactjs.org/docs/error-decoder.html?invariant=425",


Because error_messages parses glob patterns, we could shorten this to

Suggested change

"https://reactjs.org/docs/error-decoder.html?invariant=418",

# The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.

"https://reactjs.org/docs/error-decoder.html?invariant=419",

# There was an error while hydrating this Suspense boundary. Switched to client rendering.

"https://reactjs.org/docs/error-decoder.html?invariant=422",

# There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

"https://reactjs.org/docs/error-decoder.html?invariant=423",

# Text content does not match server-rendered HTML.

"https://reactjs.org/docs/error-decoder.html?invariant=425",

"https://reactjs.org/docs/error-decoder.html?invariant={418,419,422,423,425}"

Let's please leave it like this, obviously more verbose, but the comments are helpful to understand what the numbers actually mean.

I'm totally in favor of keeping the comments, but we could still shorten the value itself.

ok, I have updated the code shortening the value but still keeping the comments... Hope it's better now

Adds an ingest consumer similar to Replays and Profiles that reads from a Kafka topic `ingest-monitors` and updates them directly in postgres. The consumer runs automatically in devserver and can be started via `sentry run ingest-monitors`. This supports creating and updating check ins with a status and duration. Creating monitors is not supported yet. The consumer closely follows the logic from checkin creation, but there is a difference for disabled monitors compared to the Update (PUT) endpoint.

…lter

priscilawebdev marked this pull request as ready for review February 28, 2023 15:34

priscilawebdev requested a review from a team February 28, 2023 15:34

vercel bot deployed to Preview February 28, 2023 15:35 View deployment

priscilawebdev requested review from a team and RaduW February 28, 2023 15:36

github-actions bot added the Scope: Backend Automatically applied to PRs that change backend components label Feb 28, 2023

priscilawebdev marked this pull request as draft February 28, 2023 16:19

vercel bot deployed to Preview February 28, 2023 16:22 View deployment

vercel bot deployed to Preview February 28, 2023 16:28 View deployment

vercel bot deployed to Preview February 28, 2023 16:32 View deployment

andriisoldatenko reviewed Feb 28, 2023

View reviewed changes

RaduW approved these changes Feb 28, 2023

View reviewed changes

vercel bot deployed to Preview February 28, 2023 20:54 View deployment

priscilawebdev commented Feb 28, 2023

View reviewed changes

priscilawebdev marked this pull request as ready for review February 28, 2023 20:58

vercel bot deployed to Preview February 28, 2023 20:58 View deployment

vercel bot deployed to Preview February 28, 2023 21:50 View deployment

vercel bot deployed to Preview March 1, 2023 08:20 View deployment

iker-barriocanal reviewed Mar 1, 2023

View reviewed changes

priscilawebdev requested a review from a team as a code owner March 1, 2023 11:43

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 1, 2023

priscilawebdev force-pushed the feat/add-react-hydration-errors-inbound-filter branch 2 times, most recently from c42f48b to deacd7d Compare March 1, 2023 11:48

priscilawebdev requested a review from jan-auer March 1, 2023 11:50

priscilawebdev commented Mar 1, 2023

View reviewed changes

src/sentry/api/serializers/models/project.py Show resolved Hide resolved

vercel bot deployed to Preview March 1, 2023 11:51 View deployment

vercel bot deployed to Preview March 2, 2023 08:44 View deployment

feat(inbound-filters): Add react hydration errors filter

167ee74

priscilawebdev force-pushed the feat/add-react-hydration-errors-inbound-filter branch 2 times, most recently from 4a6c887 to 167ee74 Compare March 2, 2023 10:06

priscilawebdev removed the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 2, 2023

priscilawebdev enabled auto-merge (squash) March 2, 2023 10:08

priscilawebdev disabled auto-merge March 2, 2023 10:17

jjbayer reviewed Mar 2, 2023

View reviewed changes

jan-auer and others added 2 commits March 2, 2023 11:26

fix typo

1fb75f5

priscilawebdev requested a review from a team as a code owner March 2, 2023 10:43

vercel bot deployed to Preview March 2, 2023 10:45 View deployment

priscilawebdev added 2 commits March 2, 2023 11:46

cr feedback

19248d7

Merge branch 'master' into feat/add-react-hydration-errors-inbound-fi…

c9b89d5

…lter

vercel bot deployed to Preview March 2, 2023 10:50 View deployment

add type definition

2acdce5

vercel bot deployed to Preview March 2, 2023 10:58 View deployment

priscilawebdev enabled auto-merge (squash) March 2, 2023 11:06

fix test_config.py tests

813a06a

vercel bot deployed to Preview March 2, 2023 12:23 View deployment

priscilawebdev added 2 commits March 2, 2023 15:20

Merge branch 'master' into feat/add-react-hydration-errors-inbound-fi…

daf22f2

…lter

update snapshot

9940a17

vercel bot deployed to Preview March 2, 2023 14:28 View deployment

Merge branch 'master' into feat/add-react-hydration-errors-inbound-fi…

2413734

…lter

vercel bot deployed to Preview March 3, 2023 07:47 View deployment

priscilawebdev merged commit dfe56ae into master Mar 3, 2023

priscilawebdev deleted the feat/add-react-hydration-errors-inbound-filter branch March 3, 2023 08:07

jeengbe mentioned this pull request Mar 3, 2023

react-hydration-errors inbound filter doesn't catch all errors #45363

Closed

priscilawebdev mentioned this pull request Mar 3, 2023

fix(inbound-filter): Fix react hydration errors message condition #45364

Merged

github-actions bot locked and limited conversation to collaborators Mar 18, 2023

		@@ -0,0 +1,3 @@
		{"event_id":"65fad5091a3f4db1b9812777f6dcc052","sent_at":"2023-02-28T16:05:58.058Z","sdk":{"name":"sentry.javascript.nextjs","version":"7.39.0"}}

Uh oh!

Conversation

priscilawebdev commented Feb 28, 2023 • edited by HazAT Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RaduW left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iker-barriocanal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 1, 2023

Uh oh!

priscilawebdev commented Mar 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

priscilawebdev commented Mar 2, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HazAT Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

priscilawebdev commented Feb 28, 2023 •

edited by HazAT

Loading

RaduW left a comment •

edited

Loading

priscilawebdev commented Mar 1, 2023 •

edited

Loading

codecov bot commented Mar 2, 2023 •

edited

Loading

HazAT Mar 2, 2023 •

edited

Loading