feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(react): Add a handled prop to ErrorBoundary - #14560

Merged
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop
Jan 10, 2025
Merged

feat(react): Add a handled prop to ErrorBoundary#14560
Lms24 merged 3 commits into
getsentry:developfrom
HHK1:hhk/react-boundary-explicit-handled-prop

Conversation

@HHK1

@HHK1HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
Contributor

The previous behaviour was to rely on the presence of the fallback prop to decide if the error was considered handled or not. The new property lets the consumer explicitely choose what should the handled status be.
If omitted, the old behaviour is still applied.

Before submitting a pull request, please take a look at our
Contributing guidelines and verify:

  • If you've added code that should be tested, please add tests.
  • Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

-> I'm having some failures locally that seem unrelated to my changes. Waiting for a CI check to confirm

@HHK1

HHK1 commented Dec 3, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 not sure what to do regarding the CI.

build works fine locally, but I'm having errors when running lint and test. It seems very much unrelated to the changes here.
Any advices on making the local setup work?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hey @HHK1 thanks for opening this PR! The proposed changes look good to me! I had some suggestions to streamline the implementation but looks fine! I'll start CI to check for the linting stuff but it most definitely will fail because there's still an .only filter in the tests (we have a lint rule against accidentally merging this in).

I'd generally recommend to run yarn fix:biome in the root directory of the repo to fix any formatting and biome lint issues.

I can take another look about remaining CI fails if things still fail after the changes.

Comment threadpackages/react/src/errorboundary.tsx Outdated
Comment on lines +116 to +117
const isHandled = this.props.handled === undefined ? !!this.props.fallback : this.props.handled;
const eventId = captureReactException(error, errorInfo, { mechanism: { handled: isHandled } });

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

a suggestion to make this a bit more concise and save some bytes of bundle size. I turned around the condition to reflect that the fallback is actually our fallback way of determining handled:

Suggested change
constisHandled=this.props.handled===undefined ? !!this.props.fallback : this.props.handled;
consteventId=captureReactException(error,errorInfo,{mechanism: {handled: isHandled}});
consthandled=this.props.handled!=null ? this.props.handled : !!this.props.fallback;
consteventId=captureReactException(error,errorInfo,{mechanism: { handled }});

(!= null can be used as a shorthand for !== undefined && !== null)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Fixed in 11c408d

Comment threadpackages/react/test/errorboundary.test.tsx Outdated
expect(mockOnReset).toHaveBeenCalledTimes(1);
expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String), expect.any(String));
});
it.only.each`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This we should most definitely remove :)

Suggested change
it.only.each`
it.each`

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

fixed in 9c1cf83

@HHK1

HHK1 commented Dec 4, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 thanks for the review!

I've pushed a couple fixups, once the conversations are resolved I'll squash them to have a single commit.

I ran the formatting through the VSCode extension on the files I've touched, but I got the following kind of issues when running yarn run lint locally at the root of the repo:

Formatter would have printed the following content:
3 3 │ import type { RouterType } from './server/solidrouter';
4 4 │ export declare function withSentryRouterRouting(Router: RouterType): RouterType;
5 │ - //#·sourceMappingURL=solidrouter.d.ts.map
5 │ + //#·sourceMappingURL=solidrouter.d.ts.map
6 │

The yarn test command is also failing:

 FAIL test/reactrouterv3.test.tsx
● Test suite failed to run
test/reactrouterv3.test.tsx:21:16 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Router' must be of type 'typeof import("/Users/henryhuck/Documents/oss/sentry-javascript/node_modules/react-router/lib/Router")', but here has type 'ComponentType<{ history: History; }>'.
21 export const Router: React.ComponentType<{ history: History }>;

It does seem like a local setup error. Rings any bell? Not a big deal but I was just curious as why it could fail.

@HHK1
HHK1 requested a review from Lms24December 4, 2024 13:57
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from 11c408d to c1e5bccCompareDecember 4, 2024 14:07
@HHK1

HHK1 commented Dec 9, 2024

Copy link
Copy Markdown
ContributorAuthor

@Lms24 just a soft ping if you could have a look 😇🙏
I think everything is good now, let me know if you want me to squash the fixups before re-running the CI (I use them to make the changes clearer to re-review).

The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not.
The new property lets the consumer explicitely choose what should the
handled status be.
If omitted, the old behaviour is still applied.
@HHK1
HHK1force-pushed the hhk/react-boundary-explicit-handled-prop branch from c1e5bcc to 1a46addCompareJanuary 10, 2025 09:49
@HHK1

HHK1 commented Jan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

@Lms24 👋 would it be possible to have a review on this please?

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies for the late review! This looks good to me now, thanks for contributing and for making the requested changes :)

Heads-up: I'll cherry pick this commit once it's merged onto our v8 branch to ensure we can include this in the next v8 release, probably sometime next week.

@Lms24Lms24 changed the title feat(react): add a handled prop to ErrorBoundaryfeat(react): Add a handled prop to ErrorBoundaryJan 10, 2025
@Lms24Lms24 assigned Lms24 and unassigned Lms24Jan 10, 2025
@Lms24
Lms24 enabled auto-merge (squash) January 10, 2025 11:32
@Lms24
Lms24 merged commit ac6ac07 into getsentry:developJan 10, 2025
Lms24 pushed a commit that referenced this pull request Jan 10, 2025
The previous behaviour was to rely on the presence of the `fallback`
prop to decide if the error was considered handled or not. The new
property lets users explicitly choose what should the handled
status be. If omitted, the old behaviour is still applied.
Lms24 added a commit that referenced this pull request Jan 10, 2025
backport of #14560
---------
Co-authored-by: Henry Huck <henryhuck@hotmail.fr>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@HHK1@Lms24