diff --git a/docs/contributing/pages/placeholders.mdx b/docs/contributing/pages/placeholders.mdx new file mode 100644 index 00000000000000..b848fd9f39ed03 --- /dev/null +++ b/docs/contributing/pages/placeholders.mdx @@ -0,0 +1,12 @@ +--- +title: Placeholders +noindex: true +--- + + +The following placeholders are available in code blocks and will be replaced at build time: + +- `___JS_PACKAGE___`: The current JavaScript package. (e.g. `@sentry/react`) +- `___PUBLIC_DSN___`: The public DSN for a Sentry project. (will display a dropdown of available projects if the user is logged in) + +All placeholders are wrapped with **three underscores**. diff --git a/docs/platforms/javascript/common/session-replay/index.mdx b/docs/platforms/javascript/common/session-replay/index.mdx index 78202a8b41026b..08588322fb1f8b 100644 --- a/docs/platforms/javascript/common/session-replay/index.mdx +++ b/docs/platforms/javascript/common/session-replay/index.mdx @@ -62,7 +62,62 @@ There is currently no PII scrubbing in canvas recordings! If you want to record HTML canvas elements, you'll need to add an additional integration in your Sentry configuration. The canvas integration is exported from the browser SDK, so no additional package is required. Canvas recording is opt-in and will be tree-shaken from your bundle if it's not being used: - + +```javascript {13} +import * as Sentry from "___JS_PACKAGE___"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + + integrations: [ + // Keep the Replay integration as before + Sentry.replayIntegration(), + + // The following is all you need to enable canvas recording with Replay + Sentry.replayCanvasIntegration(), + ], +}); +``` + + + +```javascript {tabTitle: npm} {13} +import * as Sentry from "___JS_PACKAGE___"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + + integrations: [ + // Keep the Replay integration as before + Sentry.replayIntegration(), + + // The following is all you need to enable canvas recording with Replay + Sentry.replayCanvasIntegration(), + ], +}); +``` + +```html {tabTitle: CDN} + + + + + +``` + + #### 3D and WebGL Canvases diff --git a/docs/platforms/javascript/guides/aws-lambda/index.mdx b/docs/platforms/javascript/guides/aws-lambda/index.mdx index 4de8d75745ece9..563a65a0c5c5bf 100644 --- a/docs/platforms/javascript/guides/aws-lambda/index.mdx +++ b/docs/platforms/javascript/guides/aws-lambda/index.mdx @@ -1,7 +1,7 @@ --- title: AWS Lambda description: "Learn about Sentry's integration with AWS Lambda." -sdk: sentry.javascript.node +sdk: sentry.javascript.aws-serverless fallbackGuide: javascript.node categories: - serverless diff --git a/docs/platforms/javascript/guides/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 0df77e7f3e09e1..d379a82f972282 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -1,7 +1,7 @@ --- title: Google Cloud Functions description: "Learn how to use Sentry's Google Cloud Functions SDK." -sdk: sentry.javascript.node +sdk: sentry.javascript.google-cloud-serverless fallbackGuide: javascript.node categories: - serverless diff --git a/platform-includes/session-replay/setup-canvas/javascript.angular.mdx b/platform-includes/session-replay/setup-canvas/javascript.angular.mdx deleted file mode 100644 index ed469fab1dded6..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.angular.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} {filename: main.ts} -import * as Sentry from "@sentry/angular"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.astro.mdx b/platform-includes/session-replay/setup-canvas/javascript.astro.mdx deleted file mode 100644 index 662d85589ce8b8..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.astro.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} {filename:sentry.client.config.js} -import * as Sentry from "@sentry/astro"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.ember.mdx b/platform-includes/session-replay/setup-canvas/javascript.ember.mdx deleted file mode 100644 index f1c579ad20d17f..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.ember.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/ember"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx b/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx deleted file mode 100644 index 1c0274fe5faccf..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/gatsby"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.mdx b/platform-includes/session-replay/setup-canvas/javascript.mdx deleted file mode 100644 index 05a3a6d937504e..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```javascript {14} -// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser -import * as Sentry from "@sentry/browser"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` - -```html {tabTitle: CDN} - - - - - -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx b/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx deleted file mode 100644 index 1f99c659448766..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/nextjs"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx b/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx deleted file mode 100644 index e2c2d93052f41d..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} {filename:sentry.client.config.ts} -import * as Sentry from "@sentry/nuxt"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.react.mdx b/platform-includes/session-replay/setup-canvas/javascript.react.mdx deleted file mode 100644 index 75b070edcc1cf3..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.react.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/react"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.remix.mdx b/platform-includes/session-replay/setup-canvas/javascript.remix.mdx deleted file mode 100644 index 9baaa5d5603950..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.remix.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/remix"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx b/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx deleted file mode 100644 index 058256f9530c5c..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/svelte"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx b/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx deleted file mode 100644 index 27feaef0e03e5b..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/sveltekit"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` - -```html {tabTitle: CDN} - - - - - -``` diff --git a/platform-includes/session-replay/setup-canvas/javascript.vue.mdx b/platform-includes/session-replay/setup-canvas/javascript.vue.mdx deleted file mode 100644 index 99657a2f47fd08..00000000000000 --- a/platform-includes/session-replay/setup-canvas/javascript.vue.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```javascript {13} -import * as Sentry from "@sentry/vue"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - integrations: [ - // Keep the Replay integration as before - Sentry.replayIntegration(), - - // The following is all you need to enable canvas recording with Replay - Sentry.replayCanvasIntegration(), - ], -}); -``` diff --git a/src/components/codeBlock/index.tsx b/src/components/codeBlock/index.tsx index cbc88eaf4c9db5..191319065f6908 100644 --- a/src/components/codeBlock/index.tsx +++ b/src/components/codeBlock/index.tsx @@ -1,10 +1,11 @@ 'use client'; -import {useEffect, useRef, useState} from 'react'; +import {useContext, useEffect, useRef, useState} from 'react'; import {Clipboard} from 'react-feather'; import styles from './code-blocks.module.scss'; +import {CodeContext} from '../codeContext'; import {makeKeywordsClickable} from '../codeKeywords'; export interface CodeBlockProps { @@ -17,6 +18,7 @@ export interface CodeBlockProps { export function CodeBlock({filename, language, children}: CodeBlockProps) { const [showCopied, setShowCopied] = useState(false); const codeRef = useRef(null); + const codeContext = useContext(CodeContext); // Show the copy button after js has loaded // otherwise the copy button will not work @@ -57,7 +59,9 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
Copied
-
{makeKeywordsClickable(children)}
+
+ {makeKeywordsClickable(children, codeContext?.currentJsPackage)} +
); } diff --git a/src/components/codeContext.tsx b/src/components/codeContext.tsx index 357dd8454462ec..f7d63128ff5d9f 100644 --- a/src/components/codeContext.tsx +++ b/src/components/codeContext.tsx @@ -105,6 +105,7 @@ type CodeContextType = { ]; storedCodeSelection: SelectedCodeTabs; updateCodeSelection: (selection: CodeSelection) => void; + currentJsPackage?: string; }; export const CodeContext = createContext(null); @@ -293,7 +294,13 @@ const getLocallyStoredSelections = (): SelectedCodeTabs => { return {}; }; -export function CodeContextProvider({children}: {children: React.ReactNode}) { +export function CodeContextProvider({ + children, + currentJsPackage, +}: { + children: React.ReactNode; + currentJsPackage?: string; +}) { const [codeKeywords, setCodeKeywords] = useState(cachedCodeKeywords ?? DEFAULTS); const [isLoading, setIsLoading] = useState(cachedCodeKeywords ? false : true); const [storedCodeSelection, setStoredCodeSelection] = useState({}); @@ -337,6 +344,7 @@ export function CodeContextProvider({children}: {children: React.ReactNode}) { const sharedKeywordSelection = useState>({}); const result: CodeContextType = { + currentJsPackage, codeKeywords, storedCodeSelection, updateCodeSelection, diff --git a/src/components/codeKeywords/codeKeywords.tsx b/src/components/codeKeywords/codeKeywords.tsx index 6ae34e6b1c60a7..7863d22a8d3b60 100644 --- a/src/components/codeKeywords/codeKeywords.tsx +++ b/src/components/codeKeywords/codeKeywords.tsx @@ -9,9 +9,14 @@ export const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)_ export const ORG_AUTH_TOKEN_REGEX = /___ORG_AUTH_TOKEN___/g; +export const JS_PACKAGE_REGEX = /___JS_PACKAGE___/g; + type ChildrenItem = ReturnType[number] | React.ReactNode; -export function makeKeywordsClickable(children: React.ReactNode) { +export function makeKeywordsClickable( + children: React.ReactNode, + currentJsPackage?: string +) { const items = Children.toArray(children); return items.reduce((arr: ChildrenItem[], child) => { @@ -19,12 +24,14 @@ export function makeKeywordsClickable(children: React.ReactNode) { const updatedChild = cloneElement( child as ReactElement, {}, - makeKeywordsClickable((child as ReactElement).props.children) + makeKeywordsClickable((child as ReactElement).props.children, currentJsPackage) ); arr.push(updatedChild); return arr; } - if (ORG_AUTH_TOKEN_REGEX.test(child)) { + if (JS_PACKAGE_REGEX.test(child)) { + resolveJsPackage(arr, child, currentJsPackage); + } else if (ORG_AUTH_TOKEN_REGEX.test(child)) { makeOrgAuthTokenClickable(arr, child); } else if (KEYWORDS_REGEX.test(child)) { makeProjectKeywordsClickable(arr, child); @@ -36,6 +43,12 @@ export function makeKeywordsClickable(children: React.ReactNode) { }, [] as ChildrenItem[]); } +function resolveJsPackage(arr: ChildrenItem[], str: string, currentGuide?: string) { + runRegex(arr, str, JS_PACKAGE_REGEX, lastIndex => ( + {`@sentry/${currentGuide}`} + )); +} + function makeOrgAuthTokenClickable(arr: ChildrenItem[], str: string) { runRegex(arr, str, ORG_AUTH_TOKEN_REGEX, lastIndex => ( diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx index 99414018fa069d..32d0bac037459c 100644 --- a/src/components/docPage/index.tsx +++ b/src/components/docPage/index.tsx @@ -55,6 +55,9 @@ export function DocPage({ const leafNode = nodeForPath(rootNode, unversionedPath); + const currentJsPackage = + currentGuide?.sdk?.split('.').at(-1) || currentPlatform?.sdk?.split('.').at(-1); + return (
@@ -83,7 +86,9 @@ export function DocPage({ {/* This exact id is important for Algolia indexing */}
- {children} + + {children} +