Skip to content

test(e2e): Test building a create-react-app app with Sentry SDK #5848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Sep 29, 2022

Conversation

lforst
Copy link
Contributor

@lforst lforst commented Sep 28, 2022

Ref: #5506

Create first E2E test that tests adding Sentry to a create-react-app application.

It tests the following things:

  • Installing @sentry/react and @sentry/tracing
  • Importing various APIs init, BrowserTracing integration, ErrorBoundary, withProfile
  • Typings of these APIs (yarn build runs tsc/typechecking under the hood)

@lforst lforst mentioned this pull request Sep 28, 2022
9 tasks
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

Nice

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "es5",
Copy link
Member

Choose a reason for hiding this comment

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

lol it's es5 by default??

Base automatically changed from lforst-recipe-based-e2e-setup to master September 28, 2022 16:44
@lforst lforst force-pushed the lforst-create-react-app-e2e-test branch from 85776f6 to 0eef5a5 Compare September 28, 2022 20:58
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

🚀


function App() {
return (
<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
Copy link
Member

Choose a reason for hiding this comment

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

Let's make us of the more fleshed out fallback.

Suggested change
<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
<Sentry.ErrorBoundary
fallback={({ error, componentStack, resetError }) => (
<React.Fragment>
<div>You have encountered an error</div>
<div>{error.toString()}</div>
<div>{componentStack}</div>
<button
onClick={() => {
this.setState({ message: "This is my app" });
{/* When resetError() is called it will remove the Fallback component */}
{/* and render the Sentry ErrorBoundary's children in their initial state */}
resetError();
}}
>
Click here to reset!
</button>
</React.Fragment>
)}
>

@lforst lforst marked this pull request as ready for review September 29, 2022 11:35
@github-actions
Copy link
Contributor

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 19.49 KB (+0.01% 🔺)
@sentry/browser - ES5 CDN Bundle (minified) 60.29 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 18.11 KB (+0.02% 🔺)
@sentry/browser - ES6 CDN Bundle (minified) 53.22 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 19.83 KB (0%)
@sentry/browser - Webpack (minified) 64.56 KB (0%)
@sentry/react - Webpack (gzipped + minified) 19.85 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 44.75 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 25.94 KB (+0.01% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 24.38 KB (+0.01% 🔺)

@lforst lforst merged commit e242ee6 into master Sep 29, 2022
@lforst lforst deleted the lforst-create-react-app-e2e-test branch September 29, 2022 12:01
Sign up for free to 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