Sentry Sandbox

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="https://media.licdn.com/dms/image/v2/D560BAQHRWAVa50doBw/company-logo_200_200/company-logo_200_200/0/1699367798268/getsentry_logo?e=2147483647&v=beta&t=t_50gh-WNd4Ee4sLgJGIQ1Y3mt4ufSRZiaHTe-Mm6Yw" /> <title>Sentry Sandbox</title> <style> :root { /* Colors */ --purple-dark: #2f1937; --purple-light: #6c5fc7; --purple-hover: #5b4eb3; --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-300: #dee2e6; --gray-400: #ced4da; --gray-500: #adb5bd; --gray-600: #6c757d; --gray-800: #343a40; --red: #dc3545; --yellow: #ffc107; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Border Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Rubik, Avenir Next, Helvetica Neue, sans-serif; background-color: var(--gray-100); font-weight: 500; color: var(--gray-800); height: 100vh; display: flex; align-items: center; justify-content: center; } .app-container { display: flex; height: 100vh; } .app-container::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; } /* Sidebar Styles */ .sidebar { width: 220px; background-color: var(--purple-dark); color: var(--gray-400); padding: 0; padding-left: 16px; flex-shrink: 0; display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } .sidebar-header { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sandbox-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: white; } .sandbox-icon { width: 32px; height: 32px; } .user-info { font-size: 12px; color: var(--gray-400); } .sidebar-menu { padding: 8px 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; } .menu-items-container { flex: 1; overflow-y: auto; min-height: 0; } .menu-item { padding: 8px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--gray-400); opacity: 0.8; font-size: 16px; transition: all 0.2s ease; } .menu-item:hover { background-color: rgba(255, 255, 255, 0.05); color: white; } .menu-item.active { background-color: rgba(255, 255, 255, 0.1); color: white; } .menu-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.6; filter: grayscale(1) brightness(1.5); } .has-submenu { display: flex; justify-content: space-between; align-items: center; } .submenu-arrow { margin-left: auto; font-size: 12px; } .submenu { background-color: rgba(0, 0, 0, 0.1); } .submenu-item { padding-left: 40px; font-size: 13px; } .sidebar-footer { margin-top: auto; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; background-color: var(--purple-dark); } .sidebar-footer .menu-item { opacity: 0.8; } /* Main Content Styles */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; } .main-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; background-color: white; border-bottom: 1px solid var(--gray-200); height: 80px; } .logo img { height: 48px; width: auto; } .header-actions { display: flex; gap: 16px; } .header-btn { padding: 12px 24px; border: 1px solid var(--gray-300); border-radius: 6px; background: none; cursor: pointer; font-size: 15px; font-weight: 500; transition: all 0.2s ease; } .header-btn:hover { background-color: var(--gray-100); } .header-btn.primary { background-color: var(--purple-light); color: white; border: none; } .header-btn.primary:hover { background-color: #5b4eb3; } .content { flex: 1; padding: 24px; overflow-y: auto; } .page-header { display: flex; align-items: center; margin-bottom: 24px; } .page-header h1 { font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .help-icon { color: var(--gray-500); font-size: 18px; } /* Issue Tabs */ .issue-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--gray-200); margin-bottom: 16px; } .tab { padding: 12px 0; cursor: pointer; color: var(--gray-600); position: relative; } .tab.active { color: var(--purple-light); } .tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--purple-light); } .count { background-color: var(--gray-200); padding: 2px 6px; border-radius: 12px; font-size: 12px; margin-left: 4px; } .search-bar { background-color: white; padding: 16px; border-radius: 4px; margin-bottom: 16px; border: 1px solid var(--gray-200); display: flex; align-items: center; gap: 16px; } .filter-group { display: flex; gap: 8px; flex-shrink: 0; } .filter-select { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 4px; background-color: white; font-size: 14px; } .search-input { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; background-color: white; border: 1px solid var(--gray-300); border-radius: 4px; padding: 4px 8px; } .search-input input { border: none; padding: 4px; font-size: 14px; flex: 1; min-width: 100px; } .search-tags { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .search-tag { background-color: var(--gray-100); padding: 4px 8px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; } .search-tag .remove { cursor: pointer; color: var(--gray-500); } /* Issues List Header */ .issues-header { display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 1fr 1fr; padding: 12px 16px; background-color: white; border: 1px solid var(--gray-200); border-bottom: none; font-size: 12px; font-weight: 600; color: var(--gray-600); } .issues-list { background-color: white; border: 1px solid var(--gray-200); border-radius: 0 0 4px 4px; } .issue-item { display: grid; grid-template-columns: 40px 3fr 1fr 1fr 1fr 1fr 1fr; padding: 16px; border-bottom: 1px solid var(--gray-200); align-items: center; } .issue-item:last-child { border-bottom: none; } .issue-title { font-weight: 500; color: var(--gray-800); } .issue-meta { font-size: 12px; color: var(--gray-600); } .graph-col { padding: 0 32px; } .priority-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .priority-high { background-color: #ffebee; color: var(--red); } .priority-medium { background-color: #fff3cd; color: var(--yellow); } /* Modal Styles */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 2000; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background: white; border-radius: var(--radius-lg); width: 70%; max-width: 900px; position: relative; overflow: hidden; padding: var(--space-md); } .go-back-btn { position: absolute; top: 32px; left: 48px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; padding-left: 6px; height: 32px; font-size: 14px; font-weight: 600; color: rgb(62, 52, 70); background-color: white; border: 1px solid rgb(224, 220, 229); border-radius: 6px; cursor: pointer; box-shadow: rgba(43, 34, 51, 0.04) 0px 1px 2px; z-index: 1; } .go-back-btn:hover { background-color: var(--gray-100); } .arrow-icon-left { display: inline-block; margin-top: -2px; margin-right: 4px; transform: rotate(180deg); } .modal-body { display: flex; min-height: 400px; padding: 60px var(--space-xl) 0 var(--space-xl); gap: var(--space-xl); } .modal-left { flex: 1; padding: 0; display: flex; flex-direction: column; } .demo-label { color: var(--purple-light); font-size: 13px; font-weight: 600; margin-bottom: var(--space-md); letter-spacing: 0.5px; } .modal-left h2 { font-size: 28px; font-weight: 600; color: var(--gray-800); margin-bottom: var(--space-md); } .modal-left p { color: var(--gray-600); font-size: 15px; line-height: 1.6; margin-bottom: var(--space-md); } .email-input-container { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; } .consent-text { font-size: 12px; color: var(--gray-500); line-height: 1.4; text-align: center; width: 100%; padding: var(--space-md) var(--space-xl); } .consent-text a { color: var(--purple-light); text-decoration: none; } .email-input { width: 100%; height: 34px; padding: var(--space-xs) var(--space-sm); font-size: 14px; line-height: 1.42857; color: #625471; background-color: #fff; border: 1px solid #c9c0d1; border-radius: var(--radius-sm); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .email-input:focus { outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 2px rgba(108, 95, 199, 0.1); } .enter-sandbox-btn { width: fit-content; margin-left: auto; padding: var(--space-sm) var(--space-md); height: 38px; font-size: 0.875rem; font-weight: 600; line-height: 1rem; border-radius: var(--radius-md); border: 1px solid var(--purple-light); background-color: var(--purple-light); color: white; cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); transition: all 0.2s ease; box-shadow: rgba(43, 34, 51, 0.04) 0px 1px 2px; } .enter-sandbox-btn:disabled { background-color: white; color: rgb(113, 99, 126); border-color: rgb(224, 220, 229); cursor: not-allowed; opacity: 0.65; box-shadow: none; } .enter-sandbox-btn:not(:disabled):hover { background-color: var(--purple-hover); } .btn-arrow { font-size: 18px; opacity: inherit; } .btn-arrow svg { height: 14px; width: 14px; margin-right: 4px; transform: rotate(90deg); } .modal-right { width: 400px; background-color: white; display: flex; align-items: center; justify-content: center; padding: 0; } .sandbox-illustration { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-lg); } @media (max-width: 768px) { .modal-content { width: 95%; max-width: 500px; } .modal-right { display: none; } } </style> </head> <body> <div class="app-container">  <nav class="sidebar"> <div class="sidebar-header"> <div class="sandbox-selector"> <img src="https://s1.sentry-cdn.com/_static/dist/sentry/assets/sandbox.e8f35115e6b3bcf215b2.jpg" alt="Sandbox" class="sandbox-icon" /> <span>Sandbox</span> </div> <div class="user-info">Demo User</div> </div> <div class="sidebar-menu"> <div class="menu-items-container"> <div class="menu-item active"> <span class="menu-icon">📦</span> Issues </div> <div class="menu-item"> <span class="menu-icon">⟨⟩</span> Projects </div> <div class="menu-item has-submenu"> <span class="menu-icon">🔍</span> Explore <span class="submenu-arrow">▾</span> </div> <div class="submenu"> <div class="menu-item submenu-item">Traces</div> <div class="menu-item submenu-item">Profiles</div> <div class="menu-item submenu-item">Replays</div> <div class="menu-item submenu-item">Discover</div> </div> <div class="menu-item has-submenu"> <span class="menu-icon">📈</span> Insights <span class="submenu-arrow">▾</span> </div> <div class="submenu"> <div class="menu-item submenu-item">Frontend</div> <div class="menu-item submenu-item">Backend</div> <div class="menu-item submenu-item">Mobile</div> <div class="menu-item submenu-item">AI</div> </div> <div class="menu-item"> <span class="menu-icon">💬</span> User Feedback </div> <div class="menu-item"> <span class="menu-icon">⏱️</span> Crons </div> <div class="menu-item"> <span class="menu-icon">🚨</span> Alerts </div> <div class="menu-item"> <span class="menu-icon">📊</span> Dashboards </div> <div class="menu-item"> <span class="menu-icon">📦</span> Releases </div> <div class="menu-item"> <span class="menu-icon">📊</span> Stats </div> <div class="menu-item"> <span class="menu-icon">⚙️</span> Settings </div> </div> <div class="sidebar-footer"> <div class="menu-item"> <span class="menu-icon">⚡</span> My Sentry Trial </div> <div class="menu-item"> <span class="menu-icon">❓</span> Help </div> <div class="menu-item"> <span class="menu-icon">📢</span> What's new </div> <div class="menu-item"> <span class="menu-icon">◀️</span> Collapse </div> </div> </div> </nav>  <main class="main-content">  <header class="main-header"> <div class="logo"> <img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" alt="SENTRY" /> </div> <div class="header-actions"> <button class="header-btn">DOCUMENTATION</button> <button class="header-btn">REQUEST A DEMO</button> <button class="header-btn primary">START FREE TRIAL</button> </div> </header>  <div class="content"> <div class="page-header"> <h1>Issues <span class="help-icon">ⓘ</span></h1> </div>  <div class="issue-tabs"> <div class="tab active"> Prioritized <span class="count">847</span> </div> <div class="tab">For Review <span class="count">99+</span></div> <div class="tab">Regressed</div> <div class="tab">Escalating <span class="count">15</span></div> <div class="tab">Archived</div> </div>  <div class="search-bar"> <div class="filter-group"> <select class="filter-select"> <option>All Projects</option> </select> <select class="filter-select"> <option>All Envs</option> </select> <select class="filter-select"> <option>14D</option> </select> </div> <div class="search-input"> <input type="text" placeholder="Custom Search" /> <div class="search-tags"> <div class="search-tag"> is unresolved <span class="remove">×</span> </div> <div class="search-tag"> issue.priority is high or medium <span class="remove">×</span> </div> </div> </div> </div>  <div class="issues-header"> <div class="checkbox-col"></div> <div class="sort-col">Last Seen ▼</div> <div class="graph-col">GRAPH</div> <div class="events-col">EVENTS</div> <div class="users-col">USERS</div> <div class="priority-col">PRIORITY</div> <div class="assignee-col">ASSIGNEE</div> </div>  <div class="issues-list"> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"> <strong>Exception</strong> checkout </div> <div class="issue-meta"> Not enough inventory for product <span class="platform">FLASK-9</span> <span class="status">Unhandled</span> <span class="time">22s ago | 2wk old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="10,8,15,9,12,7,14,8,10,5,11,13" ></div> <div class="events-col">64k</div> <div class="users-col">618</div> <div class="priority-col"> <span class="priority-tag priority-high">high</span> </div> <div class="assignee-col">—</div> </div> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"> <strong>Rage Click</strong> https://application-monitoring-react-dot-sales-engineering-sf.app... </div> <div class="issue-meta"> div#root > div#body-container > div.checkout-container > form.checkout-form <span class="platform">REACT-2</span> <span class="time">2min ago | 2mo old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="8,12,6,15,9,11,7,13,8,10,14,9" ></div> <div class="events-col">23k</div> <div class="users-col">12k</div> <div class="priority-col"> <span class="priority-tag priority-medium">medium</span> </div> <div class="assignee-col">—</div> </div> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"><strong>TypeError</strong> /</div> <div class="issue-meta"> Failed to fetch <span class="platform">REACT-81</span> <span class="status">Unhandled</span> <span class="time">3min ago | 2d old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="6,9,12,8,15,7,11,13,8,10,14,9" ></div> <div class="events-col">619</div> <div class="users-col">603</div> <div class="priority-col"> <span class="priority-tag priority-high">high</span> </div> <div class="assignee-col">—</div> </div> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"> <strong>Exception</strong> checkout </div> <div class="issue-meta"> Not enough inventory for product <span class="platform">FLASK-9</span> <span class="status">Unhandled</span> <span class="time">22s ago | 2wk old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="10,8,15,9,12,7,14,8,10,5,11,13" ></div> <div class="events-col">64k</div> <div class="users-col">618</div> <div class="priority-col"> <span class="priority-tag priority-high">high</span> </div> <div class="assignee-col">—</div> </div> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"> <strong>Rage Click</strong> https://application-monitoring-react-dot-sales-engineering-sf.app... </div> <div class="issue-meta"> div#root > div#body-container > div.checkout-container > form.checkout-form <span class="platform">REACT-2</span> <span class="time">2min ago | 2mo old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="8,12,6,15,9,11,7,13,8,10,14,9" ></div> <div class="events-col">23k</div> <div class="users-col">12k</div> <div class="priority-col"> <span class="priority-tag priority-medium">medium</span> </div> <div class="assignee-col">—</div> </div> <div class="issue-item"> <div class="checkbox-col"> <input type="checkbox" /> </div> <div class="issue-details"> <div class="issue-title"><strong>TypeError</strong> /</div> <div class="issue-meta"> Failed to fetch <span class="platform">REACT-81</span> <span class="status">Unhandled</span> <span class="time">3min ago | 2d old</span> <span class="users">▶ 50+</span> </div> </div> <div class="graph-col" data-sparkline="6,9,12,8,15,7,11,13,8,10,14,9" ></div> <div class="events-col">619</div> <div class="users-col">603</div> <div class="priority-col"> <span class="priority-tag priority-high">high</span> </div> <div class="assignee-col">—</div> </div> </div> </div> </main> </div>  <div class="modal"> <div class="modal-content"> <div class="modal-body"> <button class="go-back-btn" onclick="window.location.href='https://sentry.io'" > <span class="arrow-icon-left"> <span class="btn-arrow"> <svg role="img" class="app-1qx34im" viewBox="0 0 16 16" fill="currentColor" height="18px" width="18px" > <path d="M13.76,7.32a.74.74,0,0,1-.53-.22L8,1.87,2.77,7.1A.75.75,0,1,1,1.71,6L7.47.28a.74.74,0,0,1,1.06,0L14.29,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,13.76,7.32Z" ></path> <path d="M8,15.94a.75.75,0,0,1-.75-.75V.81a.75.75,0,0,1,1.5,0V15.19A.75.75,0,0,1,8,15.94Z" ></path> </svg> </span ></span> Go back </button> <div class="modal-left"> <div class="demo-label">SANDBOX DEMO</div> <h2>Interactive Sandbox</h2> <p> Welcome to our digital showroom where you get to kick our proverbial tires. To see Sentry in action and get updates about the latest and greatest features, enter your email below. </p> <form class="email-input-container" onsubmit="return false;"> <input type="email" placeholder="Work email" class="email-input" /> <button type="submit" class="enter-sandbox-btn"> <span class="btn-arrow"> <svg role="img" class="app-1qx34im" viewBox="0 0 16 16" fill="currentColor" height="18px" width="18px" > <path d="M13.76,7.32a.74.74,0,0,1-.53-.22L8,1.87,2.77,7.1A.75.75,0,1,1,1.71,6L7.47.28a.74.74,0,0,1,1.06,0L14.29,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,13.76,7.32Z" ></path> <path d="M8,15.94a.75.75,0,0,1-.75-.75V.81a.75.75,0,0,1,1.5,0V15.19A.75.75,0,0,1,8,15.94Z" ></path> </svg> </span> Enter Sandbox </button> </form> </div> <div class="modal-right"> <img src="https://s1.sentry-cdn.com/_static/dist/sentry/assets/sandbox.e8f35115e6b3bcf215b2.jpg" alt="Sandbox Illustration" class="sandbox-illustration" /> </div> </div> <div class="consent-text"> By entering sandbox you agree to our <a href="https://sentry.io/privacy/">privacy policy</a> and <a href="https://sentry.io/terms/">terms of service</a>. </div> </div> </div> <script> function createSparkline(data) { const width = 200; const height = 30; const barCount = data.length; const barWidth = Math.floor(width / barCount) - 1; // -1 for gap between bars const max = Math.max(...data); const bars = data .map((value, index) => { const barHeight = max === 0 ? 0 : (value / max) * height; const x = index * (barWidth + 1); const y = height - barHeight; return `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" fill="#e9ecef" />`; }) .join(""); return ` <svg width="${width}" height="${height}" class="sparkline"> ${bars} </svg> `; } function handleSubmit(email) { if (email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { document.cookie = `sandbox-consent=${1}; path=/; domain=.sentry.io`; localStorage.setItem("demo-mode:email", email); const url = new URL(window.location.href); url.searchParams.set("_", Date.now()); window.location.replace(url.toString()); } } document.addEventListener("DOMContentLoaded", () => { document .querySelectorAll(".graph-col[data-sparkline]") .forEach((graphCol) => { const data = graphCol .getAttribute("data-sparkline") .split(",") .map(Number); graphCol.innerHTML = createSparkline(data); }); const emailInput = document.querySelector(".email-input"); const enterSandboxBtn = document.querySelector(".enter-sandbox-btn"); const form = document.querySelector(".email-input-container"); enterSandboxBtn.disabled = true; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; emailInput.addEventListener("input", (e) => { const isValidEmail = emailRegex.test(e.target.value); enterSandboxBtn.disabled = !isValidEmail; }); form.addEventListener("submit", (e) => { e.preventDefault(); handleSubmit(emailInput.value); }); enterSandboxBtn.addEventListener("click", (e) => { e.preventDefault(); handleSubmit(emailInput.value); }); }); </script> </body> </html>

CINXE.COM

Sentry Sandbox