From 9db1a449c1e8447324bf759600cc27039507a5f6 Mon Sep 17 00:00:00 2001 From: Abdellah Hariti Date: Wed, 30 Oct 2024 21:01:04 +0100 Subject: [PATCH 1/6] feat: convert mermaid code blocks to svgs client side --- develop-docs/application/architecture.mdx | 75 ++++++++++++++++++++--- src/components/docPage/index.tsx | 32 ++++++++++ 2 files changed, 100 insertions(+), 7 deletions(-) diff --git a/develop-docs/application/architecture.mdx b/develop-docs/application/architecture.mdx index b0aa0a4c27a74..24464de12f880 100644 --- a/develop-docs/application/architecture.mdx +++ b/develop-docs/application/architecture.mdx @@ -7,9 +7,31 @@ sidebar_order: 1 Edges represent service dependencies. -![](https://mermaid.ink/svg/pako:eNqFU01PwzAM_StRTiDGeu8BCbQbcKFc0DwhN_XWqs2H0kQwtv13smSj1SrgFj8_v9gvzo4LXRHP-caiqdnrAhQas3zT3rJ7Y7pGoGu0WrHb2zu2LxaPe9aVu92Txoo9YIdKkD0cQHVlYgDvSTm7ndMnStPRXGiZoWkygOom6522lAHfM0sdbv8uO9IS-v5B5RJ4EQN2FaJr4CtQ_VaWOraobdQZ6KDiDRFtcd3iGLBUNX0o_2GnYuVLnKCSpEBRUzXJGN27jaWp0Fn-qDduYAAmDBGmaGvtewIV2RH90rolMmSnvZ5CbVuyY2sicHJnzPltliF5YcqQmM455MYvAApUnCM5yYDXzpk-z7JN42pfxlXYkEsqWbKbB1oR6QstvAypuG_Az1rp1f7RStt01HqJ9AstPuOSrMSmCou-A8UC0dUkCXgejhWt0XfueOchUNE7XWyV4LmznmbcmwodLRoMX0TyfI1dH9DgVpj5OX2e-IcO3z0YL2M) -[diagram source](https://mermaid.live/edit#pako:eNqFU01PwzAM_StRTiDGeu8BCbQbcKFc0DwhN_XWqs2H0kQwtv13smSj1SrgFj8_v9gvzo4LXRHP-caiqdnrAhQas3zT3rJ7Y7pGoGu0WrHb2zu2LxaPe9aVu92Txoo9YIdKkD0cQHVlYgDvSTm7ndMnStPRXGiZoWkygOom6522lAHfM0sdbv8uO9IS-v5B5RJ4EQN2FaJr4CtQ_VaWOraobdQZ6KDiDRFtcd3iGLBUNX0o_2GnYuVLnKCSpEBRUzXJGN27jaWp0Fn-qDduYAAmDBGmaGvtewIV2RH90rolMmSnvZ5CbVuyY2sicHJnzPltliF5YcqQmM455MYvAApUnCM5yYDXzpk-z7JN42pfxlXYkEsqWbKbB1oR6QstvAypuG_Az1rp1f7RStt01HqJ9AstPuOSrMSmCou-A8UC0dUkCXgejhWt0XfueOchUNE7XWyV4LmznmbcmwodLRoMX0TyfI1dH9DgVpj5OX2e-IcO3z0YL2M) - +```mermaid +graph TD +app[Your Application] --> |SDK| lb{{Load Balancer}} +lb --> |"sentry.example.com/api/\d+/store/"| relay +lb --> |"sentry.example.com"| sentry_web["Sentry (web)"] +symbolicator --> sentry_web +relay --> kafka +relay --> redis +sentry_web --> snuba +sentry_web --> memcached +sentry_web --> postgres +sentry_web --> redis +snuba --> kafka +snuba --> redis +snuba --> clickhouse +kafka --> zookeeper +sentry_web --> sentry_worker["Sentry (worker)"] +sentry_worker --> memcached +sentry_worker --> redis +sentry_worker --> postgres +sentry_worker --> symbolicator + +click snuba "https://github.com/getsentry/snuba" "Snuba Documentation" +click relay "https://github.com/getsentry/relay" "Relay Documentation" +``` ## Event pipeline How an event gets saved. Edges represent data flow through system. @@ -25,8 +47,29 @@ This graph is extremely simplified mostly due to layout constraints. Missing fro For more information read [Path of an event through Relay](https://getsentry.github.io/relay/relay_server/index.html#path-of-an-event-through-relay) and [Event Ingestion Pipeline](https://getsentry.github.io/event-ingestion-graph/). -![](https://mermaid.ink/svg/pako:eNp9UsFugzAM_ZUop1Uq4o6mXtbLNO3UXSbSgwluQUCC4qQaovz7QqArbdWdEtvPz_azey51jjzhRwNtwb62QgkFbZt-a2eY_9SlBFtqtWdRtGFnQpUTkwaoQDqzOut7dSzVzzAIVWcTJoa2jFVMVhuMz8xgDZ1Q4QmACg4VpC_v6ohk2cdorfZCBXcAlCESSa3INWhSwXeorOnmALsEBPdpd-BA0BpsjZZIFOHJp45DkcumGSXWaLor6WQzC1RRYGQP-YGU4IQXuieQu6LPiLom00HXBd-D8xnh_21drSmoXAbRLLifeDQnxV8zs3kJQLIGoVkJPi7Br_dGrECQzpmzOgvSRZHltkKZi4Nu0m72JP3AVaEd4djd25-16IWvuUc3UOb-SPuRR3BbYOMxif_meABXW8GFGjwUnNW7TkmeWONwzV2be0G3JfhpGp4coCbvxbz0t_k5HX64_-EXvdQVKA) -[diagram source](https://mermaid.live/edit#pako:eNp9UsFugzAM_ZUop1Uq4o6mXtbLNO3UXSbSgwluQUCC4qQaovz7QqArbdWdEtvPz_azey51jjzhRwNtwb62QgkFbZt-a2eY_9SlBFtqtWdRtGFnQpUTkwaoQDqzOut7dSzVzzAIVWcTJoa2jFVMVhuMz8xgDZ1Q4QmACg4VpC_v6ohk2cdorfZCBXcAlCESSa3INWhSwXeorOnmALsEBPdpd-BA0BpsjZZIFOHJp45DkcumGSXWaLor6WQzC1RRYGQP-YGU4IQXuieQu6LPiLom00HXBd-D8xnh_21drSmoXAbRLLifeDQnxV8zs3kJQLIGoVkJPi7Br_dGrECQzpmzOgvSRZHltkKZi4Nu0m72JP3AVaEd4djd25-16IWvuUc3UOb-SPuRR3BbYOMxif_meABXW8GFGjwUnNW7TkmeWONwzV2be0G3JfhpGp4coCbvxbz0t_k5HX64_-EXvdQVKA) +```mermaid +graph TD + +app[Your application] --> |sends crashes| lb{{nginx}} +lb --> |/api/n/store/| relay +relay --> kafka[(Ingest Kafka)] +kafka --> ingest-consumer["Sentry ingest consumer"] +ingest-consumer --> preprocess-event + +subgraph celery["Sentry celery tasks"] + preprocess-event --> save-event + preprocess-event --> process-event + preprocess-event --> symbolicate-event + symbolicate-event --> process-event + process-event --> save-event + save-event --> snuba-kafka[("Snuba Kafka
(eventstream)")] +end + +subgraph snuba["Snuba"] + snuba-kafka --> snuba-consumer["Snuba consumers"] + snuba-consumer --> clickhouse[("Clickhouse")] +end +``` ## Multi-Region @@ -71,8 +114,26 @@ In addition to the siloed modes, there also exists a **Monolith** mode. In monol ### Multi-region architecture -![multi-region architecture](https://mermaid.ink/svg/pako:eNp1UctqwzAQ_JVFpxSSH_ChUOoUeiiEuD5JOajS2hbIktGjJYT8e1dumjotvS2zs_NgT0x5jaxinfUfapAhwWstnHDZ8KfgXUKnoX0-wGZzDzmGsphnFa8j5lAuhIv5rQ9yGgoReNvAHnvj3UE4IEhOpmANuhSO8LC7ik49X9Fi52PqA8a7H_6FgJqvti1s3-kUaplkoVCwhaOKwB8pbvAWGmP9rKGK5RL9Y66K9zdjGeBWnRoCpwSLPpiLOGG_JTEXTVrc9pn5F8J_fdiajRhGaTQ95FSuBEsDjihYRaPGTmabBBPuTFSZk2-OTrEqhYxrlictE9ZGUuaRVZ20kVDUJvnw8vXk-dfnT1dDqnk) -[diagram source](https://mermaid.live/edit#pako:eNp1UctqwzAQ_JVFpxSSH_ChUOoUeiiEuD5JOajS2hbIktGjJYT8e1dumjotvS2zs_NgT0x5jaxinfUfapAhwWstnHDZ8KfgXUKnoX0-wGZzDzmGsphnFa8j5lAuhIv5rQ9yGgoReNvAHnvj3UE4IEhOpmANuhSO8LC7ik49X9Fi52PqA8a7H_6FgJqvti1s3-kUaplkoVCwhaOKwB8pbvAWGmP9rKGK5RL9Y66K9zdjGeBWnRoCpwSLPpiLOGG_JTEXTVrc9pn5F8J_fdiajRhGaTQ95FSuBEsDjihYRaPGTmabBBPuTFSZk2-OTrEqhYxrlictE9ZGUuaRVZ20kVDUJvnw8vXk-dfnT1dDqnk) +```mermaid +flowchart TD + +ui[Frontend UI] --> usr +ui --> cs +ui --> eur + + +subgraph usr [US Region] + usapi[US Sentry API] --> uspg[(US Postgres)] + usapi --> used[(EU Event Data)] +end +subgraph cs [Control Silo] + capi[Control Silo Sentry API] --> cpg[(Control Postgres)] +end +subgraph eur [EU Region] + euapi[EU Sentry API] --> eupg[(EU Postgres)] + euapi --> eued[(EU Event Data)] +end +``` Each region silo can be scaled independently, and is isolated from other regions. Within each region exists separate, dedicated infrastructure and applications as outlined in the [application overview](/architecture/#high-level-overview). diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx index 5748ea9d5568d..118ff33d7eb52 100644 --- a/src/components/docPage/index.tsx +++ b/src/components/docPage/index.tsx @@ -1,4 +1,5 @@ import {ReactNode} from 'react'; +import Script from 'next/script'; import {getCurrentGuide, getCurrentPlatform, nodeForPath} from 'sentry-docs/docTree'; import {serverContext} from 'sentry-docs/serverContext'; @@ -54,6 +55,9 @@ export function DocPage({ const leafNode = nodeForPath(rootNode, unversionedPath); + // a hack to show syntax highlighting on editors + const javascript = String.raw; + return (
@@ -108,6 +112,34 @@ export function DocPage({ )} + {/* can't use useEffect here (server component) */} +