Skip to content

Commit 6c779fe

Browse files
inventarSarahinventarSarah
authored
docs(js): Update quick start guide splitlayout for Capacitor, Cordova, Electron (#17448)
<!-- 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: - Electron - Cordova - Capacitor Closes: #17414 ## 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 e909efb commit 6c779fe

3 files changed

Lines changed: 260 additions & 37 deletions

File tree

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

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,27 @@ This guide will show you setup instructions for Angular, React, Vue, and Nuxt. I
1616

1717
</Alert>
1818

19-
## Step 1: Install
19+
<StepConnector selector="h2" showNumbers={true}>
20+
21+
## Install
2022

2123
### Install the Sentry SDK
2224

25+
<SplitLayout>
26+
<SplitSection>
27+
<SplitSectionText>
28+
2329
Run the command for your preferred package manager to add Sentry's Capacitor SDK and the SDK for the framework you're using to your application:
2430

31+
</SplitSectionText>
32+
<SplitSectionCode>
33+
2534
<PlatformContent includePath="getting-started-install" />
2635

36+
</SplitSectionCode>
37+
</SplitSection>
38+
</SplitLayout>
39+
2740
<Expandable title="Notes on framework compatibility">
2841

2942
#### Angular
@@ -44,7 +57,7 @@ Both frameworks are fully compatible with the current and beta versions of Sentr
4457

4558
</Expandable>
4659

47-
## Step 2: Configure
60+
## Configure
4861

4962
Choose the features you want to configure, and this guide will show you how:
5063

@@ -62,27 +75,51 @@ Choose the features you want to configure, and this guide will show you how:
6275

6376
### Initialize the Sentry SDK
6477

78+
<SplitLayout>
79+
<SplitSection>
80+
<SplitSectionText>
81+
6582
Initialize Sentry as early as possible in your application's lifecycle.
6683

6784
If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this.
6885

86+
</SplitSectionText>
87+
<SplitSectionCode>
88+
6989
<PlatformContent includePath="getting-started-config" />
7090

71-
## Step 3: Add Readable Stack Traces With Source Maps (Optional)
91+
</SplitSectionCode>
92+
</SplitSection>
93+
</SplitLayout>
7294

73-
<PlatformContent includePath="getting-started-sourcemaps-short-version" />
95+
### Add Readable Stack Traces With Source Maps (Optional)
7496

75-
## Step 4: Provide Native Debug Information for iOS (Optional)
97+
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />
98+
99+
### Provide Native Debug Information for iOS (Optional)
76100

77101
You need to provide debug information to Sentry to make the stack-trace information for native crashes on iOS easier to understand. You can provide debug information by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym).
78102

79-
## Step 5: Verify
103+
## Verify
80104

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

83107
### Issues
84108

85-
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic:
109+
<SplitLayout>
110+
<SplitSection>
111+
<SplitSectionText>
112+
113+
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic.
114+
115+
<OnboardingOption optionId="performance" hideForThisOption>
116+
Open the page in a browser and click the button to trigger a frontend error.
117+
</OnboardingOption>
118+
119+
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
120+
121+
</SplitSectionText>
122+
<SplitSectionCode>
86123

87124
```javascript {tabTitle: Angular 12, 13, 14+}
88125
@Component({
@@ -147,17 +184,23 @@ export default {
147184
</script>
148185
```
149186

150-
<OnboardingOption optionId="performance" hideForThisOption>
151-
Open the page in a browser and click the button to trigger a frontend error.
152-
</OnboardingOption>
153-
154-
<PlatformContent includePath="getting-started-browser-sandbox-warning" />
187+
</SplitSectionCode>
188+
</SplitSection>
189+
</SplitLayout>
155190

156191
<OnboardingOption optionId="performance">
157192

158193
### Tracing
159194

160-
To test your tracing configuration, update the previous code snippet and wrap the error in a custom span:
195+
<SplitLayout>
196+
<SplitSection>
197+
<SplitSectionText>
198+
199+
To test your tracing configuration, update the previous code snippet and wrap the error in a custom span.
200+
Then, open the page in a browser and click the button to trigger a frontend error and trace.
201+
202+
</SplitSectionText>
203+
<SplitSectionCode>
161204

162205
```javascript {tabTitle: Angular 12, 13, 14+}
163206
import * as Sentry from "@sentry/capacitor";
@@ -246,13 +289,15 @@ export default {
246289
</script>
247290
```
248291

249-
Open the page in a browser and click the button to trigger a frontend error and trace.
292+
</SplitSectionCode>
293+
</SplitSection>
294+
</SplitLayout>
250295

251296
</OnboardingOption>
252297

253298
<OnboardingOption optionId="logs">
254299

255-
<Include name="logs/javascript-quick-start-verify-logs" />
300+
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />
256301

