Skip to content

js(docs): Use split layout in cloud functions quick start guides #17319

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

Merged
inventarSarah merged 1 commit into from
Apr 14, 2026
+214 −26
Merged

js(docs): Use split layout in cloud functions quick start guides #17319

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
71 changes: 63 additions & 8 deletions docs/platforms/javascript/guides/azure-functions/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ categories:

<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 @@ -23,14 +25,32 @@ 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 `@sentry/node` as a runtime dependency to your application:

</SplitSectionText>
<SplitSectionCode>

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

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

## Configure

<SplitLayout>
<SplitSection>
<SplitSectionText>

Make sure to initialize Sentry at the top of your function file before importing any other modules:

</SplitSectionText>
<SplitSectionCode>

```javascript {tabTitle:async}
const Sentry = require("@sentry/node");
// ___PRODUCT_OPTION_START___ profiling
Expand Down Expand Up @@ -73,10 +93,21 @@ Sentry.init({
// your function code
```

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

### Capture Errors

<SplitLayout>
<SplitSection>
<SplitSectionText>

Because Azure Functions are short-lived, you have to explicitly `flush` Sentry events after calling `captureException`, or they may be lost before being sent to Sentry.

</SplitSectionText>
<SplitSectionCode>

```javascript {tabTitle:async}
const Sentry = require("@sentry/node");

Expand All @@ -98,17 +129,28 @@ module.exports = async function (context, req) {
};
```

## Step 3: Add Readable Stack Traces With Source Maps (Optional)
</SplitSectionCode>
</SplitSection>
</SplitLayout>

### Add Readable Stack Traces With Source Maps (Optional)

<PlatformContent includePath="getting-started-sourcemaps-short-version" />
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />

## Step 4: Verify Your Setup

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

### Issues

First, let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function:
<SplitLayout>
<SplitSection>
<SplitSectionText>

Let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function:

</SplitSectionText>
<SplitSectionCode>

```javascript {tabTitle:async}
const Sentry = require("@sentry/node");
Expand All @@ -134,12 +176,21 @@ module.exports = async function (context, req) {
};
```

Deploy and trigger your function to throw an error.
</SplitSectionCode>
</SplitSection>
</SplitLayout>

<OnboardingOption optionId="performance">
### Tracing
<SplitLayout>
<SplitSection>
<SplitSectionText>

To test tracing, update your function to include a custom span:

</SplitSectionText>
<SplitSectionCode>

```javascript {tabTitle:async}
const Sentry = require("@sentry/node");

Expand All @@ -159,13 +210,15 @@ module.exports = async function (context, req) {
};
```

Deploy and trigger your function to start a child span.
</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>

Expand All @@ -191,3 +244,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>
107 changes: 96 additions & 11 deletions docs/platforms/javascript/guides/firebase/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ This integration is enabled by default, so you get automatic performance monitor

<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 @@ -37,8 +39,17 @@ 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 Firebase Functions project:

</SplitSectionText>
<SplitSectionCode>

<OnboardingOption optionId="profiling" hideForThisOption>

```bash {tabTitle:npm}
npm install @sentry/node --save
```
Expand All @@ -51,9 +62,38 @@ yarn add @sentry/node
pnpm add @sentry/node
```

## Step 2: Configure
</OnboardingOption>

<OnboardingOption optionId="profiling">

```bash {tabTitle:npm}
npm install @sentry/node @sentry/profiling-node --save
```

```bash {tabTitle:yarn}
yarn add @sentry/node @sentry/profiling-node
```

```bash {tabTitle:pnpm}
pnpm add @sentry/node @sentry/profiling-node
```

</OnboardingOption>

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

## Configure

<SplitLayout>
<SplitSection>
<SplitSectionText>

Create an initialization file (for example, `instrument.js`) that imports and initializes Sentry.

Create an initialization file (for example, `instrument.js`) that imports and initializes Sentry. This file must be imported at the very top of your functions entry point, before any other imports.
</SplitSectionText>
<SplitSectionCode>

```javascript {filename:instrument.js}
const Sentry = require("@sentry/node");
Expand Down Expand Up @@ -86,8 +126,22 @@ Sentry.init({
});
```

</SplitSectionCode>
</SplitSection>

<SplitSection>
<SplitSectionText>

Import the initialization file at the very top of your functions entry point (for example, `index.js`), before any other imports:

<Alert>
It's important that you import the initialization file **before** any other `require`
calls, including Firebase imports. This ensures Sentry can properly instrument
all modules.
</Alert>
</SplitSectionText>
<SplitSectionCode>

```javascript {filename:index.js}
require("./instrument"); // Require Sentry initialization first

Expand All @@ -109,24 +163,29 @@ exports.onUserCreated = onDocumentCreated("users/{userId}", async (event) => {
});
```

<Alert>
The key is to import the initialization file **before** any other `require`
calls, including Firebase imports. This ensures Sentry can properly instrument
all modules.
</Alert>
</SplitSectionCode>
</SplitSection>
</SplitLayout>

## 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" />
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />

## Step 4: Verify Your Setup

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

### Issues

<SplitLayout>
<SplitSection>
<SplitSectionText>

Add a test function that throws an error to verify Sentry is capturing errors:

</SplitSectionText>
<SplitSectionCode>

```javascript {filename:index.js}
require("./instrument"); // Import Sentry initialization first
const { onRequest } = require("firebase-functions/https");
Expand All @@ -136,19 +195,39 @@ exports.testSentry = onRequest(async (request, response) => {
});
```

</SplitSectionCode>
</SplitSection>

<SplitSection>
<SplitSectionText>

Deploy your functions and trigger the test endpoint:

</SplitSectionText>
<SplitSectionCode>

```bash
firebase deploy --only functions
curl https://<region>-<project-id>.cloudfunctions.net/testSentry
```

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

<OnboardingOption optionId="performance">

### Tracing

<SplitLayout>
<SplitSection>
<SplitSectionText>

Firebase Functions are automatically instrumented for tracing. You can also create custom spans:

</SplitSectionText>
<SplitSectionCode>

```javascript {filename:index.js}
require("./instrument");
const Sentry = require("@sentry/node");
Expand All @@ -164,11 +243,15 @@ exports.tracedFunction = onRequest(async (request, response) => {
});
```

</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>

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

</Expandable>

</StepConnector>
Loading
Loading