Prototype adding rules copy to react SDK docs

[linear]

Sample content for this -

Sentry provides a set of rules you can use to help your LLM use Sentry correctly. Copy this file and add it to your projects rules configuration. 

````markdown {filename:rules.md}

These rules are examples for an LLM to use 
when instrumenting Sentry within a project.

# Exception Catching

- Use `Sentry.captureException(error)` to catch an exception and log errors in Sentry.
- Use this in try catch blocks or exeception areas of your code 

# Logs 

- Where logs are used, ensure they are imported using `import {logger} from '@sentry/react'`
- Sentry initialization needs to be updated to include the `logger` integration.

## Configuration

### Baseline

```javascript
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  _experiments: {
    enableLogs: true,
  },
  
});

Logger Integration

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    // send console.log, console.error, and console.warn calls as logs to Sentry
    Sentry.consoleLoggingIntegration({ levels: ["log", "error", "warn"] }),
  ],
});

Logger Examples

logger.trace("Starting database connection", { database: "users" });
logger.debug("Cache miss for user", { userId: 123 });
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,
});

Tracing Examples

• Spans should be created for meaningful actions within an applications like button clicks, API calls, and function calls
• Ensure you are creating custom spans with meaningful names and operations
• Use the Sentry.startSpan function to create a span
• Child spans can exist within a parent span

Custom Span for Traces in a component

function TestComponent() {
  const handleTestButtonClick = () => {
    // Create a transaction/span to measure performance
    Sentry.startSpan({ 
      op: "ui.click", 
      name: "Test Button Click" 
    }, async (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 for Traces in an API called

async function fetchUserData(userId) {
  return Sentry.startSpan(
    {
      op: "http.client",
      name: `GET /api/users/${userId}`,
    },
    async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
      } catch (error) {
        // Capture error with the current span
        Sentry.captureException(error);
        throw error;
      }
    }
  );
}

```