docs(js): Update span metrics instrumentation examples (#15320)

## Overview

Updates the span metrics instrumentation examples page with
comprehensive, real-world use cases demonstrating how to instrument both
frontend and backend code for distributed tracing.

## What's New

### Four Complete Examples with Sample Repositories

1. **E-Commerce Checkout Flow** ([Crash
Commerce](https://github.com/getsentry/crash-commerce-tracing-sample))
- Frontend: React checkout button instrumentation with `ui.action` spans
   - Backend: Order processing and payment provider spans
- **Demonstrates:** Cart metrics, payment provider tracking, end-to-end
checkout flow
- **Metrics to monitor:** p95 duration by cart size, error rates by
payment provider

2. **Media Upload with Background Processing**
([SnapTrace](https://github.com/getsentry/snaptrace-tracing-example))
   - Frontend: Upload experience tracking with `file.upload` spans
   - Backend: Validation spans and async media processing
- **Demonstrates:** User-perceived upload time, async background jobs,
trace continuity
- **Metrics to monitor:** p95 by file size, processing success rates,
storage optimization

3. **Search Autocomplete**
([NullFlix](https://github.com/getsentry/nullflix-tracing-example))
   - Frontend: Debounced search with abort handling
   - Backend: Search performance with query categorization
- **Demonstrates:** Cancellable requests, slow query detection,
performance patterns
- **Metrics to monitor:** p95 by query length, cancellation rates, empty
result rates

4. **Manual LLM Instrumentation** ([Customer Service
Bot](https://github.com/getsentry/llm-manual-agent-monitoring-example))
   - Frontend: AI chat interface with agent spans
   - Backend: Custom LLM integration with tool execution
- **Demonstrates:** AI agent conventions, token tracking, tool call
monitoring
- **Metrics to monitor:** Token usage, tool performance, agent
effectiveness

## Key Improvements

- ✅ **Practical, production-ready examples** - Each example shows
real-world monitoring scenarios
- ✅ **End-to-end tracing** - Demonstrates how frontend and backend spans
work together in a distributed trace
- ✅ **Best practices** - Shows proper span naming, attribute usage, and
error handling
- ✅ **Actionable metrics** - Each example includes specific span metrics
queries to monitor
- ✅ **Sample repos** - Links to working example repositories with Arcade
demos
- ✅ **Implementation guidance** - Clear notes on where to place
instrumentation code

## Content Structure

Each example includes:
- **Challenge statement** - The monitoring problem to solve
- **Solution approach** - How to instrument with spans and attributes  
- **Code examples** - Frontend and backend instrumentation
- **Implementation notes** - Where to add code in your app
- **Trace flow explanation** - How the spans connect in a distributed
trace
- **Monitoring guidance** - Specific span metrics queries to use

---------

Co-authored-by: Alex Krawiec <[email protected]>

Author: codyde