> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# خرائط الخدمات

> تصوّر ترابط الخدمات وتدفّق الطلبات باستخدام خرائط الخدمات في ClickStack.

export const Video = ({src, width = '100%', autoPlay = true, loop = true, muted = true, playsInline = true, ...rest}) => {
  const base = typeof window !== 'undefined' && window.location.pathname.startsWith('/docs') ? '/docs' : '';
  const fullSrc = src && src.startsWith('/') ? base + src : src;
  return <video src={fullSrc} width={width} autoPlay={autoPlay} loop={loop} muted={muted} playsInline={playsInline} {...rest} />;
};

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const galaxyOnClick = eventName => () => {
  try {
    if (typeof window !== "undefined" && window.galaxy && eventName) {
      window.galaxy.track(eventName, {
        interaction: "click"
      });
    }
  } catch (e) {}
};

export const BetaBadge = ({link, galaxyTrack, galaxyEvent}) => {
  if (link) {
    return <a href={link} target="_blank" rel="noopener noreferrer" className="betaBadge" onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}>
                <Icon />
                <span>Beta</span>
            </a>;
  }
  return <div className="betaBadge">
            <Icon />
            <span>
                ميزة Beta. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        مزيد من المعلومات.
                    </a>
                </u>
            </span>
        </div>;
};

تُظهر خرائط الخدمات كيفية تفاعل خدماتك مع بعضها. ويُنشئ ClickStack الرسم البياني عبر مطابقة وحدات span عميل (الطلبات الصادرة) مع وحدات span خادم (الطلبات الواردة) ضمن التتبّع نفسه، لإعادة بناء مسار الطلب بين الخدمات.

انقر على **خريطة الخدمات** في لوحة التنقل اليسرى لفتح الرسم البياني الكامل. تظهر الخدمات بمجرد البدء في [إدخال بيانات التتبّع](/ar/clickstack/ingesting-data) باستخدام OpenTelemetry.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/service-map-overview.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=6ab39c677d7363317f62b186ddfa1b11" alt="خريطة خدمات تُظهر عُقد الخدمات وتدفّق الطلبات بينها" size="lg" width="1999" height="981" data-path="images/clickstack/service-maps/service-map-overview.png" />

<div id="exploring-the-service-map">
  ## استكشاف خريطة الخدمات
</div>

تمثل كل عقدة خدمة، ويُحدَّد ذلك بواسطة سمة المورد `service.name`. وتربط الحواف (الخطوط المتقطعة) بين الخدمات عندما يتطابق span عميل في خدمة ما مع span خادم في خدمة أخرى. ويعكس حجم العقدة الحجم النسبي لحركة المرور، وتشير العقد الحمراء إلى الخدمات التي سجّلت أخطاء ضمن النطاق الزمني المحدد.

يتيح لك شريط الأدوات أعلى الخريطة تصفية العرض وضبطه.

**محدد المصدر** — صفِّ الخريطة بحسب مصدر تتبعات محدد (مثل "ClickPy Traces").

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/source-selector.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=a998e19c6d8bafaf94b37690279c4c0d" alt="تمييز محدد المصدر في شريط أدوات خريطة الخدمات" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/source-selector.png" />

**مُنزلق أخذ العينات** — اضبط معدل أخذ العينات لتحقيق توازن بين الأداء والدقة. وتُحمَّل المعدلات المنخفضة بسرعة أكبر في المجموعات كبيرة الحجم.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/sampling.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=624f847e0ddf0717486719c687bc4d32" alt="تمييز مُنزلق أخذ العينات في شريط أدوات خريطة الخدمات" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/sampling.png" />

**منتقي نطاق التاريخ** — حدِّد النافذة الزمنية لبيانات التتبعات المستخدمة لإنشاء الخريطة.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/_TDydWLKO6Z3njo9/images/clickstack/service-maps/date-selector.png?fit=max&auto=format&n=_TDydWLKO6Z3njo9&q=85&s=8805b947c5eee06d445d184ab501a679" alt="تمييز منتقي نطاق التاريخ في شريط أدوات خريطة الخدمات" size="lg" width="3838" height="138" data-path="images/clickstack/service-maps/date-selector.png" />

استخدم الزرين **+/-** في الزاوية السفلية اليسرى من الخريطة، أو مرِّر للتكبير والتصغير.

<div id="trace-level-service-maps">
  ## خرائط الخدمات على مستوى التتبّع
</div>

عند فحص تتبّع معيّن، تعرض خريطة خدمات مركّزة كيفية انتقال هذا الطلب تحديدًا بين الخدمات. يتيح لك ذلك رؤية طوبولوجيا طلب واحد من دون مغادرة المخطط الشلالي للتتبّع.

<Frame>
  <Video src="/images/clickstack/service-maps/service-map-demo.mp4" />
</Frame>
