Skip to content

docs(js): Use split layout in node quick start guides #17360

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.

Sign up for GitHub

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

Open
inventarSarah wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs(js): Use split layout in node quick start guides #17360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ description: "Learn how to instrument your Hono app on Cloudflare Workers and ca
migrate to `@sentry/cloudflare` directly as shown in this guide.
</Alert>

## Step 1: Install
<StepConnector selector="h2" showNumbers={true}>

## Install

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

Expand All @@ -24,17 +26,31 @@ Choose the features you want to configure, and this guide will show you how:

### Install the Sentry SDK

<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the command for your preferred package manager to add the Sentry SDK to your application:

</SplitSectionText>
<SplitSectionCode>

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

## Step 2: Configure
</SplitSectionCode>
</SplitSection>
</SplitLayout>

## Configure

The main Sentry configuration should happen as early as possible in your app's lifecycle.

### Wrangler Configuration

<PlatformContent includePath="getting-started-config" />
<PlatformContent
includePath="getting-started-config"
platform="javascript.cloudflare.splitlayout"
/>

### Initialize the Sentry SDK

Expand All @@ -45,8 +61,15 @@ The main Sentry configuration should happen as early as possible in your app's l

### Migration from Community Middleware

<SplitLayout>
<SplitSection>
<SplitSectionText>

If you're currently using the `@hono/sentry` middleware, migrate to the official `@sentry/cloudflare` middleware:

</SplitSectionText>
<SplitSectionCode>

```javascript
// New approach using official Sentry SDK
import { Hono } from 'hono';
Expand All @@ -64,19 +87,23 @@ export default Sentry.withSentry(
);
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<PlatformContent
includePath="getting-started-capture-errors"
platform="javascript.hono"
/>

## Step 3: Add Readable Stack Traces With Source Maps (Optional)
### Add Readable Stack Traces With Source Maps (Optional)

<PlatformContent
includePath="getting-started-sourcemaps-short-version"
platform="javascript.hono"
includePath="getting-started-sourcemaps-short-version-splitlayout"
platform="javascript"
/>

## Step 4: Verify Your Setup
## Verify Your Setup

<PlatformContent
includePath="getting-started-verify"
Expand All @@ -103,3 +130,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepConnector>
79 changes: 10 additions & 69 deletions docs/platforms/javascript/guides/hono/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,84 +11,25 @@ categories:

<PlatformContent includePath="getting-started-primer" />

<Alert type="warning" title="Runtime-Specific Setup">
This guide focuses on the **Node.js runtime** for Hono. For other runtimes, see the links below.
If you are using the `@sentry/cloudflare` middleware, see the [Hono on Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/hono/).
<Alert level="warning" title="Runtime-Specific Setup">
This guide focuses on the **Node.js runtime** for Hono. For other runtimes,
see the links below.
</Alert>

## Runtime Support

Hono works across multiple JavaScript runtimes. Choose the appropriate Sentry SDK for your environment:

- **Node.js**: Use `@sentry/node` (this guide)
- **Cloudflare Workers**: Use `@sentry/cloudflare` - see our [Hono on Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/hono/)
- **Deno**: Use `@sentry/deno` - see our [Deno guide](/platforms/javascript/guides/deno/) (Beta)
- **Bun**: Use `@sentry/bun` - see our [Bun guide](/platforms/javascript/guides/bun/)
- **Cloudflare Workers**: Use `@sentry/cloudflare` – see our [Hono on Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/hono/)
- **Deno**: Use `@sentry/deno` – see our [Deno guide](/platforms/javascript/guides/deno/) (Beta)
- **Bun**: Use `@sentry/bun` – see our [Bun guide](/platforms/javascript/guides/bun/)

<Alert>
The community middleware `@hono/sentry` has been deprecated in favor of using Sentry's official
packages, which provide better performance and more features. If you're currently using `@hono/sentry` middleware, you'll need to migrate to `@sentry/cloudflare`.
The community middleware `@hono/sentry` has been deprecated in favor of using
Sentry's official packages, which provide better performance and more
features. If you're currently using `@hono/sentry` middleware, you'll need to
migrate to `@sentry/cloudflare`.
</Alert>

## Runtime-Specific Setup

### Node.js Runtime (This Guide)

This guide focuses on Node.js. The setup uses `@sentry/node` and follows standard Node.js patterns.

<PlatformContent includePath="getting-started-node" />

### Other Runtimes

For other runtimes, use the appropriate Sentry SDK:

<Expandable title="Deno Runtime (Beta)">
```javascript
// For Deno, use @sentry/deno (currently in Beta)
import * as Sentry from "npm:@sentry/deno";
import { Hono } from "hono";

Sentry.init({
dsn: "___PUBLIC_DSN___",
tracesSampleRate: 1.0,
});

const app = new Hono();
// Your Hono app setup...
```
</Expandable>

<Expandable title="Bun Runtime">
```javascript
// For Bun, use @sentry/bun
import * as Sentry from "@sentry/bun";
import { Hono } from "hono";

// Initialize Sentry before importing other modules
Sentry.init({
dsn: "___PUBLIC_DSN___",
tracesSampleRate: 1.0,
});

