From f04abe73f1945e6e0c62937f1f120d810a98d47d Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Mon, 4 Nov 2024 15:35:29 +0100 Subject: [PATCH 1/3] add js package codeblocks --- src/components/codeBlock/index.tsx | 8 ++++++-- src/components/codeContext.tsx | 10 +++++++++- src/components/codeKeywords/codeKeywords.tsx | 19 ++++++++++++++++--- src/components/docPage/index.tsx | 7 ++++++- 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/components/codeBlock/index.tsx b/src/components/codeBlock/index.tsx index cbc88eaf4c9db..191319065f690 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 357dd8454462e..f7d63128ff5d9 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 6ae34e6b1c60a..7863d22a8d3b6 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 99414018fa069..32d0bac037459 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} +
From c81a387ba5f4e9bc6e2b476c33cde67eae79ef5b Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Mon, 4 Nov 2024 15:35:53 +0100 Subject: [PATCH 2/3] add js package codeblock demo --- .../common/session-replay/index.mdx | 57 ++++++++++++++++++- .../javascript/guides/aws-lambda/index.mdx | 2 +- .../javascript/guides/gcp-functions/index.mdx | 2 +- .../setup-canvas/javascript.angular.mdx | 17 ------ .../setup-canvas/javascript.astro.mdx | 17 ------ .../setup-canvas/javascript.ember.mdx | 17 ------ .../setup-canvas/javascript.gatsby.mdx | 17 ------ .../setup-canvas/javascript.mdx | 34 ----------- .../setup-canvas/javascript.nextjs.mdx | 17 ------ .../setup-canvas/javascript.nuxt.mdx | 17 ------ .../setup-canvas/javascript.react.mdx | 17 ------ .../setup-canvas/javascript.remix.mdx | 17 ------ .../setup-canvas/javascript.svelte.mdx | 17 ------ .../setup-canvas/javascript.sveltekit.mdx | 33 ----------- .../setup-canvas/javascript.vue.mdx | 17 ------ 15 files changed, 58 insertions(+), 240 deletions(-) delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.angular.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.astro.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.ember.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.react.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.remix.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.svelte.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx delete mode 100644 platform-includes/session-replay/setup-canvas/javascript.vue.mdx diff --git a/docs/platforms/javascript/common/session-replay/index.mdx b/docs/platforms/javascript/common/session-replay/index.mdx index 78202a8b41026..08588322fb1f8 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 4de8d75745ece..563a65a0c5c5b 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 0df77e7f3e09e..d379a82f97228 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 ed469fab1dded..0000000000000 --- 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 662d85589ce8b..0000000000000 --- 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 f1c579ad20d17..0000000000000 --- 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 1c0274fe5facc..0000000000000 --- 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 05a3a6d937504..0000000000000 --- 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 1f99c65944876..0000000000000 --- 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 e2c2d93052f41..0000000000000 --- 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 75b070edcc1cf..0000000000000 --- 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 9baaa5d560395..0000000000000 --- 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 058256f9530c5..0000000000000 --- 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 27feaef0e03e5..0000000000000 --- 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 99657a2f47fd0..0000000000000 --- 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(), - ], -}); -``` From 87c611a10565a56854f8e759e9ec1a1ed9cc70a4 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Mon, 4 Nov 2024 15:46:32 +0100 Subject: [PATCH 3/3] add contribution docs --- docs/contributing/pages/placeholders.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 docs/contributing/pages/placeholders.mdx diff --git a/docs/contributing/pages/placeholders.mdx b/docs/contributing/pages/placeholders.mdx new file mode 100644 index 0000000000000..b848fd9f39ed0 --- /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**.