Skip to content
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

Onboarding wizard for errors + replay + performance #6633

Merged
merged 23 commits into from
Apr 24, 2023

Conversation

bruno-garcia
Copy link
Member

@bruno-garcia bruno-garcia commented Apr 11, 2023

No description provided.

@vercel
Copy link

vercel bot commented Apr 11, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 24, 2023 10:04am

src/wizard/javascript/angular/with-error-monitoring.md Outdated Show resolved Hide resolved
src/wizard/javascript/angularjs/with-error-monitoring.md Outdated Show resolved Hide resolved
import * as Sentry from "@sentry/remix";

Sentry.init({
dsn: "___DSN___",
Copy link
Member Author

Choose a reason for hiding this comment

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

Prisma here on errors only?

Copy link
Member

Choose a reason for hiding this comment

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

Prisma is only for perf - changed with c5b4fc0

@bruno-garcia bruno-garcia marked this pull request as ready for review April 13, 2023 03:53
Comment on lines 58 to 90
### ErrorHandler and Tracer

The Sentry Angular SDK exports a function to instantiate `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler.

```javascript
import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
import { Router } from "@angular/router";
// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead
import * as Sentry from "@sentry/angular-ivy";

@NgModule({
// ...
providers: [
{
provide: ErrorHandler,
useValue: Sentry.createErrorHandler({
showDialog: true,
}),
},
{
provide: Sentry.TraceService,
deps: [Router],
},
{
provide: APP_INITIALIZER,
useFactory: () => () => {},
deps: [Sentry.TraceService],
multi: true,
},
],
// ...
})
export class AppModule {}
Copy link
Member

Choose a reason for hiding this comment

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

this seems to be essential for Sentry to capture errors in an angular application. can you confirm? Otherwise, I feel like this could be an optional settings as we are doing for the loader

image

Copy link
Member

Choose a reason for hiding this comment

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

I just stumbled across this. This is definitely required to set up the SDK properly in Angular apps. Otherwise the routing instrumentation doesn't work (==> no/incorrect pageload navigation transactions) and errors would only be caught by the global handlers.

src/wizard/javascript/angular/with-error-monitoring.md Outdated Show resolved Hide resolved
@AbhiPrasad AbhiPrasad self-assigned this Apr 14, 2023
@AbhiPrasad AbhiPrasad requested a review from a team as a code owner April 14, 2023 11:40
@shanamatthews
Copy link
Contributor

Hey @bruno-garcia - I was going to set this up to preview locally, but there's a build error.
It looks like Gatsby is mad about adding these new js frameworks?

Could you get that fixed up so I can preview & review the wizard changes? LMK if you want me to look at it with you :D

@bruno-garcia
Copy link
Member Author

Hey @bruno-garcia - I was going to set this up to preview locally, but there's a build error. It looks like Gatsby is mad about adding these new js frameworks?

Could you get that fixed up so I can preview & review the wizard changes? LMK if you want me to look at it with you :D

I reached out to @matejminar for help here since his team made the changes to support this new format. My PR took the react example and expanded to all JS platforms. Matej said folks. will come give a hand on this PR soon 🙏

Comment on lines 49 to 56
<button
type="button"
onClick={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>
Copy link
Member

Choose a reason for hiding this comment

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

@Jesse-Box thoughts on this?

You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist:

```javascript
<button onClick={() => methodDoesNotExist()}>Break the world</button>
Copy link
Member

Choose a reason for hiding this comment

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

@Jesse-Box another example

@@ -1,9 +0,0 @@
Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure).

Copy link
Member

Choose a reason for hiding this comment

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

@AbhiPrasad this file was causing an issue in the build...I believe we do not need this. can you please confirm?

Copy link
Member

Choose a reason for hiding this comment

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

It is being used here:

wizard_setup: "./nextjs_wizard.md"

We still need it.

Copy link
Member

Choose a reason for hiding this comment

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

@priscilawebdev
Copy link
Member

@shanamatthews build is fixed 😉 I am just waiting for @AbhiPrasad answer to my last comment before merging.

@priscilawebdev priscilawebdev merged commit 1e6068e into master Apr 24, 2023
@priscilawebdev priscilawebdev deleted the feat/onboarding-wizard-replay-perf-options branch April 24, 2023 11:10
@github-actions github-actions bot locked and limited conversation to collaborators May 10, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants