feat(js): Add SDK Options page (#12502)

Author: mydea

docs/platforms/javascript/common/configuration/environments.mdx

@@ -8,7 +8,7 @@ description: "Allows you to inspect the contents of a processed event and hint o
 <Alert title="Deprecation Notice">
 
 The `Debug` Integration is deprecated and will be removed in the next major version of the SDK.
-To log outgoing events, we recommend using <PlatformLink to="/configuration/options/#hooks">Hook Options</PlatformLink> in `Sentry.init()`.
+To log outgoing events, we recommend using <PlatformLink to="/configuration/options/#beforeSend">beforeSend</PlatformLink> in `Sentry.init()`.
 
 </Alert>
 

docs/platforms/javascript/common/configuration/integrations/debug.mdx

@@ -1,10 +1,8 @@
-Options are passed to the `init()` function as object:
-
+Options are passed to the `init()` function as an object:
 
 ```javascript
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  maxBreadcrumbs: 50,
   debug: true,
 });
 ```

docs/platforms/javascript/common/configuration/options.mdx

@@ -5,5 +5,5 @@
     "name": "Next",
     "aliases": [],
     "categories": [],
-    "body": "<h4 id=\"configure\" style=\"position:relative;\">Configure</h4>\n<p>To configure, set <code>tracesSampleRate</code> in your config files, <code>sentry.server.config.js</code>, <code>sentry.client.config.js</code>, and <code>sentry.edge.config.js</code>:</p>\n<p>Once this is done, Sentry's Next.js SDK captures all unhandled exceptions and transactions.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript highlight\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> Sentry <span class=\"token keyword\">from</span> <span class=\"token string\">\"@sentry/nextjs\"</span><span class=\"token punctuation\">;</span>\n\nSentry<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">dsn</span><span class=\"token operator\">:</span> <span class=\"token string\">\"___PUBLIC_DSN___\"</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\">// Set tracesSampleRate to 1.0 to capture 100%</span>\n  <span class=\"token comment\">// of transactions for performance monitoring.</span>\n  <span class=\"token comment\">// We recommend adjusting this value in production</span>\n  <span class=\"token literal-property property\">tracesSampleRate</span><span class=\"token operator\">:</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>We recommend adjusting the value of <code>tracesSampleRate</code> in production. Learn more about tracing <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#tracing-options\">options,</a> how to use the <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/sampling/#setting-a-sampling-function\">traces_sampler</a> function, or how to <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/sampling/#sampling-transaction-events\">sample transactions</a>.</p>"
+    "body": "<h4 id=\"configure\" style=\"position:relative;\">Configure</h4>\n<p>To configure, set <code>tracesSampleRate</code> in your config files, <code>sentry.server.config.js</code>, <code>sentry.client.config.js</code>, and <code>sentry.edge.config.js</code>:</p>\n<p>Once this is done, Sentry's Next.js SDK captures all unhandled exceptions and transactions.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript highlight\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> Sentry <span class=\"token keyword\">from</span> <span class=\"token string\">\"@sentry/nextjs\"</span><span class=\"token punctuation\">;</span>\n\nSentry<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">dsn</span><span class=\"token operator\">:</span> <span class=\"token string\">\"___PUBLIC_DSN___\"</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\">// Set tracesSampleRate to 1.0 to capture 100%</span>\n  <span class=\"token comment\">// of transactions for performance monitoring.</span>\n  <span class=\"token comment\">// We recommend adjusting this value in production</span>\n  <span class=\"token literal-property property\">tracesSampleRate</span><span class=\"token operator\">:</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>We recommend adjusting the value of <code>tracesSampleRate</code> in production. Learn more about tracing <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/options/#tracing-options\">options,</a> how to use the <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/sampling/#setting-a-sampling-function\">traces_sampler</a> function, or how to <a href=\"https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/sampling/#sampling-transaction-events\">sample transactions</a>.</p>"
   }

platform-includes/configuration/config-intro/javascript.mdx

@@ -5,5 +5,5 @@
   "name": "JavaScript",
   "aliases": [],
   "categories": [],
-  "body": "<h4 id=\"configure\" style=\"position:relative;\">Configure</h4>\n<p>Configuration should happen as early as possible in your application's lifecycle.</p>\n<p>Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and transactions.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript highlight\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> Sentry <span class=\"token keyword\">from</span> <span class=\"token string\">\"@sentry/browser\"</span><span class=\"token punctuation\">;</span>\n\nSentry<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">dsn</span><span class=\"token operator\">:</span> <span class=\"token string\">\"___PUBLIC_DSN___\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">integrations</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[<span class=\"token class-name\">Sentry<span class=\"token punctuation\">.</span>browserTracingIntegration</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\">// Set tracesSampleRate to 1.0 to capture 100%</span>\n  <span class=\"token comment\">// of transactions for performance monitoring.</span>\n  <span class=\"token comment\">// We recommend adjusting this value in production</span>\n  <span class=\"token literal-property property\">tracesSampleRate</span><span class=\"token operator\">:</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled</span>\n  <span class=\"token literal-property property\">tracePropagationTargets</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"localhost\"</span><span class=\"token punctuation\">,</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">^https:\\/\\/yourserver\\.io\\/api</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>We recommend adjusting the value of <code>tracesSampleRate</code> in production. Learn more about tracing <a href=\"https://docs.sentry.io/platforms/javascript/configuration/options/#tracing-options\">options,</a> how to use the <a href=\"https://docs.sentry.io/platforms/javascript/configuration/sampling/\">traces_sampler</a> function, or how to <a href=\"https://docs.sentry.io/platforms/javascript/configuration/sampling/\">sample transactions</a>.</p>"
+  "body": "<h4 id=\"configure\" style=\"position:relative;\">Configure</h4>\n<p>Configuration should happen as early as possible in your application's lifecycle.</p>\n<p>Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and transactions.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript highlight\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> Sentry <span class=\"token keyword\">from</span> <span class=\"token string\">\"@sentry/browser\"</span><span class=\"token punctuation\">;</span>\n\nSentry<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">dsn</span><span class=\"token operator\">:</span> <span class=\"token string\">\"___PUBLIC_DSN___\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">integrations</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[<span class=\"token class-name\">Sentry<span class=\"token punctuation\">.</span>browserTracingIntegration</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\">// Set tracesSampleRate to 1.0 to capture 100%</span>\n  <span class=\"token comment\">// of transactions for performance monitoring.</span>\n  <span class=\"token comment\">// We recommend adjusting this value in production</span>\n  <span class=\"token literal-property property\">tracesSampleRate</span><span class=\"token operator\">:</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled</span>\n  <span class=\"token literal-property property\">tracePropagationTargets</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">\"localhost\"</span><span class=\"token punctuation\">,</span> <span class=\"token regex\"><span class=\"token regex-delimiter\">/</span><span class=\"token regex-source language-regex\">^https:\\/\\/yourserver\\.io\\/api</span><span class=\"token regex-delimiter\">/</span></span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>We recommend adjusting the value of <code>tracesSampleRate</code> in production. Learn more about tracing <a href=\"https://docs.sentry.io/platforms/javascript/options/#tracing-options\">options,</a> how to use the <a href=\"https://docs.sentry.io/platforms/javascript/configuration/sampling/\">traces_sampler</a> function, or how to <a href=\"https://docs.sentry.io/platforms/javascript/configuration/sampling/\">sample transactions</a>.</p>"
 }