feat(getting-started-docs): Add AI rules instructions to browser javascript (#93009)

we display ai rules in our docs
https://docs.sentry.io/platforms/javascript/ for browser javascript, so
we should display the same in our app's onboarding doc too

Author: priscilawebdev

static/app/gettingStartedDocs/javascript/javascript.spec.tsx

@@ -24,10 +24,10 @@ describe('javascript onboarding docs', function () {
 
     // Includes import statement
     expect(
-      screen.getByText(
+      screen.queryAllByText(
         textWithMarkupMatcher(/import \* as Sentry from "@sentry\/browser"/)
       )
-    ).toBeInTheDocument();
+    ).not.toHaveLength(0);
   });
 
   it('displays sample rates by default', () => {

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -13,7 +13,10 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {
+  getAIRulesForCodeEditorStep,
+  getUploadSourceMapsStep,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {
   getCrashReportJavaScriptInstallStep,
   getCrashReportModalConfigDescription,
@@ -324,6 +327,141 @@ const getVerifyConfig = () => [
   },
 ];
 
+const getAiRulesConfig = (params: Params) =>
+  getAIRulesForCodeEditorStep({
+    rules: `
+These examples should be used as guidance when configuring Sentry functionality within a project.
+
+# Error / Exception Tracking
+
+Use \`Sentry.captureException(error)\` to capture an exception and log the error in Sentry.
+Use this in try catch blocks or areas where exceptions are expected
+
+# Tracing Examples
+
+Spans should be created for meaningful actions within an applications like button clicks, API calls, and function calls
+Use the \`Sentry.startSpan\` function to create a span
+Child spans can exist within a parent span
+
+## Custom Span instrumentation in component actions
+
+Name custom spans with meaningful names and operations.
+Attach attributes based on relevant information and metrics from the request
+
+\`\`\`javascript
+function TestComponent() {
+  const handleTestButtonClick = () => {
+    // Create a transaction/span to measure performance
+    Sentry.startSpan(
+      {
+        op: "ui.click",
+        name: "Test Button Click",
+      },
+      (span) => {
+        const value = "some config";
+        const metric = "some metric";
+
+        // Metrics can be added to the span
+        span.setAttribute("config", value);
+        span.setAttribute("metric", metric);
+
+        doSomething();
+      },
+    );
+  };
+
+  return (
+    <button type="button" onClick={handleTestButtonClick}>
+      Test Sentry
+    </button>
+  );
+}
+\`\`\`
+
+## Custom span instrumentation in API calls
+
+Name custom spans with meaningful names and operations.
+Attach attributes based on relevant information and metrics from the request
+
+\`\`\`javascript
+async function fetchUserData(userId) {
+  return Sentry.startSpan(
+    {
+      op: "http.client",
+      name: \`GET /api/users/\${userId}\`,
+    },
+    async () => {
+      const response = await fetch(\`/api/users/\${userId}\`);
+      const data = await response.json();
+      return data;
+    },
+  );
+}
+\`\`\`
+
+# Logs
+
+Where logs are used, ensure Sentry is imported using \`import * as Sentry from "@sentry/browser"\`
+Enable logging in Sentry using \`Sentry.init({ _experiments: { enableLogs: true } })\`
+Reference the logger using \`const { logger } = Sentry\`
+Sentry offers a \`consoleLoggingIntegration\` that can be used to log specific console error types automatically without instrumenting the individual logger calls
+
+## Configuration
+
+### Baseline
+
+\`\`\`javascript
+import * as Sentry from "@sentry/browser";
+
+Sentry.init({
+  dsn: "${params.dsn.public}",
+
+  _experiments: {
+    enableLogs: true,
+  },
+});
+\`\`\`
+
+### Logger Integration
+
+\`\`\`javascript
+Sentry.init({
+  dsn: "${params.dsn.public}",
+  integrations: [
+    // send console.log, console.error, and console.warn calls as logs to Sentry
+    Sentry.consoleLoggingIntegration({ levels: ["log", "error", "warn"] }),
+  ],
+});
+\`\`\`
+
+## Logger Examples
+
+\`logger.fmt\` is a template literal function that should be used to bring variables into the structured logs.
+
+\`\`\`javascript
+import * as Sentry from "@sentry/browser";
+
+const { logger } = Sentry;
+
+logger.trace("Starting database connection", { database: "users" });
+logger.debug(logger.fmt\`Cache miss for user: \${userId}\`);
+logger.info("Updated profile", { profileId: 345 });
+logger.warn("Rate limit reached for endpoint", {
+  endpoint: "/api/results/",
+  isEnterprise: false,
+});
+logger.error("Failed to process payment", {
+  orderId: "order_123",
+  amount: 99.99,
+});
+logger.fatal("Database connection pool exhausted", {
+  database: "users",
+  activeConnections: 100,
+});
+\`\`\`
+`,
+  });
+
 const loaderScriptOnboarding: OnboardingConfig<PlatformOptions> = {
   introduction: () =>
     tct("In this quick guide you'll use our [strong: Loader Script] to set up:", {
@@ -406,6 +544,7 @@ const loaderScriptOnboarding: OnboardingConfig<PlatformOptions> = {
         }
       },
     },
+    getAiRulesConfig(params),
   ],
   verify: getVerifyConfig,
   nextSteps: () => [
@@ -501,6 +640,7 @@ const packageManagerOnboarding: OnboardingConfig<PlatformOptions> = {
       guideLink: 'https://docs.sentry.io/platforms/javascript/sourcemaps/',
       ...params,
     }),
+    getAiRulesConfig(params),
   ],
   verify: getVerifyConfig,
   nextSteps: () => [],