Skip to content

Commit fe4651e

Browse files
inventarSarahinventarSarah
authored
docs(js): Update Ember quick start guide (#14804)
<!-- Use this checklist to make sure your PR is ready for merge. You may delete any sections you don't need. --> ## DESCRIBE YOUR PR Updated the Ember quick start guide to follow our Quick Start guide template. Closes: #14801 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)
1 parent 8c03ee7 commit fe4651e

File tree

2 files changed

+99
-31
lines changed

2 files changed

+99
-31
lines changed

‎docs/platforms/javascript/guides/ember/index.mdx‎

Lines changed: 92 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
---
22
title: Ember
3+
description: "Learn how to set up Sentry in your Ember application and capture your first errors."
34
sdk: sentry.javascript.ember
45
categories:
56
- javascript
67
- browser
78
---
89

9-
<Alert>
10-
11-
Sentry's Ember addon enables automatic reporting of errors, exceptions, and transactions.
12-
13-
</Alert>
14-
15-
The minimum supported Ember.js version is `4.0.0`.
16-
1710
<PlatformContent includePath="getting-started-prerequisites" />
1811

19-
## Features
12+
## Step 1: Install
2013

21-
In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
22-
23-
Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
24-
25-
## Install
14+
Choose the features you want to configure, and this guide will show you how:
2615

2716
<OnboardingOptionButtons
2817
options={[
@@ -34,17 +23,21 @@ Select which Sentry features you'd like to install in addition to Error Monitori
3423
]}
3524
/>
3625

37-
Sentry captures data by using an SDK within your application's runtime.
26+
<PlatformContent includePath="getting-started-features-expandable" />
27+
28+
### Install the Sentry SDK
29+
30+
Run the command for your preferred package manager to add the Sentry SDK to your application:
3831

3932
<PlatformContent includePath="getting-started-install" />
4033

41-
## Configure
34+
## Step 2: Configure
4235

43-
Configuration should happen as early as possible in your application's lifecycle.
36+
### Initialize the SDK
4437

45-
This snippet includes automatic instrumentation to monitor the performance of your application, which registers and configures the Tracing integration, including custom [Ember instrumentation](./configuration/ember-options/).
38+
Configuration should happen as early as possible in your application's lifecycle. Add the following to your `app/app.js` file:
4639

47-
```javascript
40+
```javascript {filename:app.js}
4841
import Application from "@ember/application";
4942
import Resolver from "ember-resolver";
5043
import loadInitializers from "ember-load-initializers";
@@ -102,26 +95,94 @@ export default class App extends Application {
10295
}
10396
```
10497

105-
<Alert>
98+
## Step 3: Add Readable Stack Traces With Source Maps (Optional)
99+
100+
<PlatformContent includePath="getting-started-sourcemaps-short-version" />
101+
102+
## Step 4: Avoid Ad Blockers With Tunneling (Optional)
103+
104+
<PlatformContent includePath="getting-started-tunneling" />
105+
106+
## Step 5: Verify Your Setup
107+
108+
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
109+
110+
### Issues
111+
112+
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your templates, which will trigger an error that Sentry will capture when you click it:
113+
114+
```handlebars {filename: application.hbs}
115+
{{! rest of your page }}
116+
<button type="button" {{on "click" this.throwTestError}}>
117+
Test Sentry Error
118+
</button>
119+
```
120+
121+
Next, add the corresponding action to your controller or component:
122+
123+
```javascript {filename: application.js}
124+
import Controller from "@ember/controller";
125+
import { action } from "@ember/object";
126+
127+
export default class ApplicationController extends Controller {
128+
@action
129+
throwTestError() {
130+
throw new Error("Sentry Test Error");
131+
}
132+
}
133+
```
134+
135+
<OnboardingOption optionId="performance" hideForThisOption>
136+
Open the page in a browser and click the button to trigger a frontend error.
137+
</OnboardingOption>
138+
139+
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
140+
141+
<OnboardingOption optionId="performance">
142+
### Tracing
143+
To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code:
144+
145+
```javascript {filename: application.js} {3,8-12}
146+
import Controller from "@ember/controller";
147+
import { action } from "@ember/object";
148+
import * as Sentry from "@sentry/ember";
149+
150+
export default class ApplicationController extends Controller {
151+
@action
152+
throwTestError() {
153+
Sentry.startSpan({ op: "test", name: "Example Span" }, () => {
154+
setTimeout(() => {
155+
throw new Error("Sentry Test Error");
156+
}, 99);
157+
});
158+
}
159+
}
160+
```
161+
162+
Open the page in a browser and click the button to trigger a frontend error and a trace.
106163

107-
This SDK uses Ember configuration conventions to manage its automatic instrumentation and other Sentry options. This additional configuration can be found under <PlatformLink to="/configuration/ember-options/">Ember options</PlatformLink>.
164+
</OnboardingOption>
108165

109-
</Alert>
166+
### View Captured Data in Sentry
110167

111-
<PlatformContent includePath="getting-started-sourcemaps" />
168+
Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
112169

113-
## Verify
170+
<PlatformContent includePath="getting-started-verify-locate-data" />
114171

115-
This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
172+
## Next Steps
116173

117-
<PlatformContent includePath="getting-started-verify" />
174+
At this point, you should have integrated Sentry into your Ember application and should already be sending data to your Sentry project.
118175

119-
<Alert>
176+
Now's a good time to customize your setup and look into more advanced topics.
177+
Our next recommended steps for you are:
120178

121-
Learn more about manually capturing an error or message in our <PlatformLink to="/usage/">Usage documentation</PlatformLink>.
179+
- Learn how to [manually capture errors](/platforms/javascript/guides/ember/usage/)
180+
- Continue to [customize your configuration](/platforms/javascript/guides/ember/configuration/)
181+
- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
122182

123-
</Alert>
183+
<Expandable permalink={false} title="Are you having problems setting up the SDK?">
124184

125-
To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.
185+
- Find various topics in [Troubleshooting](/platforms/javascript/guides/ember/troubleshooting/)
186+
- [Get support](https://sentry.zendesk.com/hc/en-us/)
126187

127-
<PlatformContent includePath="getting-started-next-steps" />
188+
</Expandable>

‎platform-includes/getting-started-prerequisites/javascript.ember.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Prerequisites
2+
3+
You need:
4+
5+
- A Sentry [account](https://sentry.io/signup/) and [project](/product/projects/)
6+
- Your application up and running
7+
- Ember.js version `4.0.0` or above

0 commit comments

Comments
 (0)