const app = new Hono();
// Your Hono app setup...
```
</Expandable>

<Expandable title="Cloudflare Workers">
```javascript
// For Cloudflare Workers, use @sentry/cloudflare
import * as Sentry from "@sentry/cloudflare";
import { Hono } from "hono";

const app = new Hono();

export default Sentry.withSentry(
(env: Env) => ({
dsn: "___PUBLIC_DSN___",
tracesSampleRate: 1.0,
}),
app
);
```
</Expandable>
2 changes: 1 addition & 1 deletion docs/platforms/javascript/guides/koa/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Koa
description: "This guide explains how to set up Sentry in your Koa application."
description: "Learn how to manually set up Sentry in your Kono app and capture your first errors."
sdk: sentry.javascript.node
fallbackGuide: javascript.node
categories:
Expand Down
10 changes: 10 additions & 0 deletions platform-includes/getting-started-config/javascript.cloudflare.hono.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<SplitLayout>
<SplitSection>
<SplitSectionText>

Wrap your Hono app with the `withSentry` function, for example, in your `index.ts` file, to initialize the Sentry SDK and hook into the environment:

</SplitSectionText>
<SplitSectionCode>

```typescript {filename:index.ts}
import { Env, Hono } from "hono";
import * as Sentry from "@sentry/cloudflare";
Expand Down Expand Up @@ -33,3 +40,6 @@ export default Sentry.withSentry(
);
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>
63 changes: 53 additions & 10 deletions platform-includes/getting-started-node/javascript.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<PlatformContent includePath="getting-started-prerequisites" />

## Step 1: Install
<StepConnector selector="h2" showNumbers={true}>

## Install

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

Expand All @@ -12,18 +14,40 @@ Choose the features you want to configure, and this guide will show you how:

### Install the Sentry SDK

<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the command for your preferred package manager to add the Sentry SDK to your application:

</SplitSectionText>
<SplitSectionCode>

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

## Step 2: Configure
</SplitSectionCode>
</SplitSection>
</SplitLayout>

## Configure

### Initialize the Sentry SDK

<SplitLayout>
<SplitSection>
<SplitSectionText>

To import and initialize Sentry, create a file named `instrument.(js|mjs)` in the root directory of your project and add the following code:

</SplitSectionText>
<SplitSectionCode>

<PlatformContent includePath="getting-started-config" />

</SplitSectionCode>
</SplitSection>
</SplitLayout>

### Apply Instrumentation to Your App

<Alert level='warning'>
Expand All @@ -40,31 +64,48 @@ The method for applying instrumentation depends on whether your application uses

#### CommonJS

<SplitLayout>
<SplitSection>
<SplitSectionText>

Require the `instrument.js` file before any other modules:

</SplitSectionText>
<SplitSectionCode>

<PlatformContent includePath="getting-started-use" />

</SplitSectionCode>
</SplitSection>
</SplitLayout>

#### ESM

<SplitLayout>
<SplitSection>
<SplitSectionText>

When running your application in ESM mode, use the [--import](https://nodejs.org/api/cli.html#--importmodule) command line option and point it to `instrument.mjs` to load the module before the application starts:

</SplitSectionText>
<SplitSectionCode>

```bash
# Note: This is only available for Node v18.19.0 onwards.
node --import ./instrument.mjs app.mjs
```

<PlatformContent includePath="getting-started-capture-errors" />
</SplitSectionCode>
</SplitSection>
</SplitLayout>

## Step 3: Add Readable Stack Traces With Source Maps (Optional)
<PlatformContent includePath="getting-started-capture-errors" />

The stack traces in your Sentry errors probably won't look like your actual code. To fix this, upload your source maps to Sentry.
The easiest way to do this is by using the Sentry Wizard:
### Add Readable Stack Traces With Source Maps (Optional)

```bash
npx @sentry/wizard@latest -i sourcemaps
```
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />

## Step 4: Verify Your Setup
## Verify Your Setup

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

Expand Down Expand Up @@ -96,3 +137,5 @@ Our next recommended steps for you are:
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepConnector>
5 changes: 0 additions & 5 deletions platform-includes/getting-started-sourcemaps-short-version/javascript.hono.mdx
View file
Open in desktop

This file was deleted.

24 changes: 23 additions & 1 deletion platform-includes/getting-started-verify/javascript.connect.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@
### Issues

<SplitLayout>
<SplitSection>
<SplitSectionText>

First, let's make sure Sentry is correctly capturing errors and creating issues in your project. Add the following code snippet to your main application file; it defines a route that will deliberately trigger an error when called:

</SplitSectionText>
<SplitSectionCode>

```javascript
app.use("/debug-sentry", (req, res) => {
throw new Error("My first Sentry error!");
});
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<OnboardingOption optionId="performance">

### Tracing

<SplitLayout>
<SplitSection>
<SplitSectionText>

To test your tracing configuration, update the previous code snippet by starting a trace to measure the time it takes to execute your code:

</SplitSectionText>
<SplitSectionCode>

```javascript
app.use("/debug-sentry", async (req, res) => {
await Sentry.startSpan(
Expand All @@ -29,10 +47,14 @@ app.use("/debug-sentry", async (req, res) => {
});
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

</OnboardingOption>

<OnboardingOption optionId="logs">

<Include name="logs/javascript-quick-start-verify-logs" />
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />

</OnboardingOption>
Loading
Loading