feat(perf): Update onPostBuild step to generate performance on-boarding docs

src/gatsby/onPostBuild.ts

@@ -67,6 +67,37 @@ export default async ({ graphql }) => {
   await writeJson(output, nodes, platformRegistry);
 };
 
+const parsePathSlug = (slug: string) => {
+  if (slug.includes("performance-onboarding")) {
+    const pathMatch = slug.match(
+      /^\/(?<platform>[^/]+)\/performance-onboarding\/(?<sub_platform>[^/]+)\/(?<step>[^/]+)\/$/
+    );
+
+    if(!pathMatch) {
+      throw new Error(`Unable to parse performance onboarding from slug: ${slug}`);
+    }
+
+    const { platform, sub_platform } = pathMatch.groups;
+    const step = String(pathMatch.groups.step).replace(/\./g, "-");
+    const sub = platform === sub_platform ? `performance-onboarding-${step}` : `${sub_platform}-performance-onboarding-${step}`;
+
+    return {
+      platform,
+      sub,
+    };
+  }
+
+  const pathMatch = slug.match(/^\/([^/]+)(?:\/([^/]+))?\/$/);
+  if (!pathMatch) throw new Error("cant identify language");
+
+  const [, main, sub] = pathMatch;
+
+  return {
+    platform: main,
+    sub: sub,
+  };
+};
+
 const writeJson = async (
   path: string,
   nodes,
@@ -75,10 +106,8 @@ const writeJson = async (
   const platforms = [];
   const indexJson = {};
   nodes.forEach(node => {
-    const pathMatch = node.fields.slug.match(/^\/([^/]+)(?:\/([^/]+))?\/$/);
-    if (!pathMatch) throw new Error("cant identify language");
-    // eslint-disable-next-line no-unused-vars
-    const [, main, sub] = pathMatch;
+    const { platform: main, sub } = parsePathSlug(node.fields.slug);
+
     if (!indexJson[main]) indexJson[main] = {};
     if (!node.frontmatter.doc_link) {
       throw new Error(

src/wizard/javascript/performance-onboarding/javascript/1.install.md

@@ -0,0 +1,18 @@
+---
+name: JavaScript
+doc_link: https://docs.sentry.io/platforms/javascript/performance/
+support_level: production
+type: language
+---
+
+#### Install
+
+Install our JavaScript browser SDK using either `yarn` or `npm`:
+
+```bash
+# Using yarn
+yarn add @sentry/browser @sentry/tracing
+
+# Using npm
+npm install --save @sentry/browser @sentry/tracing
+```

src/wizard/javascript/performance-onboarding/javascript/2.configure.md

@@ -0,0 +1,29 @@
+---
+name: JavaScript
+doc_link: https://docs.sentry.io/platforms/javascript/performance/
+support_level: production
+type: language
+---
+
+#### Configure
+
+Configuration should happen as early as possible in your application's lifecycle.
+
+Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and transactions.
+
+```javascript
+import * as Sentry from "@sentry/browser";
+import { BrowserTracing } from "@sentry/tracing";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [new BrowserTracing()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+});
+```
+
+We recommend adjusting the value of `tracesSampleRate` in production. Learn more about configuring sampling in our [full documentation](/platforms/javascript/configuration/sampling/).

src/wizard/javascript/performance-onboarding/javascript/3.verify.md

@@ -0,0 +1,20 @@
+---
+name: JavaScript
+doc_link: https://docs.sentry.io/platforms/javascript/performance/
+support_level: production
+type: language
+---
+
+#### Verify
+
+Verify that performance monitoring is working correctly with our [automatic instrumentation](/platforms/javascript/performance/instrumentation/automatic-instrumentation/) by simply using your JavaScript application.
+
+You have the option to manually construct a transaction using [custom instrumentation](/platforms/javascript/performance/instrumentation/custom-instrumentation/):
+
+```javascript
+const transaction = Sentry.startTransaction({ name: "test-transaction" });
+const span = transaction.startChild({ op: "functionX" }); // This function returns a Span
+// exampleFunctionCall();
+span.finish(); // Remember that only finished spans will be sent with the transaction
+transaction.finish(); // Finishing the transaction will send it to Sentry
+```

src/wizard/javascript/performance-onboarding/react/1.install.md

@@ -0,0 +1,18 @@
+---
+name: React
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/performance/
+support_level: production
+type: framework
+---
+
+#### Install
+
+Install our JavaScript browser SDK using either `yarn` or `npm`:
+
+```bash
+# Using yarn
+yarn add @sentry/react @sentry/tracing
+
+# Using npm
+npm install --save @sentry/react @sentry/tracing
+```

src/wizard/javascript/performance-onboarding/react/2.configure.md

@@ -0,0 +1,35 @@
+---
+name: React
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/performance/
+support_level: production
+type: framework
+---
+
+#### Configure
+
+Next, import and initialize the Sentry module as early as possible, before initializing React:
+
+```javascript
+import React from "react";
+import ReactDOM from "react-dom";
+import * as Sentry from "@sentry/react";
+import { BrowserTracing } from "@sentry/tracing";
+import App from "./App";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [new BrowserTracing()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+});
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+// Can also use with React Concurrent Mode
+// ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+```
+
+We recommend adjusting the value of `tracesSampleRate` in production. Learn more about configuring sampling in our [full documentation](/platforms/javascript/guides/react/configuration/sampling/).

src/wizard/javascript/performance-onboarding/react/3.verify.md

@@ -0,0 +1,34 @@
+---
+name: React
+doc_link: https://docs.sentry.io/platforms/javascript/guides/react/performance/
+support_level: production
+type: framework
+---
+
+#### Verify
+
+Verify that performance monitoring is working correctly with our [automatic instrumentation](/platforms/javascript/guides/react/performance/instrumentation/automatic-instrumentation/) by simply using your React application.
+
+You have the option to manually construct a transaction using [custom instrumentation](/platforms/javascript/guides/react/performance/instrumentation/custom-instrumentation/):
+
+```javascript
+const transaction = Sentry.startTransaction({ name: "test-transaction" });
+const span = transaction.startChild({ op: "functionX" }); // This function returns a Span
+// functionCallX
+span.finish(); // Remember that only finished spans will be sent with the transaction
+transaction.finish(); // Finishing the transaction will send it to Sentry
+```
+
+In addition, `@sentry/react` exports a `withProfiler` higher order component that can be used to capture React-related spans for specific React components:
+
+```javascript
+import * as Sentry from "@sentry/react";
+
+function App(props) {
+  // ...
+
+  return <div />;
+}
+
+export default Sentry.withProfiler(App);
+```