Skip to content

Commit

Permalink
feat: Add initial documentation for cloudflare sdk (#11145)
Browse files Browse the repository at this point in the history
  • Loading branch information
AbhiPrasad authored Aug 26, 2024
1 parent 1867a86 commit 3335854
Show file tree
Hide file tree
Showing 61 changed files with 370 additions and 46 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.astro
- javascript.bun
- javascript.deno
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.cloudflare
- javascript.bun
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ supported:
- javascript.remix
- javascript.astro
- javascript.bun
- javascript.cloudflare
- javascript.deno
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ notSupported:
- javascript.nestjs
- javascript.deno
- javascript.bun
- javascript.deno
- javascript.bun
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.astro
- javascript.bun
- javascript.deno
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.astro
- javascript.bun
- javascript.deno
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.bun
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.deno
- javascript.bun
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.nestjs
- javascript.deno
- javascript.bun
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ supported:
- javascript.sveltekit
- javascript.remix
- javascript.astro
- javascript.bun
- javascript.deno
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.astro
- javascript.deno
- javascript.bun
- javascript.cloudflare
---

<Alert level="info">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.astro
- javascript.bun
- javascript.deno
- javascript.cloudflare
---

<Alert level="info">
Expand Down
5 changes: 3 additions & 2 deletions docs/platforms/javascript/common/crons/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ supported:
- javascript.koa
- javascript.nestjs
- javascript.nuxt
- javascript.cloudflare
---

Once implemented, it'll allow you to get alerts and metrics to help you solve errors, detect timeouts, and prevent disruptions to your service.

<PlatformSection supported={["javascript.nextjs", "javascript.sveltekit", "javascript.remix", "javascript.astro", "javascript.bun", "javascript.deno", 'javascript.node', 'javascript.aws-lambda', 'javascript.azure-functions', 'javascript.connect', 'javascript.express', "javascript.fastify", 'javascript.gcp-functions', 'javascript.hapi', 'javascript.koa', 'javascript.nestjs']}>
<PlatformSection supported={['javascript.nextjs', 'javascript.sveltekit', 'javascript.remix', 'javascript.astro', 'javascript.bun', 'javascript.deno', 'javascript.cloudflare', 'javascript.node', 'javascript.aws-lambda', 'javascript.azure-functions', 'javascript.connect', 'javascript.express', "javascript.fastify", 'javascript.gcp-functions', 'javascript.hapi', 'javascript.koa', 'javascript.nestjs']}>

## Requirements

Expand All @@ -34,7 +35,7 @@ Once implemented, it'll allow you to get alerts and metrics to help you solve er

</PlatformSection>

<PlatformSection notSupported={["javascript.nextjs", "javascript.sveltekit", "javascript.remix", "javascript.astro", "javascript.bun", "javascript.deno", 'javascript.node', 'javascript.aws-lambda', 'javascript.azure-functions', 'javascript.connect', 'javascript.express', 'javascript.fastify', 'javascript.gcp-functions', 'javascript.hapi', 'javascript.koa', 'javascript.nestjs']}>
<PlatformSection notSupported={['javascript.nextjs', 'javascript.sveltekit', 'javascript.remix', 'javascript.astro', 'javascript.bun', 'javascript.deno', 'javascript.cloudflare', 'javascript.node', 'javascript.aws-lambda', 'javascript.azure-functions', 'javascript.connect', 'javascript.express', 'javascript.fastify', 'javascript.gcp-functions', 'javascript.hapi', 'javascript.koa', 'javascript.nestjs']}>

## Requirements

Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/crons/troubleshooting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ supported:
- javascript.koa
- javascript.nestjs
- javascript.nuxt
- javascript.cloudflare
---

<PlatformCategorySection supported={['server', 'serverless']}>
Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/install/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ notSupported:
- javascript.aws-lambda
- javascript.azure-functions
- javascript.gcp-functions
- javascript.cloudflare
---

<PageGrid />
Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/install/loader.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
---

The Loader Script is the easiest way to initialize the Sentry SDK. The Loader Script also automatically keeps your Sentry SDK up to date and offers configuration for different Sentry features.
Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/install/npm.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
---

<PlatformContent includePath="getting-started-install" />
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/profiling/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ notSupported:
- javascript.bun
- javascript.cordova
- javascript.deno
- javascript.cloudflare
description: "Collect & view performance insights for JavaScript programs with Sentry’s JavaScript Profiling integration. Get started with browser profiling here."
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
description: "Learn about the general Session Replay configuration fields."
---

Expand Down
3 changes: 2 additions & 1 deletion docs/platforms/javascript/common/session-replay/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
description: "Learn how to enable Session Replay in your app if it is not already set up."
---

Expand Down Expand Up @@ -44,7 +45,7 @@ To set up the integration, add the following to your Sentry initialization. Ther
fallbackPlatform="javascript"
/>

<PlatformSection notSupported={["javascript.deno", "javascript.bun", "javascript.wasm", "javascript.capacitor", "javascript.electron"]}>
<PlatformSection notSupported={["javascript.deno", "javascript.bun", "javascript.wasm", "javascript.capacitor", "javascript.electron", "javascript.cloudflare"]}>

### Canvas Recording

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
description: "Learn about the Issue types that Session Replay can detect."
---

Expand All @@ -32,7 +33,8 @@ You can configure which issue types are created by visiting Project Settings > R
Sometimes rage or dead clicks will be detected on elements which are not expected to mutate the DOM, like a "Print" or "Download" button. In this case, you can configure `slowClickIgnoreSelectors`, which will prevent those buttons from generating new issues.

<Note>
You'll need to have SDK version 7.60.1 or higher in order to be able to see **rage click issues**.
You'll need to have SDK version 7.60.1 or higher in order to be able to see
**rage click issues**.
</Note>

## Configuring Hydration Errors
Expand All @@ -52,5 +54,6 @@ You can have your preferences configured in one of four ways:
| disabled | disabled | Issue created from captured error data. |

<Note>
You'll need to have SDK version 7.87.0 or higher in order to be able to detect **hydration error issues** from replay data.
You'll need to have SDK version 7.87.0 or higher in order to be able to detect
**hydration error issues** from replay data.
</Note>
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
description: "Configuring Session Replay to maintain user and data privacy."
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
excerpt: ""
description: "Troubleshooting Session Replay-specific Issues"
---
Expand All @@ -31,6 +32,7 @@ If you are on a supported SDK version and your `canvas` elements still aren't ge
<Expandable title="Replay is slowing down my `canvas`" permalink>

The integration needs to enable `preserveDrawingBuffer` to export images from 3D and WebGL canvases. This can negatively affect canvas performance. If your canvas application is impacted by enabling `preserveDrawingBuffer`, you'll need to <PlatformLink to="/session-replay/#canvas-recording-performance">enable manual snapshotting</PlatformLink> and call a `snapshot()` method inside of your re-paint loop.

</Expandable>

<Expandable title="My custom CSS/images/fonts/media aren't appearing when I view the Replay" permalink>
Expand All @@ -48,7 +50,7 @@ Due to [browser limitations](https://developer.mozilla.org/en-US/docs/Web/SVG/El

<Expandable title="Why am I seeing too many or too few rage clicks?" permalink>

There might be fewer rage clicks than you expect if the user stopped waiting for the site to respond before the 7 second threshold. This is why the rage click issues that you *do* see are so valuable, because the user that clicked at least 3 times and continued waiting at least 7 seconds for the site to respond is likely very frustrated.
There might be fewer rage clicks than you expect if the user stopped waiting for the site to respond before the 7 second threshold. This is why the rage click issues that you _do_ see are so valuable, because the user that clicked at least 3 times and continued waiting at least 7 seconds for the site to respond is likely very frustrated.

You might also see more rage clicks than you expected from buttons that don't trigger a DOM mutation or page scroll (such as "Print" and "Download" buttons). There is no reliable way for the SDK to detect that a download or print has initiated, so a slow click might be generated even if the button is not actually "dead". For these cases, you can configure the SDK via `slowClickIgnoreSelectors` - see [Configuration](/platforms/javascript/session-replay/configuration/) for more details.

Expand All @@ -66,7 +68,6 @@ Sentry.replayIntegration({

</Expandable>


<Expandable title="Why can't I see the full HTTP request body or all the headers?" permalink>

By default, Replay will capture basic information about all outgoing fetch and XHR requests in your application. This includes the URL, request and response body size, method, and status code.
Expand Down Expand Up @@ -103,6 +104,7 @@ We're always working on ways to reduce the bundle size. Additionally, there are
The Sentry SDK attempts to minimize potential [performance overhead](/product/explore/session-replay/performance-overhead/#how-is-session-replay-optimized) in a few different ways. For example, by keeping track of the number of DOM mutations that are happening then disabling recording when a large number of changes are detected. Many simultaneous mutations can slow down a web page whether Session Replay is installed or not, but when a large number of mutations happen, the Replay client can incur an additional slowdown because it records each change.

If you're seeing the "A large number of mutations was detected" message while watching a replay, it means that your page could be optimized. For example, a dropdown list with thousands of entries could be refactored so that rows are virtualized where only the visible rows are rendered in the DOM. Another potential solution is to paginate the results fetch more data as the user scrolls through it. The SDK has a <PlatformLink to="/session-replay/configuration/#mutation-limits">configuration</PlatformLink> that allows you to configure the limits before recording stops.

</Expandable>

<Expandable title="Text in the iframe isn't masked" permalink>
Expand Down Expand Up @@ -142,12 +144,17 @@ With this configuration, Replay is able to capture response bodies from Apollo C
</Expandable>

<Expandable title="`console` calls are triggering replays to record" permalink>
Using the [`captureConsoleIntegration`](https://docs.sentry.io/platforms/javascript/configuration/integrations/captureconsole/) can cause replays to record as if you have triggered an exception. You can use [`beforeErrorSampling`](https://docs.sentry.io/platforms/javascript/guides/sveltekit/session-replay/understanding-sessions/#ignore-certain-errors-for-error-sampling) to avoid this behavior.
Using the
[`captureConsoleIntegration`](https://docs.sentry.io/platforms/javascript/configuration/integrations/captureconsole/)
can cause replays to record as if you have triggered an exception. You can use
[`beforeErrorSampling`](https://docs.sentry.io/platforms/javascript/guides/sveltekit/session-replay/understanding-sessions/#ignore-certain-errors-for-error-sampling)
to avoid this behavior.
</Expandable>

<Expandable title="Clicks are incorrectly resulting in a dead or rage click" permalink>

There are certain cases (such as clicking a button to play an audio clip) where Sentry incorrectly records a click as a dead click (note: rage clicks are a subset of dead clicks). As a workaround, you can use the [`slowClickIgnoreSelector`](/platforms/javascript/session-replay/configuration/#general-integration-configuration) configuration option to ignore dead clicks for specific selectors.

If you want to turn off [rage click issues](/product/issues/issue-details/replay-issues/) altogether, you can disable them by going to the **Settings** page in Sentry, clicking "Projects", and selecting the project for which you want to disable rage clicks. From here, select "Replays" under the "PROCESSING" heading and toggle off "Create Rage Click Issues".

</Expandable>
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ notSupported:
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.cloudflare
description: "Learn about customizing sessions with the Session Replay SDK."
---

Expand Down Expand Up @@ -198,7 +199,6 @@ replayIntegration({
If you return `false` from this method for a given error, we will not check the error sample rate for this error.
If you return `true`, we will continue to check the error sample rate as normal.
### Connect Replays with Support Software
Replays do not need to be connected to an application error, they can also be used to supplement your support tickets.
Expand Down Expand Up @@ -227,13 +227,13 @@ Sentry.init({
* Your widget will need to have an event/hook to trigger flushing the replay to
* Sentry.
*/
MySupportWidget.on('open', () => {
MySupportWidget.on("open", () => {
const replay = Sentry.getReplay();
// Send replay to Sentry
replay.flush();
// Retrieve the replay id that was saved and attach it to your support widget
const replayId = replay.getReplayId();
MySupportWidget.setTag('replayId', replayId);
MySupportWidget.setTag("replayId", replayId);
});

/**
Expand Down
4 changes: 3 additions & 1 deletion docs/platforms/javascript/common/tracing/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ If you’re adopting Tracing in a high-throughput environment, we recommend test

</Note>

<PlatformSection notSupported={["javascript.deno", "javascript.bun"]}>
<PlatformSection
notSupported={["javascript.deno", "javascript.bun", "javascript.cloudflare"]}
>
<Alert level="note">
Sentry can integrate with <strong>OpenTelemetry</strong>. You can find more
information about it
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ supported:
- javascript.solidstart
- javascript.sveltekit
- javascript.remix
- javascript.cloudflare
---

A cache can be used to speed up data retrieval, thereby improving application performance. Because instead of getting data from a potentially slow data layer, your application will be getting data from memory (in a best case scenario). Caching can speed up read-heavy workloads for applications like Q&A portals, gaming, media sharing, and social networking.
Expand All @@ -35,10 +36,10 @@ If you're using a Redis client like `ioredis` or `redis` to cache your data, it
Sentry.init({
integrations: [
redisIntegration({
cachePrefixes: ['posts:', 'authors:']
})
]
})
cachePrefixes: ["posts:", "authors:"],
}),
],
});
```

## Manual Instrumentation
Expand Down
Loading

0 comments on commit 3335854

Please sign in to comment.