mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
781455abb5
- Added a "Subscriber Notifications" section to the status page, detailing real-time incident updates, maintenance announcements, and resolution confirmations. - Introduced a Slack demo with animated message notifications for the status page. - Implemented a grid glow effect that follows the cursor on the status page. - Added a "Trace Alerts" section to the traces page, highlighting alerts for slow requests and error rates, along with a Slack demo for trace notifications. - Enhanced the workflows page with a "Workflow Notifications" section, providing details on execution status, error logs, and custom triggers, along with a Slack-like notification demo. - Implemented grid glow effects for traces and workflows pages, enhancing user interaction. - Added CSS animations for Slack message notifications across all pages.
758 lines
48 KiB
Plaintext
758 lines
48 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Exception Tracking - Catch, Fix, and Prevent Bugs</title>
|
|
<meta name="description"
|
|
content="Track exceptions and errors across your entire stack. Get full stack traces, intelligent grouping, AI-powered root cause analysis, and instant alerts. Fix bugs before users notice.">
|
|
<%- 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-white" id="exceptions-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor - orange color -->
|
|
<div id="exceptions-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(249, 115, 22, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(249, 115, 22, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-orange-600 mb-4">Powered by OpenTelemetry</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Catch bugs before users notice
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Track exceptions across your entire stack. Get full stack traces, intelligent error grouping, and AI-powered root cause analysis to fix issues faster.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>Full stack traces</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Intelligent grouping</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>AI root cause analysis</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Real-time alerts</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/apm-3.png" alt="OneUptime Exception tracking dashboard" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div class="bg-gray-50 py-16 sm:py-20">
|
|
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Full</div>
|
|
<div class="text-sm text-gray-500">Stack Traces</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Smart</div>
|
|
<div class="text-sm text-gray-500">Grouping</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">AI</div>
|
|
<div class="text-sm text-gray-500">Analysis</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Instant</div>
|
|
<div class="text-sm text-gray-500">Alerts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-orange-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
From error to resolution
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Automatically capture, analyze, and resolve errors with full context and AI assistance.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-orange-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-600 ring-2 ring-orange-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Capture Error</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">OpenTelemetry automatically captures exceptions with full context.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-600 ring-2 ring-orange-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Analyze & Group</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Intelligent deduplication groups similar errors together.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-600 ring-2 ring-orange-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">AI Analysis</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">AI identifies root cause and suggests fixes automatically.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-orange-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-600 ring-2 ring-orange-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Resolve & Learn</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Track resolution and prevent regressions with alerts.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 1: Full Stack Traces -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="lg:pr-8">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">Stack Traces</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
See exactly where and <span class="text-orange-600">why errors occur</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Get complete stack traces with source code context. Navigate directly to the line of code that caused the error, with surrounding context and variable values.
|
|
</p>
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Source maps support</div>
|
|
<div class="text-gray-600">Automatically decode minified JavaScript and TypeScript</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Context variables</div>
|
|
<div class="text-gray-600">See local variables and function arguments at crash time</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Multi-language support</div>
|
|
<div class="text-gray-600">JavaScript, Python, Go, Java, Ruby, .NET, and more</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative lg:order-last">
|
|
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
|
<img src="/img/apm-3.png" alt="Full stack trace view showing error location and context" class="rounded-xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 2: Intelligent Grouping -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="relative lg:order-first">
|
|
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
|
<img src="/img/apm-3.png" alt="Intelligent error grouping dashboard" class="rounded-xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
<div class="lg:pl-8">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">Intelligent Grouping</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Focus on unique issues, <span class="text-orange-600">not noise</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Our intelligent deduplication algorithm groups similar errors together, even when stack traces differ slightly. See the true impact of each unique issue.
|
|
</p>
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Fingerprint-based grouping</div>
|
|
<div class="text-gray-600">Smart algorithms identify the same error across different contexts</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Impact metrics</div>
|
|
<div class="text-gray-600">See how many users and sessions are affected by each error</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Custom grouping rules</div>
|
|
<div class="text-gray-600">Define your own rules for how errors should be grouped</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 3: AI-Powered Analysis -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="lg:pr-8">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">AI-Powered</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Get AI-generated <span class="text-orange-600">root cause analysis</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Our AI analyzes error patterns, stack traces, and surrounding context to identify the root cause and suggest fixes. Spend less time debugging and more time building.
|
|
</p>
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Automated root cause</div>
|
|
<div class="text-gray-600">AI identifies the underlying cause, not just the symptom</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Fix suggestions</div>
|
|
<div class="text-gray-600">Get code suggestions to resolve errors quickly</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Auto-fix with PRs</div>
|
|
<div class="text-gray-600">Enable AI Agent to create pull requests with fixes</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-8">
|
|
<a href="/product/ai-agent" class="inline-flex items-center gap-2 text-orange-600 font-semibold hover:text-orange-700 transition-colors">
|
|
Learn about AI Agent
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="relative lg:order-last">
|
|
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
|
<img src="/img/copilot.png" alt="AI-powered root cause analysis" class="rounded-xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Block 4: Release Tracking -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
|
<div class="relative lg:order-first">
|
|
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
|
<img src="/img/apm-3.png" alt="Release tracking and deployment correlation" class="rounded-xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
<div class="lg:pl-8">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">Release Tracking</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Know which release <span class="text-orange-600">broke things</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Track errors by release version and correlate with deployments. Quickly identify regressions and roll back problematic releases with confidence.
|
|
</p>
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Version correlation</div>
|
|
<div class="text-gray-600">See which version introduced each error</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Regression detection</div>
|
|
<div class="text-gray-600">Automatically detect when fixed errors resurface</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Deploy markers</div>
|
|
<div class="text-gray-600">See deployments overlaid on error trends</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Grid Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">More Features</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Everything you need for <span class="text-orange-600">error tracking</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Comprehensive exception tracking built for modern engineering teams.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Feature 1 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-orange-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Real-time Alerts</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Get notified instantly via Slack, email, PagerDuty, or webhooks when new errors occur or rates spike.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-red-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-red-50 ring-1 ring-red-200">
|
|
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">User Context</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">See which users are affected by errors. Track error impact by user segment, plan, or any custom attribute.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-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="mt-6 text-xl font-semibold text-gray-900">Session Replay</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">See exactly what the user did before the error. Replay sessions to understand the full context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-orange-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Error Trends</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Visualize error rates over time. Spot trends and anomalies before they become critical issues.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-red-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">OpenTelemetry Native</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Built on open standards. Use OpenTelemetry SDKs to capture exceptions with full trace context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-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="mt-6 text-xl font-semibold text-gray-900">Issue Tracker Integration</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Create Jira, Linear, or GitHub issues directly from errors. Two-way sync keeps everything updated.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OpenTelemetry Section -->
|
|
<div class="relative bg-gray-900 py-24 sm:py-32 overflow-hidden">
|
|
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur border border-white/20 mb-6">
|
|
<svg class="h-4 w-4 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-white">OpenTelemetry Native</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
|
|
Built on <span class="text-orange-400">open standards</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
|
Use OpenTelemetry to capture exceptions with full distributed trace context. No proprietary agents or vendor lock-in.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
|
|
<svg class="h-7 w-7 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white">Any Language</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">JavaScript, Python, Go, Java, .NET, Ruby, PHP, and more</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-red-50 ring-1 ring-red-200 mb-6">
|
|
<svg class="h-7 w-7 text-red-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-white">Trace Context</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Exceptions linked to distributed traces automatically</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
|
|
<svg class="h-7 w-7 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white">No Lock-in</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Own your data with open standards</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Notifications Section -->
|
|
<div class="bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
|
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-orange-700">Exception Alerts</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Instant alerts for <span class="text-orange-600">new errors</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg text-gray-600">
|
|
Get notified immediately when new exceptions occur or error rates spike. Alert through Slack, email, PagerDuty, or any webhook.
|
|
</p>
|
|
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">New error alerts</div>
|
|
<div class="text-gray-600">Notified when a new error type is detected</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Regression alerts</div>
|
|
<div class="text-gray-600">Know when previously fixed bugs resurface</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
|
<svg class="h-4 w-4 text-orange-600" 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>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Rate spike alerts</div>
|
|
<div class="text-gray-600">Alert when error rates exceed normal levels</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Slack Demo -->
|
|
<div class="mt-12 lg:mt-0 relative">
|
|
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
|
<!-- Slack Header -->
|
|
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
|
|
</svg>
|
|
<span class="text-white font-semibold text-sm">Slack</span>
|
|
</div>
|
|
<div class="flex-1 text-center">
|
|
<span class="text-white/70 text-sm">#error-alerts</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slack Messages -->
|
|
<div class="p-4 space-y-4 bg-white">
|
|
<!-- Message 1 -->
|
|
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
|
<div class="h-9 w-9 rounded bg-orange-500 flex items-center justify-center flex-shrink-0">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-semibold text-gray-900 text-sm">OneUptime Exceptions</span>
|
|
<span class="text-xs text-gray-500">9:15 AM</span>
|
|
</div>
|
|
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">NEW ERROR</span>
|
|
</div>
|
|
<p class="text-sm text-gray-700 font-medium">TypeError: Cannot read property 'id'</p>
|
|
<p class="text-xs text-gray-500 mt-1">checkout-service | 47 occurrences</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message 2 -->
|
|
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
|
<div class="h-9 w-9 rounded bg-orange-500 flex items-center justify-center flex-shrink-0">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-semibold text-gray-900 text-sm">OneUptime AI</span>
|
|
<span class="text-xs text-gray-500">9:15 AM</span>
|
|
</div>
|
|
<div class="mt-1 p-3 rounded-lg bg-orange-50 border-l-4 border-orange-500">
|
|
<p class="text-sm text-gray-700 font-medium">Root cause: Null cart object in handleCheckout()</p>
|
|
<p class="text-xs text-gray-500 mt-1">Suggested fix: Add null check at line 142</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeInSlack {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for exceptions hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('exceptions-hero-section');
|
|
const gridGlow = document.getElementById('exceptions-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', x + '%');
|
|
gridGlow.style.setProperty('--mouse-y', y + '%');
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|