257302
</OnboardingOption>
258303

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

281326
</Expandable>
327+
328+
</StepConnector>

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

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ categories:
99
---
1010

1111
<Alert level="warning" title="Deprecation Notice">
12-
Cordova is being superseded by modern alternatives like [Capacitor](https://ionic.io/resources/articles/capacitor-vs-cordova-modern-hybrid-app-development). This SDK is no longer maintained by Sentry. If you are starting a new project or planning a [migration](https://capacitorjs.com/docs/cordova/migration-strategy), consider using [Sentry Capacitor](/platforms/javascript/guides/capacitor/), [Sentry React Native](/platforms/react-native/), or [Sentry Flutter](/platforms/flutter/) instead.
12+
13+
Cordova is being superseded by modern alternatives like [Capacitor](https://ionic.io/resources/articles/capacitor-vs-cordova-modern-hybrid-app-development).
14+
This SDK is no longer maintained by Sentry. If you are starting a new project or planning a [migration](https://capacitorjs.com/docs/cordova/migration-strategy), consider
15+
using [Sentry Capacitor](/platforms/javascript/guides/capacitor/), [Sentry React Native](/platforms/react-native/), or [Sentry Flutter](/platforms/flutter/) instead.
16+
1317
</Alert>
1418

1519
<Alert>
@@ -35,15 +39,17 @@ Cordova is being superseded by modern alternatives like [Capacitor](https://ioni
3539

3640
<PlatformContent includePath="getting-started-prerequisites" />
3741

38-
## Step 1: Install
42+
<StepConnector selector="h2" showNumbers={true}>
43+
44+
## Install
3945

4046
### Install the Sentry SDK
4147

42-
Run this `cordova` command to add the Sentry SDK to your application:
48+
<SplitLayout>
49+
<SplitSection>
50+
<SplitSectionText>
4351

44-
```bash
45-
cordova plugin add sentry-cordova
46-
```
52+
Run this `cordova` command to add the Sentry SDK to your application:
4753

4854
This command starts the Sentry Wizard, which will patch your project (you need to do this only once).
4955
The wizard helps configure your project by:
@@ -52,12 +58,30 @@ The wizard helps configure your project by:
5258
- Adding a build step to Xcode to upload debug symbols for iOS crashes
5359
- Configuring <PlatformLink to="/sourcemaps">source map uploads</PlatformLink> so you can see your original JavaScript code in Sentry instead of minified production code
5460

55-
## Step 2: Configure
61+
</SplitSectionText>
62+
<SplitSectionCode>
63+
64+
```bash
65+
cordova plugin add sentry-cordova
66+
```
67+
68+
</SplitSectionCode>
69+
</SplitSection>
70+
</SplitLayout>
71+
72+
## Configure
5673

5774
### Initialize the Sentry SDK
5875

76+
<SplitLayout>
77+
<SplitSection>
78+
<SplitSectionText>
79+
5980
Initialize Sentry as early as possible in your application. For this, `init` the SDK in the `deviceready` event:
6081

82+
</SplitSectionText>
83+
<SplitSectionCode>
84+
6185
```javascript
6286
onDeviceReady: function() {
6387
var Sentry = cordova.require("sentry-cordova.Sentry");
@@ -71,22 +95,48 @@ onDeviceReady: function() {
7195
}
7296
```
7397

98+
</SplitSectionCode>
99+
</SplitSection>
100+
</SplitLayout>
101+
74102
### Allow the Sentry Domain
75103

104+
<SplitLayout>
105+
<SplitSection>
106+
<SplitSectionText>
107+
76108
Make sure your app can talk to Sentry by adding this to your `config.xml`:
77109

110+
</SplitSectionText>
111+
<SplitSectionCode>
112+
78113
```xml {filename:config.xml}
79114
<access origin="https://*.sentry.io" />
80115
```
81116

82-
## Step 3: Verify Your Setup
117+
</SplitSectionCode>
118+
</SplitSection>
119+
</SplitLayout>
120+
121+
## Verify Your Setup
83122

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

125+
<SplitLayout>
126+
<SplitSection>
127+
<SplitSectionText>
128+
86129
This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
87130

131+
</SplitSectionText>
132+
<SplitSectionCode>
133+
88134
<PlatformContent includePath="getting-started-verify" />
89135

136+
</SplitSectionCode>
137+
</SplitSection>
138+
</SplitLayout>
139+
90140
### View Captured Data in Sentry
91141

92142
To view and resolve the recorded error, log in to [sentry.io](https://sentry.io) and select your project. Clicking the error's title opens a page where you can view detailed information and mark it as resolved.
@@ -108,3 +158,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
108158
- [Get support](https://sentry.zendesk.com/hc/en-us/)
109159

110160
</Expandable>
161+
162+
</StepConnector>

0 commit comments

Comments
 (0)