Skip to content

Commit 74a05b1

Browse files
inventarSarahinventarSarah
authored
docs(js): Update Effect quick start guide and use split layout (#17502)
<!-- 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 Effect quick start guide to use the new split format. While doing that, I thought it was a great opportunity to also update the content a bit to align with our other guides. Closes: #17452 ## 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 e5470f0 commit 74a05b1

2 files changed

Lines changed: 160 additions & 28 deletions

File tree

‎docs/platforms/javascript/guides/effect/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
title: Effect
2-
description: Learn how to set up Sentry in your Effect application with first-class integration for tracing, logging, and metrics.
2+
description: Learn how to set up and configure Sentry in your Effect application, capture your first errors, and view them in Sentry.
33
sdk: sentry.javascript.effect
44
categories:
55
- javascript

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

Lines changed: 159 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
22
title: Effect
33
sdk: sentry.javascript.effect
4-
description: Learn how to set up Sentry in your Effect application with first-class integration for tracing, logging, and metrics.
4+
description: Learn how to set up and configure Sentry in your Effect application, capture your first errors, and view them in Sentry.
55
---
66

7-
<Alert>
7+
<Alert level="warning" title="Important">
88

99
This SDK is currently in **ALPHA**. Alpha features are still in progress, may have bugs, and might include breaking changes.
1010
Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns.
1111

1212
</Alert>
1313

14-
This guide will show you how to integrate Sentry into your [Effect](https://effect.website/) project using the `@sentry/effect` SDK.
15-
1614
<PlatformContent includePath="getting-started-prerequisites" />
1715

18-
## Step 1: Install
16+
<StepConnector selector="h2" showNumbers={true}>
17+
18+
## Install
1919

2020
Choose the features you want to configure, and this guide will show you how:
2121

@@ -27,6 +27,15 @@ Choose the features you want to configure, and this guide will show you how:
2727

2828
### Install the Sentry SDK
2929

30+
<SplitLayout>
31+
<SplitSection>
32+
<SplitSectionText>
33+
34+
Run the command for your preferred package manager to add the Sentry SDK to your application.
35+
36+
</SplitSectionText>
37+
<SplitSectionCode>
38+
3039
```bash {tabTitle:npm}
3140
npm install @sentry/effect --save
3241
```
@@ -39,11 +48,24 @@ yarn add @sentry/effect
3948
pnpm add @sentry/effect
4049
```
4150

42-
## Step 2: Configure
51+
</SplitSectionCode>
52+
</SplitSection>
53+
</SplitLayout>
54+
55+
## Configure
56+
57+
### Initialize Sentry on the Server-Side
58+
59+
<SplitLayout>
60+
<SplitSection>
61+
<SplitSectionText>
4362

44-
The SDK provides an `effectLayer` that initializes Sentry. You can compose it with additional Effect layers to enable tracing, logging, and metrics.
63+
Import and initialize the Sentry SDK in your application's entry point (for example, `main.ts`) using the SDK's `effectLayer`.
4564

46-
### Server Usage
65+
Depending on the features you've selected, merge the `effectLayer` with the corresponding feature layers.
66+
67+
</SplitSectionText>
68+
<SplitSectionCode>
4769

4870
```typescript {filename:main.ts}
4971
import * as Sentry from "@sentry/effect/server";
@@ -62,6 +84,8 @@ const SentryLive = Layer.mergeAll(
6284
// Set tracesSampleRate to 1.0 to capture 100%
6385
// of transactions for tracing.
6486
// We recommend adjusting this value in production.
87+
// Learn more at
88+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
6589
tracesSampleRate: 1.0,
6690
// ___PRODUCT_OPTION_END___ performance
6791
// ___PRODUCT_OPTION_START___ logs
@@ -83,7 +107,7 @@ const SentryLive = Layer.mergeAll(
83107
// ___PRODUCT_OPTION_START___ metrics
84108

85109
// Forward Effect metrics to Sentry
86-
Sentry.SentryEffectMetricsLayer,
110+
Sentry.SentryEffectMetricsLayer
87111
// ___PRODUCT_OPTION_END___ metrics
88112
);
89113

@@ -92,9 +116,24 @@ const MainLive = HttpLive.pipe(Layer.provide(SentryLive));
92116
MainLive.pipe(Layer.launch, NodeRuntime.runMain);
93117
```
94118

95-
### Client Usage
119+
</SplitSectionCode>
120+
</SplitSection>
121+
</SplitLayout>
96122

97-
```typescript {filename:main.ts}
123+
### Initialize Sentry on the Client-Side
124+
125+
<SplitLayout>
126+
<SplitSection>
127+
<SplitSectionText>
128+
129+
Import and initialize the Sentry SDK in your application's entry point (for example, `index.ts`) using the SDK's `effectLayer`.
130+
131+
Depending on the features you've selected, merge the `effectLayer` with the corresponding feature layers.
132+
133+
</SplitSectionText>
134+
<SplitSectionCode>
135+
136+
```typescript {filename:index.ts}
98137
import * as Sentry from "@sentry/effect/client";
99138
// ___PRODUCT_OPTION_START___ logs
100139
import { Logger } from "effect";
@@ -109,6 +148,8 @@ const SentryLive = Layer.mergeAll(
109148
// Set tracesSampleRate to 1.0 to capture 100%
110149
// of transactions for tracing.
111150
// We recommend adjusting this value in production.
151+
// Learn more at
152+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
112153
tracesSampleRate: 1.0,
113154
integrations: [Sentry.browserTracingIntegration()],
114155
// ___PRODUCT_OPTION_END___ performance
@@ -120,36 +161,41 @@ const SentryLive = Layer.mergeAll(
120161
}),
121162
// ___PRODUCT_OPTION_START___ performance
122163

123-
// Enable Effect tracing
164+
// Enable Effect tracing for the browser
124165
Layer.setTracer(Sentry.SentryEffectTracer),
125166
// ___PRODUCT_OPTION_END___ performance
126167
// ___PRODUCT_OPTION_START___ logs
127168

128169
// Forward Effect logs to Sentry
129-
Logger.replace(Logger.defaultLogger, Sentry.SentryEffectLogger),
170+
Logger.replace(Logger.defaultLogger, Sentry.SentryEffectLogger)
130171
// ___PRODUCT_OPTION_END___ logs
131172
);
132173

133174
const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive));
134175
```
135176

136-
## Features
177+
</SplitSectionCode>
178+
</SplitSection>
179+
</SplitLayout>
137180

138-
The SDK provides composable layers for Effect integration:
181+
### Add Readable Stack Traces With Source Maps (Optional)
139182

140-
<OnboardingOption optionId="performance">
141-
- **Tracing** via `Sentry.SentryEffectTracer`: Effect spans are automatically traced as Sentry spans with distributed tracing support
142-
</OnboardingOption>
143-
<OnboardingOption optionId="logs">
144-
- **Logging** via `Sentry.SentryEffectLogger`: Effect logs are forwarded to Sentry (requires `enableLogs: true`)
145-
</OnboardingOption>
146-
<OnboardingOption optionId="metrics">
147-
- **Metrics** via `Sentry.SentryEffectMetricsLayer`: Effect metrics (counters, gauges, histograms) are sent to Sentry
148-
</OnboardingOption>
183+
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />
184+
185+
## Verify
186+
187+
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
149188

150-
## Step 3: Verify
189+
### Issues
151190

152-
Add a test error to verify your setup:
191+
<SplitLayout>
192+
<SplitSection>
193+
<SplitSectionText>
194+
195+
To verify that Sentry captures errors and creates issues in your Sentry project, add a test error:
196+
197+
</SplitSectionText>
198+
<SplitSectionCode>
153199

154200
```typescript
155201
import { Effect } from "effect";
@@ -162,12 +208,96 @@ const program = Effect.gen(function* () {
162208
// Run with your layer that includes Sentry.effectLayer
163209
```
164210

165-
Head over to your project on [Sentry.io](https://sentry.io) to view the collected data.
211+
</SplitSectionCode>
212+
</SplitSection>
213+
</SplitLayout>
214+
215+
<OnboardingOption optionId="performance">
216+
### Tracing
217+
218+
<SplitLayout>
219+
<SplitSection>
220+
<SplitSectionText>
221+
222+
To test your tracing configuration, update the previous code snippet to create a custom span:
223+
224+
</SplitSectionText>
225+
<SplitSectionCode>
226+
227+
```typescript
228+
import { Effect } from "effect";
229+
import * as Sentry from "@sentry/effect/server";
230+
231+
const program = Effect.gen(function* () {
232+
yield* Effect.gen(function* () {
233+
// Simulate some work
234+
yield* Effect.sleep("100 millis");
235+
yield* Effect.fail(new Error("Sentry Test Error"));
236+
}).pipe(
237+
Effect.withSpan("My First Test Transaction", {
238+
attributes: { op: "test" },
239+
})
240+
);
241+
});
242+
```
243+
244+
</SplitSectionCode>
245+
</SplitSection>
246+
</SplitLayout>
247+
248+
</OnboardingOption>
249+
250+
<OnboardingOption optionId="logs">
251+
252+
### Logs <FeatureBadge type="new" size="small" />
253+
254+
<SplitLayout>
255+
<SplitSection>
256+
<SplitSectionText>
257+
To verify that Sentry catches your logs, add some log statements to your application:
258+
259+
</SplitSectionText>
260+
261+
<SplitSectionCode>
262+
263+
```typescript
264+
import { Effect } from "effect";
265+
import * as Sentry from "@sentry/effect/server";
266+
267+
const program = Effect.gen(function* () {
268+
yield* Effect.log("User example action completed");
269+
270+
yield* Effect.logWarning("Slow operation detected").pipe(
271+
Effect.annotateLogs({
272+
operation: "data_fetch",
273+
duration: "3500ms",
274+
})
275+
);
276+
277+
yield* Effect.logError("Validation failed").pipe(
278+
Effect.annotateLogs({
279+
field: "email",
280+
reason: "Invalid email",
281+
})
282+
);
283+
});
284+
```
285+
286+
</SplitSectionCode>
287+
</SplitSection>
288+
</SplitLayout>
289+
290+
</OnboardingOption>
291+
292+
### View Captured Data in Sentry
293+
294+
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).
166295

167296
<Include name="quick-start-locate-data-expandable" />
168297

169298
## Next Steps
170299

300+
- Explore [practical guides](/guides/) on what to monitor, log, track, and investigate after setup
171301
- Learn how to [manually capture errors](/platforms/javascript/guides/effect/usage/)
172302
- Continue to [customize your configuration](/platforms/javascript/guides/effect/configuration/)
173303
- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
@@ -178,3 +308,5 @@ Head over to your project on [Sentry.io](https://sentry.io) to view the collecte
178308
- [Get support](https://sentry.zendesk.com/hc/en-us/)
179309

180310
</Expandable>
311+
312+
</StepConnector>

0 commit comments

Comments
 (0)