mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
3769e0d1a5
- Created new metrics.ejs view for performance insights and real-time monitoring. - Created new traces.ejs view for distributed tracing and request visibility. - Updated ProductBranding.md to reflect new links for metrics, traces, and dashboards.
210 lines
13 KiB
Plaintext
210 lines
13 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Distributed Tracing - End-to-End Request Visibility</title>
|
|
<meta name="description"
|
|
content="Trace requests across microservices with distributed tracing. Identify bottlenecks, debug issues, and optimize performance with OneUptime Traces.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
|
|
<!-- Background decorative elements -->
|
|
<div class="absolute inset-0 -z-10 overflow-hidden">
|
|
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-yellow-100/60 to-amber-100/40 blur-3xl"></div>
|
|
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-amber-100/60 to-yellow-100/40 blur-3xl"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-yellow-50/40 to-amber-50/30 blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Grid pattern overlay -->
|
|
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
|
|
|
|
<div class="py-24 sm:py-32 lg:py-40">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 border border-yellow-100 mb-8">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-yellow-500"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-yellow-700">OpenTelemetry Native</span>
|
|
</div>
|
|
|
|
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
|
|
End-to-end <span class="bg-gradient-to-r from-yellow-600 to-amber-600 bg-clip-text text-transparent">distributed tracing</span>
|
|
</h1>
|
|
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
|
|
Follow requests across services, identify bottlenecks, and debug issues faster with comprehensive distributed tracing.
|
|
</p>
|
|
|
|
<!-- Feature highlights row -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Span visualization
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Service maps
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Latency analysis
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Error correlation
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-yellow-600 transition-colors">
|
|
Request Demo
|
|
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero image -->
|
|
<div class="mt-16 flow-root sm:mt-24">
|
|
<div class="relative">
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-500/20 via-amber-500/20 to-yellow-500/20 rounded-2xl blur-2xl"></div>
|
|
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
|
|
<img src="/img/apm-3.png" alt="OneUptime Traces showing distributed request flow" width="2432" height="1442"
|
|
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- Features Section -->
|
|
<div class="relative bg-gradient-to-b from-white via-yellow-50/30 to-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="absolute inset-0 -z-10">
|
|
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-yellow-100/40 to-amber-100/30 blur-3xl"></div>
|
|
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-amber-100/40 to-yellow-100/30 blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 border border-yellow-100 mb-6">
|
|
<svg class="h-4 w-4 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-yellow-700">Distributed Tracing</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
See the complete <span class="bg-gradient-to-r from-yellow-600 to-amber-600 bg-clip-text text-transparent">request journey</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Understand how requests flow through your distributed system. Identify slow services, failed calls, and optimization opportunities.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Service Maps</h3>
|
|
<p class="text-gray-600">Visualize dependencies between services. Understand your architecture and identify critical paths at a glance.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Latency Breakdown</h3>
|
|
<p class="text-gray-600">See exactly where time is spent in each request. Drill down into spans to find performance bottlenecks.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Error Tracking</h3>
|
|
<p class="text-gray-600">Instantly identify which service caused an error. Get full context with stack traces and span attributes.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Powerful Search</h3>
|
|
<p class="text-gray-600">Find traces by service, operation, duration, status, or any custom attribute. Filter and analyze at scale.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Cross-Service Context</h3>
|
|
<p class="text-gray-600">Automatically propagate trace context across services. See the full picture without manual correlation.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Logs & Metrics Correlation</h3>
|
|
<p class="text-gray-600">Link traces with related logs and metrics. Jump from a slow trace to the exact log lines that explain why.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('cta') -%>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
</body>
|
|
|
|
</html>
|