Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ A _Large Render Blocking Asset_ is a performance problem that happens when a lar
The detector for this performance issue looks for specific asset (resource) spans with the following criteria:

- The span operation has to be either a: `resource.link` or `resource.script`.
- The span's `resource.render_blocking_status` data property should either have a value of `blocking` (added by the `@sentry/tracing` SDK, version `7.38.0`), or be missing.
- The span's `resource.render_blocking_status` data property should either have a value of `blocking` (added by the `@sentry/browser` SDK, version `7.38.0`), or be missing.
- The span's `Encoded Body Size` data property has to be over `1MB`.
- The [First Contentful Paint (FCP)](/product/performance/web-vitals/#first-contentful-paint-fcp) of the transaction must be at least `2` seconds (with an upper bound of `10` seconds to eliminate outliers).
- The span's duration must be at least `33%` of the FCP.
Expand Down
10 changes: 0 additions & 10 deletions src/platform-includes/getting-started-config/node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,6 @@ Once this is done, Sentry's Node SDK captures all transactions and unhandled exc
```javascript {tabTitle:ESM}
import * as Sentry from "@sentry/node";

// Importing @sentry/tracing patches the global hub for tracing to work.
import "@sentry/tracing";

// If you want to use `@sentry/tracing` in your project directly, use a named import instead:
// import * as SentryTracing from "@sentry/tracing"
// Unused named imports are not guaranteed to patch the global hub.

Sentry.init({
dsn: "___PUBLIC_DSN___",

Expand All @@ -22,9 +15,6 @@ Sentry.init({
```javascript {tabTitle:CommonJS}
const Sentry = require("@sentry/node");

// Importing @sentry/tracing patches the global hub for tracing to work.
const SentryTracing = require("@sentry/tracing");

Sentry.init({
dsn: "___PUBLIC_DSN___",

Expand Down
4 changes: 2 additions & 2 deletions src/platform-includes/getting-started-install/node.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
```bash {tabTitle: ESM}
# Using yarn
yarn add @sentry/node @sentry/tracing
yarn add @sentry/node
# Using npm
npm install --save @sentry/node @sentry/tracing
npm install --save @sentry/node
```
14 changes: 7 additions & 7 deletions src/platform-includes/performance/connect-services/node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@ const sentryTraceHeader = span.toTraceparent();

requestOptions.headers = {
...requestOptions.headers,
'sentry-trace': sentryTraceHeader,
"sentry-trace": sentryTraceHeader,
};
```

To create a span as a continuation of the trace retrieved from the upstream service, use `extractTraceparentData` function from `@sentry/tracing`:
To create a span as a continuation of the trace retrieved from the upstream service, use `extractTraceparentData` function from `@sentry/node`:

```javascript
import { extractTraceparentData } from "@sentry/tracing";
import { extractTraceparentData } from "@sentry/node";

// The request headers sent by your upstream service to your backend.
const traceparentData = extractTraceparentData(request.headers['sentry-trace']);
const traceparentData = extractTraceparentData(request.headers["sentry-trace"]);

const transaction = Sentry.startTransaction({
op: 'transaction_op',
name: 'transaction_name',
op: "transaction_op",
name: "transaction_name",
...traceparentData,
});
```
```
2 changes: 1 addition & 1 deletion src/platforms/common/performance/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ Learn more about using and customizing the React Profiler in [React Component Tr

## React Router

If you are using `react-router`, we provide <PlatformLink to="/configuration/integrations/react-router/">React Router instrumentation</PlatformLink> to use with our `@sentry/tracing` package.
If you are using `react-router`, we provide <PlatformLink to="/configuration/integrations/react-router/">React Router instrumentation</PlatformLink> to use alongside Sentry Performance Monitoring.

</PlatformSection>

Expand Down
5 changes: 2 additions & 3 deletions src/platforms/javascript/common/install/lazy-load-sentry.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,8 @@ The loader script includes a call to `Sentry.init` with one configuration option

## **Limitations**

Because the loader injects the SDK asynchronously, only *unhandled errors* and *unhandled promise rejections* will be caught and buffered before the SDK is fully loaded. Specifically, the capturing of any [breadcrumb data](../../enriching-events/breadcrumbs/) will not be available until the SDK is fully loaded and initialized. To reduce the amount of time these features are unavailable, set `data-lazy="no"` or call `forceLoad()` as described above.

For similar reasons, the loader is not available in a form which includes either performance monitoring or release health (sessions). If you want performance monitoring, including pageload times, you can [bundle both `@sentry/browser` and `@sentry/tracing` with your app](../npm) or use our CDN, specifically the [bundle that includes tracing features](../cdn/#performance-bundle). For release health, bundling is the only option, though no additional package is needed.
Because the loader injects the SDK asynchronously, only _unhandled errors_ and _unhandled promise rejections_ will be caught and buffered before the SDK is fully loaded. Specifically, the capturing of any [breadcrumb data](../../enriching-events/breadcrumbs/) will not be available until the SDK is fully loaded and initialized. To reduce the amount of time these features are unavailable, set `data-lazy="no"` or call `forceLoad()` as described above.

For similar reasons, the loader is not available in a form which includes either performance monitoring or release health (sessions). If you want performance monitoring, including pageload times, you can [our NPM package](../npm) or use our CDN, specifically the [bundle that includes tracing features](../cdn/#performance-bundle). For release health, bundling is the only option, though no additional package is needed.

If you want to understand the inner workings of the loader itself, you can read the documented source code in all its glory over at the [sentry-javascript repository](https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js).
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,33 @@ name: React
doc_link: https://docs.sentry.io/platforms/javascript/guides/react/
support_level: production
type: framework

---

## Install

Sentry captures data by using an SDK within your application’s runtime.

```bash
# Using yarn
yarn add @sentry/react @sentry/tracing
yarn add @sentry/react

# Using npm
npm install --save @sentry/react @sentry/tracing
npm install --save @sentry/react
```

## Configure

Initialize Sentry as early as possible in your application's lifecycle.

```javascript
import { createRoot } React from "react-dom/client";
import React from "react";
import React from "react";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./App";

Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new BrowserTracing()],
integrations: [new Sentry.BrowserTracing()],
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
});
Expand All @@ -40,14 +40,17 @@ root.render(<App />)
```

## Verify

This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected.

```javascript
return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
```

---

## Next Steps

- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors.
- [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features/): Learn about our first class integration with the React framework.
- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/react/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,33 @@ name: React
doc_link: https://docs.sentry.io/platforms/javascript/guides/react/
support_level: production
type: framework

---

## Install

Sentry captures data by using an SDK within your application’s runtime.

```bash
# Using yarn
yarn add @sentry/react @sentry/tracing
yarn add @sentry/react

# Using npm
npm install --save @sentry/react @sentry/tracing
npm install --save @sentry/react
```

## Configure

Initialize Sentry as early as possible in your application's lifecycle.

```javascript
import { createRoot } React from "react-dom/client";
import React from "react";
import React from "react";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./App";

Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new BrowserTracing(), new Sentry.Replay()],
integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
// Session Replay
Expand All @@ -43,13 +43,16 @@ root.render(<App />)
```

## Verify

This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected.

```javascript
return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
```

---

## Next Steps

- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors.
- [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features/): Learn about our first class integration with the React framework.
6 changes: 2 additions & 4 deletions src/wizard/node/express.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,21 @@ Add `@sentry/node` as a dependency:

```bash
# Using yarn
yarn add @sentry/node @sentry/tracing
yarn add @sentry/node

# Using npm
npm install --save @sentry/node @sentry/tracing
npm install --save @sentry/node
```

Sentry should be initialized as early in your app as possible.

```javascript
import express from "express";
import * as Sentry from "@sentry/node";
import * as Tracing from "@sentry/tracing";

// or using CommonJS
// const express = require('express');
// const Sentry = require('@sentry/node');
// const Tracing = require("@sentry/tracing");

const app = express();

Expand Down
8 changes: 2 additions & 6 deletions src/wizard/node/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ Add `@sentry/node` as a dependency:

```bash
# Using yarn
yarn add @sentry/node @sentry/tracing
yarn add @sentry/node

# Using npm
npm install --save @sentry/node @sentry/tracing
npm install --save @sentry/node
```

You need to inform the Sentry Node SDK about your DSN:
Expand All @@ -22,10 +22,6 @@ const Sentry = require("@sentry/node");
// or use es6 import statements
// import * as Sentry from '@sentry/node';

const Tracing = require("@sentry/tracing");
// or use es6 import statements
// import * as Tracing from '@sentry/tracing';

Sentry.init({
dsn: "___PUBLIC_DSN___",

Expand Down
6 changes: 2 additions & 4 deletions src/wizard/node/serverlesscloud.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,21 @@ support_level: production
type: framework
---

Add `@sentry/node` and `@sentry/tracing` as dependencies:
Add `@sentry/node` as a dependency:

```bash
cloud install @sentry/node @sentry/tracing
cloud install @sentry/node:
```

Sentry should be initialized as early in your app as possible.

```javascript
import api from "@serverless/cloud";
import * as Sentry from "@sentry/node";
import * as Tracing from "@sentry/tracing";

// or using CommonJS
// const api = require("@serverless/cloud");
// const Sentry = require('@sentry/node');
// const Tracing = require("@sentry/tracing");

Sentry.init({
dsn: "___PUBLIC_DSN___",
Expand Down