Skip to content

Commit e5470f0

Browse files
inventarSarahinventarSarah
authored
docs(js): Update quick start guide split layout for Ember, Gatsby, Vue (#17455)
<!-- Use this checklist to make sure your PR is ready for merge. You may delete any sections you don't need. --> ## DESCRIBE YOUR PR This branch updates the following quick start guides to use the new split layout: - Ember - Gatsby - Vue Closes: #17450 ## 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 81e9421 commit e5470f0

3 files changed

Lines changed: 250 additions & 64 deletions

File tree

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

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,28 @@ categories:
99

1010
<PlatformContent includePath="getting-started-prerequisites" />
1111

12-
## Step 1: Install
12+
<StepConnector selector="h2" showNumbers={true}>
13+
14+
## Install
1315

1416
### Install the Sentry SDK
1517

18+
<SplitLayout>
19+
<SplitSection>
20+
<SplitSectionText>
21+
1622
Run the command for your preferred package manager to add the Sentry SDK to your application:
1723

24+
</SplitSectionText>
25+
<SplitSectionCode>
26+
1827
<PlatformContent includePath="getting-started-install" />
1928

20-
## Step 2: Configure
29+
</SplitSectionCode>
30+
</SplitSection>
31+
</SplitLayout>
32+
33+
## Configure
2134

2235
Choose the features you want to configure, and this guide will show you how:
2336

@@ -35,8 +48,15 @@ Choose the features you want to configure, and this guide will show you how:
3548

3649
### Initialize the SDK
3750

51+
<SplitLayout>
52+
<SplitSection>
53+
<SplitSectionText>
54+
3855
Configuration should happen as early as possible in your application's lifecycle. Add the following to your `app/app.js` file:
3956

57+
</SplitSectionText>
58+
<SplitSectionCode>
59+
4060
```javascript {filename:app.js}
4161
import Application from "@ember/application";
4262
import Resolver from "ember-resolver";
@@ -95,21 +115,34 @@ export default class App extends Application {
95115
}
96116
```
97117

98-
## Step 3: Add Readable Stack Traces With Source Maps (Optional)
118+
</SplitSectionCode>
119+
</SplitSection>
120+
</SplitLayout>
121+
122+
### Add Readable Stack Traces With Source Maps (Optional)
99123

100-
<PlatformContent includePath="getting-started-sourcemaps-short-version" />
124+
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />
101125

102-
## Step 4: Avoid Ad Blockers With Tunneling (Optional)
126+
### Avoid Ad Blockers With Tunneling (Optional)
103127

104-
<PlatformContent includePath="getting-started-tunneling" />
128+
<PlatformContent includePath="getting-started-tunneling-splitlayout" />
105129

106-
## Step 5: Verify Your Setup
130+
## Verify Your Setup
107131

108132
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
109133

110134
### Issues
111135

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:
136+
<SplitLayout>
137+
<SplitSection>
138+
<SplitSectionText>
139+
140+
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.
141+
142+
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
143+
144+
</SplitSectionText>
145+
<SplitSectionCode>
113146

114147
```handlebars {filename: application.hbs}
115148
{{! rest of your page }}
@@ -118,7 +151,19 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
118151
</button>
119152
```
120153

121-
Next, add the corresponding action to your controller or component:
154+
</SplitSectionCode>
155+
</SplitSection>
156+
<SplitSection>
157+
<SplitSectionText>
158+
159+
Next, add the corresponding action to your controller or component.
160+
161+
<OnboardingOption optionId="performance" hideForThisOption>
162+
Open the page in a browser and click the button to trigger a frontend error.
163+
</OnboardingOption>
164+
165+
</SplitSectionText>
166+
<SplitSectionCode>
122167

123168
```javascript {filename: application.js}
124169
import Controller from "@ember/controller";
@@ -132,15 +177,22 @@ export default class ApplicationController extends Controller {
132177
}
133178
```
134179

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" />
180+
</SplitSectionCode>
181+
</SplitSection>
182+
</SplitLayout>
140183

141184
<OnboardingOption optionId="performance">
142185
### 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:
186+
187+
<SplitLayout>
188+
<SplitSection>
189+
<SplitSectionText>
190+
191+
To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code.
192+
Then, open the page in a browser and click the button to trigger a frontend error and a trace.
193+
194+
</SplitSectionText>
195+
<SplitSectionCode>
144196

145197
```javascript {filename: application.js} {3,8-12}
146198
import Controller from "@ember/controller";
@@ -159,13 +211,15 @@ export default class ApplicationController extends Controller {
159211
}
160212
```
161213

162-
Open the page in a browser and click the button to trigger a frontend error and a trace.
214+
</SplitSectionCode>
215+
</SplitSection>
216+
</SplitLayout>
163217

164218
</OnboardingOption>
165219

166220
<OnboardingOption optionId="logs">
167221

168-
<Include name="logs/javascript-quick-start-verify-logs" />
222+
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />
169223

170224
</OnboardingOption>
171225

@@ -193,3 +247,5 @@ Our next recommended steps for you are:
193247
- [Get support](https://sentry.zendesk.com/hc/en-us/)
194248

195249
</Expandable>
250+
251+
</StepConnector>

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

Lines changed: 83 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,26 @@ categories:
99

1010
<PlatformContent includePath="getting-started-prerequisites" />
1111

12-
## Step 1: Install
12+
<StepConnector selector="h2" showNumbers={true}>
13+
14+
## Install
1315

1416
### Install the Sentry SDK
1517

16-
Run the command for your preferred package manager to add the Sentry SDK to your application:
18+
<SplitLayout>
19+
<SplitSection>
20+
<SplitSectionText>
21+
22+
Run the command for your preferred package manager to add the Sentry SDK to your application.
23+
24+
<Alert>
25+
26+
`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. This means that you can import all methods available in the `@sentry/react` package from `@sentry/gatsby`.
27+
28+
</Alert>
29+
30+
</SplitSectionText>
31+
<SplitSectionCode>
1732

1833
```bash {tabTitle:npm}
1934
npm install @sentry/gatsby --save
@@ -27,16 +42,21 @@ yarn add @sentry/gatsby
2742
pnpm add @sentry/gatsby
2843
```
2944

30-
<Alert>
31-
32-
`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. This means that you can import all methods available in the `@sentry/react` package from `@sentry/gatsby`.
33-
34-
</Alert>
45+
</SplitSectionCode>
46+
</SplitSection>
47+
</SplitLayout>
3548

3649
### Register the Sentry SDK
3750

51+
<SplitLayout>
52+
<SplitSection>
53+
<SplitSectionText>
54+
3855
Register `@sentry/gatsby` in your Gatsby configuration file (typically `gatsby-config.(js|ts)`).
3956

57+
</SplitSectionText>
58+
<SplitSectionCode>
59+
4060
```javascript {tabTitle: CommonJS}{filename:gatsby-config.(js|ts)}
4161
module.exports = {
4262
plugins: [
@@ -62,7 +82,11 @@ const config: GatsbyConfig = {
6282
export default config;
6383
```
6484

65-
## Step 2: Configure
85+
</SplitSectionCode>
86+
</SplitSection>
87+
</SplitLayout>
88+
89+
## Configure
6690

6791
Choose the features you want to configure, and this guide will show you how:
6892

@@ -80,8 +104,15 @@ Choose the features you want to configure, and this guide will show you how:
80104

81105
### Initialize the Sentry SDK
82106

107+
<SplitLayout>
108+
<SplitSection>
109+
<SplitSectionText>
110+
83111
Initialize Sentry as early as possible in your application. For this, create a new file `sentry.config.(js|ts)` in your project root and add the following:
84112

113+
</SplitSectionText>
114+
<SplitSectionCode>
115+
85116
```javascript {filename:sentry.config.(js|ts)}
86117
import * as Sentry from "@sentry/gatsby";
87118

@@ -132,21 +163,39 @@ Sentry.init({
132163
});
133164
```
134165

135-
## Step 3: Add Readable Stack Traces With Source Maps (Optional)
166+
</SplitSectionCode>
167+
</SplitSection>
168+
</SplitLayout>
169+
170+
### Add Readable Stack Traces With Source Maps (Optional)
136171

137-
<PlatformContent includePath="getting-started-sourcemaps-short-version" />
172+
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />
138173

139-
## Step 4: Avoid Ad Blockers With Tunneling (Optional)
174+
### Avoid Ad Blockers With Tunneling (Optional)
140175

141-
<PlatformContent includePath="getting-started-tunneling" />
176+
<PlatformContent includePath="getting-started-tunneling-splitlayout" />
142177

143-
## Step 6: Verify Your Setup
178+
## Verify Your Setup
144179

145180
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
146181

147182
### Issues
148183

149-
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages:
184+
<SplitLayout>
185+
<SplitSection>
186+
<SplitSectionText>
187+
188+
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages.
189+
190+
<OnboardingOption optionId="performance" hideForThisOption>
191+
Then, open the page in a browser and click the button to trigger a frontend
192+
error.
193+
</OnboardingOption>
194+
195+
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
196+
197+
</SplitSectionText>
198+
<SplitSectionCode>
150199

151200
```javascript {filename:index.(jsx|tsx)}
152201
<button
@@ -159,15 +208,23 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
159208
</button>
160209
```
161210

162-
<OnboardingOption optionId="performance" hideForThisOption>
163-
Open the page in a browser and click the button to trigger a frontend error.
164-
</OnboardingOption>
165-
166-
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
211+
</SplitSectionCode>
212+
</SplitSection>
213+
</SplitLayout>
167214

168215
<OnboardingOption optionId="performance">
169216
### Tracing
170-
To test your tracing configuration, update the previous code snippet and wrap the error in a custom span:
217+
218+
<SplitLayout>
219+
<SplitSection>
220+
<SplitSectionText>
221+
222+
To test your tracing configuration, update the previous code snippet and wrap the error in a custom span.
223+
224+
Then, open the page in a browser and click the button to trigger a frontend error and trace.
225+
226+
</SplitSectionText>
227+
<SplitSectionCode>
171228

172229
```javascript {filename:index.(jsx|tsx)}
173230
<button
@@ -182,13 +239,15 @@ To test your tracing configuration, update the previous code snippet and wrap th
182239
</button>
183240
```
184241

185-
Open the page in a browser and click the button to trigger a frontend error and trace.
242+
</SplitSectionCode>
243+
</SplitSection>
244+
</SplitLayout>
186245

187246
</OnboardingOption>
188247

189248
<OnboardingOption optionId="logs">
190249

191-
<Include name="logs/javascript-quick-start-verify-logs" />
250+
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />
192251

193252
</OnboardingOption>
194253

@@ -214,3 +273,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
214273
- [Get support](https://sentry.zendesk.com/hc/en-us/)
215274

216275
</Expandable>
276+
277+
</StepConnector>

0 commit comments

Comments
 (0)