CINXE.COM

<!DOCTYPE html><html lang="en" data-sentry-component="RootLayout" data-sentry-source-file="layout.tsx"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/b9378c7268e717c1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c22ccc5eb58b83e1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/c9d46349fae1f48c.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/c17e2f2a11627bf5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/b52557125fa02b8a.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e3064454c3082c14.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7028a603747574d7.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/75a6696a350c96f8.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/6ca8e94f9559bd34.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-d79a28a3f658970a.js"/><script src="/_next/static/chunks/bc085c76-aaca70ef61e26627.js" async=""></script><script src="/_next/static/chunks/52774a7f-0922678f013b9b85.js" async=""></script><script src="/_next/static/chunks/4bd1b696-18a3d423c1334870.js" async=""></script><script src="/_next/static/chunks/8931-09ed53a4137538b5.js" async=""></script><script src="/_next/static/chunks/main-app-72918f25ac9c35e0.js" async=""></script><script src="/_next/static/chunks/2408-24bc9320f6c9c6b5.js" async=""></script><script src="/_next/static/chunks/app/layout-53e78c04f62af853.js" async=""></script><script src="/_next/static/chunks/0e5ce63c-1aac88c3332c7248.js" async=""></script><script src="/_next/static/chunks/9212-9efaa171a6fab3eb.js" async=""></script><script src="/_next/static/chunks/3932-3ec231ea91b1e5ec.js" async=""></script><script src="/_next/static/chunks/463-5a49920f1a516c58.js" async=""></script><script src="/_next/static/chunks/4746-3d8e7491215d00ec.js" async=""></script><script src="/_next/static/chunks/818-89022b4aad375c1e.js" async=""></script><script src="/_next/static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js" async=""></script><script src="/_next/static/chunks/app/not-found-2a59ee56bf1fd327.js" async=""></script><script src="/_next/static/chunks/app/%5B%5B...path%5D%5D/layout-02fd90067ea08d09.js" async=""></script><script src="/_next/static/chunks/app/global-error-1cf061f76ccf130f.js" async=""></script><link rel="preload" href="https://plausible.io/js/script.js" as="script"/><link rel="preload" href="https://widget.kapa.ai/kapa-widget.bundle.js" as="script"/><meta name="next-size-adjust" content=""/><title>Frontend</title><meta name="description" content="How we write frontend code at Sentry."/><meta name="zd-site-verification" content="ocu6mswx6pke3c6qvozr2e"/><link rel="canonical" href="https://develop.sentry.dev/frontend/"/><meta property="og:title" content="Frontend"/><meta property="og:description" content="How we write frontend code at Sentry."/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Frontend"/><meta name="twitter:description" content="How we write frontend code at Sentry."/><link rel="icon" href="/favicon.ico"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_d51e15"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div data-is-root-theme="true" data-accent-color="iris" data-gray-color="sand" data-has-background="true" data-panel-background="translucent" data-radius="large" data-scaling="95%" data-sentry-element="Theme" data-sentry-source-file="layout.tsx" class="radix-themes"><div data-sentry-component="DocsLayout" data-sentry-source-file="layout.tsx"><div class="tw-app" data-sentry-component="DocPage" data-sentry-source-file="index.tsx"><header class="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0" data-sentry-component="Header" data-sentry-source-file="header.tsx"><style>:root { --header-height: 80px; }</style><nav class="mx-auto px-6 lg:px-8 py-2 flex items-center"><button class="lg:hidden mr-3"><label for="style_navbar-menu-toggle__dc5I6" aria-label="Close" aria-hidden="true" class="inline-flex items-center cursor-pointer"><svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline dark:text-[var(--foreground)] text-[var(--gray-10)]" stroke-width="1.8"><path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></label></button><a title="Sentry error monitoring" class="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]" data-sentry-element="Link" data-sentry-source-file="header.tsx" href="/"><div class="h-full pb-[6px]"><img alt="Sentry's logo" data-sentry-element="Image" data-sentry-source-file="header.tsx" loading="lazy" width="40" height="37" decoding="async" data-nimg="1" class="h-16 dark:invert" style="color:transparent" src="/_next/static/media/sentry-logo-dark.fc8e1eeb.svg"/></div>Docs</a><div class="hidden md:flex justify-center lg:justify-start w-full px-6"><div class="search_search__KfRs2" data-sentry-component="Search" data-sentry-source-file="index.tsx"><div class="search_search-bar__XzLtg"><div class="search_input-wrapper__pLUH0"><input type="text" placeholder="Search Docs" aria-label="Search" class="search_search-input__BGbR4" value=""/><kbd class="search_search-hotkey__R5dYK" data-focused="false">鈱楰</kbd></div><span class="text-[var(--desatPurple10)] hidden md:inline">or</span><div data-accent-color="gray" data-radius="medium" data-sentry-element="Button" data-sentry-source-file="index.tsx" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-Button font-medium text-[var(--foreground)] py-2 px-3 uppercase cursor-pointer kapa-ai-class hidden md:flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 undefined" data-sentry-element="svg" data-sentry-component="MagicIcon" data-sentry-source-file="magic.tsx"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" data-sentry-element="path" data-sentry-source-file="magic.tsx"></path></svg><span>Ask AI</span></div></div></div></div><div class="hidden lg-xl:flex justify-end flex-1 gap-6 items-center min-w-fit"><a data-sentry-element="Link" data-sentry-source-file="navlink.tsx" data-accent-color="gray" data-radius="medium" data-sentry-component="NavLink" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-Button font-medium text-[var(--foreground)] py-2 px-3 uppercase" href="https://sentry.io/changelog/">Changelog</a><a data-sentry-element="Link" data-sentry-source-file="navlink.tsx" data-accent-color="gray" data-radius="medium" data-sentry-component="NavLink" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-Button font-medium text-[var(--foreground)] py-2 px-3 uppercase" href="https://sandbox.sentry.io/">Sandbox</a><a data-sentry-element="Link" data-sentry-source-file="navlink.tsx" data-accent-color="gray" data-radius="medium" data-sentry-component="NavLink" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-Button font-medium text-[var(--foreground)] py-2 px-3 uppercase" href="https://sentry.io/">Go to Sentry</a><a class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-Button font-medium text-[var(--foreground)] py-2 px-3 uppercase transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-[#fa7faa] hover:via-[#ff9691] hover:to-[#ffb287]" data-sentry-element="Link" data-sentry-source-file="navlink.tsx" data-accent-color="gray" data-radius="medium" data-sentry-component="NavLink" href="https://sentry.io/signup/">Get Started</a><style> :root, .light, .light-theme { --theme-toggle-sun-icon-display: block; --theme-toggle-moon-icon-display: none; } .dark, .dark-theme { --theme-toggle-sun-icon-display: none; --theme-toggle-moon-icon-display: block; } </style><button data-accent-color="gray" data-sentry-element="IconButton" data-sentry-source-file="theme-toggle.tsx" data-state="closed" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-IconButton"><svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:var(--theme-toggle-sun-icon-display)" data-sentry-element="SunIcon" data-sentry-source-file="theme-toggle.tsx"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:var(--theme-toggle-moon-icon-display)" data-sentry-element="MoonIcon" data-sentry-source-file="theme-toggle.tsx"><path d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="lg-xl:hidden ml-auto"><div class="flex gap-6 items-center" data-sentry-component="MobileMenu" data-sentry-source-file="index.tsx"><style> :root, .light, .light-theme { --theme-toggle-sun-icon-display: block; --theme-toggle-moon-icon-display: none; } .dark, .dark-theme { --theme-toggle-sun-icon-display: none; --theme-toggle-moon-icon-display: block; } </style><button data-accent-color="gray" data-sentry-element="IconButton" data-sentry-source-file="theme-toggle.tsx" data-state="closed" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-ghost rt-IconButton"><svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:var(--theme-toggle-sun-icon-display)" data-sentry-element="SunIcon" data-sentry-source-file="theme-toggle.tsx"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:var(--theme-toggle-moon-icon-display)" data-sentry-element="MoonIcon" data-sentry-source-file="theme-toggle.tsx"><path d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button data-accent-color="gray" data-radius="medium" data-sentry-element="Button" data-sentry-source-file="index.tsx" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Raonmudb:" data-state="closed" class="rt-reset rt-BaseButton rt-r-size-4 rt-variant-ghost rt-Button font-medium text-[var(--foreground)]">Menu<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" data-sentry-element="TriangleRightIcon" data-sentry-source-file="index.tsx"><path d="M6 11L6 4L10.5 7.5L6 11Z" fill="currentColor"></path></svg></button></div></div></nav></header><section class="px-0 flex relative"><aside class="style_sidebar__iEJoR" data-sentry-component="DevelopDocsSidebar" data-sentry-source-file="developDocsSidebar.tsx"><input type="checkbox" id="style_navbar-menu-toggle__dc5I6" class="hidden"/><style>:root { --sidebar-width: 300px; }</style><div class="md:flex flex-col items-stretch"><div class="style_toc__wKI2w"><ul data-sidebar-tree="true"><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/getting-started/"><h6>Getting Started</h6></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/engineering-practices/"><h6>Engineering Practices</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/application-architecture/"><h6>Application Architecture</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/development-infrastructure/"><h6>Development Infrastructure</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/backend/"><h6>Backend</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center active justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/frontend/"><h6>Frontend</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(0deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a><ul data-sidebar-tree="true" class="pl-3"><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/design-tenets/">Frontend Design Tenets</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/using-styled-components/">Using Styled Components</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/component-library/">UI Component Library</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/upgrade-policies/">Dependency Upgrade Policies</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/using-hooks/">Using Hooks</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/using-rtl/">Using React Testing Library</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/strict-typescript-settings-guide/">Strict TypeScript Settings Guide</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/network-requests/">Network Requests</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/pull-request-previews/">Pull Request Previews</a><ul data-sidebar-tree="true"></ul></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a class=" css-1o62c7a" data-sidebar-link="true" data-sentry-element="Link" data-sentry-source-file="smartLink.tsx" data-sentry-component="SmartLink" href="/frontend/working-on-getting-started-docs/">Working on Getting Started Docs</a><ul data-sidebar-tree="true"></ul></li></ul></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/services/"><h6>Services</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/integrations/"><h6>Integrations</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/ingestion/"><h6>Ingestion</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/sdk/"><h6>SDKs</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li><li class="mb-3" data-sidebar-branch="true" data-sentry-component="DynamicNav" data-sentry-source-file="dynamicNav.tsx"><a class=" style_sidebar-title__u_GwL flex items-center justify-between" data-sidebar-link="true" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/self-hosted/"><h6>Self-Hosted Sentry</h6><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="transition:transform 200ms;transform:rotate(270deg)" data-sentry-element="svg" data-sentry-component="NavChevron" data-sentry-source-file="navChevron.tsx"><path fill="currentColor" d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z" data-sentry-element="path" data-sentry-source-file="navChevron.tsx"></path></svg></a></li></ul><hr/><ul data-sidebar-tree="true"><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a href="https://open.sentry.io/code-of-conduct/" class="css-1o62c7a" data-sidebar-link="true" data-sentry-element="SidebarNavItem" data-sentry-source-file="externalLink.tsx" data-sentry-component="ExternalLink">Code of Conduct<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a></li><li class="toc-item " data-sidebar-branch="true" data-path="/frontend/" data-sentry-component="SidebarLink" data-sentry-source-file="sidebarLink.tsx"><style data-emotion="css 1o62c7a">.css-1o62c7a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;}</style><a href="https://docs.sentry.io" class="css-1o62c7a" data-sidebar-link="true" data-sentry-element="SidebarNavItem" data-sentry-source-file="externalLink.tsx" data-sentry-component="ExternalLink">User Documentation<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a></li></ul></div></div></aside><main class="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto"><div class="mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1 prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)] prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)] prose-img:my-2 prose-strong:text-[var(--gray-12)] w-[75ch] xl:max-w-[calc(100%-250px)]"><div class="mb-4"></div><ul class="list-none flex p-0 flex-wrap" style="margin:0" data-sentry-component="Breadcrumbs" data-sentry-source-file="index.tsx"><li class="style_breadcrumb-item__bDEaT"><a class=" " data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/">Home</a></li><li class="style_breadcrumb-item__bDEaT"><a class=" " data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/frontend/">Frontend</a></li></ul><div><hgroup><h1>Frontend</h1><h2>How we write frontend code at Sentry.</h2></hgroup><div id="main"><p>This guide specifically focuses on the frontend part of the <a href="https://github.com/getsentry/sentry" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Sentry<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>.</p><h2 id="directory-structure"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#directory-structure">Directory structure<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><p>The frontend codebase is currently located under <code>static/app</code>.</p><p>As of March 2025 <code>static/gsApp</code> and <code>static/gsAdmin</code> have been open-sourced and merged into <a href="https://github.com/getsentry/sentry" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Sentry<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>. If you are looking for earlier git history of those folders you need to have access to <a href="https://github.com/getsentry/getsentry" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Getsentry<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>.</p><h2 id="folder--file-structure"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#folder--file-structure">Folder & File structure<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><h3 id="file-naming"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#file-naming">File Naming<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><ul><li>Name a file meaningfully, based on how the module's functions, or classes are used or the application section they are used in.</li><li>Unless necessary, don't use prefixes or suffixes (ie. <code>dataScrubbingEditModal</code>, <code>dataScrubbingAddModal</code>) instead favor names like <code>dataScrubbing/editModal</code>.</li><li>Tip: Name the file to match the component or function that is being exported. This makes it easier for people to know what is inside the file, and re-use it.</li></ul><h3 id="using-indextsx"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#using-indextsx">Using <code>index.tsx?$</code><svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>Having an <code>index</code> file in a folder provides a way to implicitly import the main file without specifying it.</p><p>The use of an index file should comply with the following rules:</p><ul><li>If the folder is created to group components that are used together, and there is an entrypoint component, that uses the components within the grouping (examples, avatar, idBadge). The entrypoint component should be the index file.</li><li><em>Don't</em> use an <code>index.tsx?$</code> file if the folder contains components used in other parts of the app regardless of the entrypoint file. (ie, actionCreators, panels)</li><li><em>Don't</em> use an index file just to re-export. Prefer importing individual components instead.</li></ul><h2 id="react"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#react">React<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><h3 id="defining-react-components"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#defining-react-components">Defining React components<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>New components should be created as functional components, using function declarations instead of arrow functions. Props should be declared above the component.</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">TypeScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-typescript"><code class="code-highlight language-typescript"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span> </span><span class="code-line"> author<span class="token operator">:</span> object<span class="token punctuation">;</span> </span><span class="code-line"> content<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token function function-variable">onEdit</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token comment">// use destructuring assignment for props</span> </span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Note</span><span class="token punctuation">(</span><span class="token punctuation">{</span> author<span class="token punctuation">,</span> content<span class="token punctuation">,</span> onEdit <span class="token punctuation">}</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token keyword">const</span> <span class="token function function-variable">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token keyword">const</span> user <span class="token operator">=</span> ConfigStore<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"> </span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">.</span>isSuperuser<span class="token punctuation">)</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token function">onEdit</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token punctuation">}</span> </span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="code-line"> </span><span class="code-line"> <span class="token keyword">return</span> <span class="token operator"><</span>div onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>content<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre></div></div></div></div></div><h3 id="components-vs-views"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#components-vs-views">Components vs views<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>Both the <code>app/components/</code> and <code>app/views/</code> folders contain React components.</p><ul><li>Put files in <code>app/views/</code> when the component can not be reused in other parts of the codebase.<ul><li>Typically only layout/construction of full pages should be in this folder. ie: files that are imported by <a href="https://github.com/getsentry/sentry/blob/master/static/app/routes.tsx" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">routes.tsx<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>.</li></ul></li><li>Put files into <code>app/components/</code> for anything else that <em>could</em> be reused.<ul><li>If the component accepts any prop beyond <code>RouteComponentProps</code> then it very likely belongs inside <code>app/components/</code></li></ul></li></ul><h3 id="type-declarations"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#type-declarations">Type declarations<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>We do not follow any strict "prefer type over interface" rules for type declarations, so using either is at your discretion. That being said, there are <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">functional differences<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> between the two that you should be aware of so you can use them appropriately.</p><p>A simple guiding principle is to prefer interfaces when you require declaration merging. The reason for that is that type intersections are poor at detecting conflicts, produce unexpected or unwanted results and when used in combination with large types <a href="https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">perform worse than interfaces<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>.</p><p>Example:</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">TypeScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-typescript"><code class="code-highlight language-typescript"><span class="code-line"><span class="token comment">// This is valid and the outcome is a "never" type</span> </span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"blue"</span> <span class="token punctuation">}</span> <span class="token operator">&</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="code-line"> </span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> color<span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"><span class="token comment">// Interface 'C' incorrectly extends interface 'B'.</span> </span><span class="code-line"><span class="token comment">// Types of property 'color' are incompatible.</span> </span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre></div></div></div></div></div><h3 id="event-handlers"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#event-handlers">Event handlers<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>We use different prefixes to better distinguish event handlers from event callback props.</p><p>Use the <code>handle</code> prefix for event handlers, e.g:</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator"><</span><span class="token maybe-class-name">Button</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">handleDelete</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> </span></code></pre></div></div></div></div></div><p>For event callback props passed to the component use the <code>on</code> prefix, e.g:</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator"><</span><span class="token maybe-class-name">Button</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">onDelete</span><span class="token punctuation">}</span><span class="token operator">></span> </span></code></pre></div></div></div></div></div><h2 id="state-management"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#state-management">State management<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><div class="callout callout-info" role="alert" data-sentry-component="Callout" data-sentry-source-file="index.tsx"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="callout-icon" data-sentry-element="Icon" data-sentry-source-file="index.tsx"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><div class="callout-content"><div class="callout-body content-flush-bottom"><p>For React Hooks tips check out <a class=" " data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/frontend/using-hooks/">this page</a>.</p></div></div></div><p>Prefer the built-in <code>useState</code> and <code>useReducer</code> react hooks for state whenever possible.</p><p>We currently also have <a href="https://github.com/reflux/refluxjs" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Reflux<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> and <a href="https://github.com/mobxjs/mobx" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">MobX<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> included in package.json but their use for new cases is discouraged.</p><p>Reflux implements the unidirectional data flow pattern outlined by <a href="https://facebook.github.io/flux/" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Flux<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>. Stores are registered under <code>app/stores</code> and are used to store various pieces of data used by the application. Actions need to be registered under <code>app/actions</code>. We use action creator functions (under <code>app/actionCreators</code>) to dispatch actions. Reflux stores listen to actions and update themselves accordingly.</p><h2 id="testing"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#testing">Testing<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><div class="callout callout-info" role="alert" data-sentry-component="Callout" data-sentry-source-file="index.tsx"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="callout-icon" data-sentry-element="Icon" data-sentry-source-file="index.tsx"><path d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><div class="callout-content"><div class="callout-body content-flush-bottom"><p>For React Testing Library (RTL) tips check out <a class=" " data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="/frontend/using-rtl/">this page</a>.</p></div></div></div><p>Note: Your filename needs to be <code>.spec.tsx</code> for jest to run run it!</p><p>We have useful fixtures defined in <a href="https://github.com/getsentry/sentry/tree/master/tests/js/fixtures" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">tests/js/fixtures/<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> Use these! If you are defining mock data in a repetitive way, it鈥檚 probably worth adding this these files. <code>routerContext</code> is a particularly useful one for providing the context object that most view are written to rely on.</p><p><code>Client.addMockResponse()</code> is the best way to mock API requests. it鈥檚 <a href="https://github.com/getsentry/sentry/blob/master/static/app/__mocks__/api.tsx" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">our code<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> so if it鈥檚 confusing you, just put <code>console.log()</code> statements into its logic!</p><p>Marking your test method <code>async</code> and using the <code>await tick();</code> utility can let the event loop flush run events and fix this:</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line">wrapper<span class="token punctuation">.</span><span class="token property-access function method">find</span><span class="token punctuation">(</span><span class="token string">"ExpandButton"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access function method">simulate</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token keyword control-flow">await</span> <span class="token function">tick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">.</span><span class="token property-access function method">find</span><span class="token punctuation">(</span><span class="token string">"CommitRow"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access function method">toHaveLength</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></code></pre></div></div></div></div></div><h2 id="babel-syntax-plugins"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#babel-syntax-plugins">Babel Syntax Plugins<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><p>We have decided to only use ECMAScript proposals that are in stage 3 (or later) (See <a href="https://github.com/tc39/proposals" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">TC39 Proposals<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>). The only exception to this are decorators.</p><h2 id="new-syntax"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#new-syntax">New Syntax<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><h3 id="optional-chaining"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#optional-chaining">Optional Chaining<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p><a href="https://github.com/tc39/proposal-optional-chaining" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">Optional chaining<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> helps us access [nested] objects without having to check for existence before each property/method access. If we try to access a property of an <code>undefined</code> or <code>null</code> object, it will stop and return <code>undefined</code>.</p><h4 id="syntax"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#syntax">Syntax<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h4><p>The Optional Chaining operator is spelled <code>?.</code>. It may appear in three positions:</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">Bash</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-bash"><code class="code-highlight language-bash"><span class="code-line">obj?.prop // optional static property access </span><span class="code-line">obj?.<span class="token punctuation">[</span>expr<span class="token punctuation">]</span> // optional dynamic property access </span><span class="code-line">func?.<span class="token punctuation">(</span><span class="token punctuation">..</span>.args<span class="token punctuation">)</span> // optional <span class="token keyword">function</span> or method call </span></code></pre></div></div></div></div></div><blockquote><p>From <a href="https://github.com/tc39/proposal-optional-chaining" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">https://github.com/tc39/proposal-optional-chaining<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a></p></blockquote><h3 id="nullish-coalescing"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#nullish-coalescing">Nullish Coalescing<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h3><p>This is a way to set a "default" value. e.g. previously you would do something like</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> x <span class="token operator">=</span> volume <span class="token operator">||</span> <span class="token number">0.5</span><span class="token punctuation">;</span> </span></code></pre></div></div></div></div></div><p>Which is a problem since <code>0</code> is a valid value for <code>volume</code>, but because it evaluates to <code>false</code> -y, we do not short circuit the expression and the value of <code>x</code> is <code>0.5</code></p><p>If instead we used <a href="https://github.com/tc39/proposal-nullish-coalescing" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">nullish coalescing<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a></p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> x <span class="token operator">=</span> volume <span class="token operator">??</span> <span class="token number">0.5</span><span class="token punctuation">;</span> </span></code></pre></div></div></div></div></div><p>It will only default to <code>0.5</code> if <code>volume</code> is <code>null</code> or <code>undefined</code>.</p><h4 id="syntax-1"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#syntax-1">Syntax<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h4><p>Base case. If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.</p><div class="code-tabs-wrapper"><style data-emotion="css 1g3wcfx">.css-1g3wcfx pre[class*='language-']{padding:10px 12px;border-radius:0 0 3px 3px;}</style><div data-sentry-element="Container" data-sentry-component="CodeTabs" data-sentry-source-file="codeTabs.tsx" class="css-1g3wcfx"><style data-emotion="css g8b61s">.css-g8b61s{background:var(--code-background);border-bottom:1px solid #40364a;height:36px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem;border-radius:3px 3px 0 0;}</style><div data-sentry-element="TabBar" data-sentry-source-file="codeTabs.tsx" class="css-g8b61s"><style data-emotion="css 189m3ww">.css-189m3ww{color:#9481a4;padding:7px 6px 4px;display:inline-block;cursor:pointer;border:none;font-size:0.75rem;background:none;outline:none;border-bottom:3px solid transparent;}.css-189m3ww:focus,.css-189m3ww[data-active='true']{color:#fff;border-bottom-color:#6c5fc7;}</style><button data-active="true" class="css-189m3ww">JavaScript</button></div><div class="relative" data-sentry-mask="true"><div class="code-blocks_code-block__cTPUP" data-sentry-component="CodeBlock" data-sentry-source-file="index.tsx"><div class="code-blocks_code-actions__Mkfd3"><code class="code-blocks_filename__sQPMo"></code></div><div class="code-blocks_copied__PBcgM" style="opacity:0">Copied</div><div><pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token literal-property property">settings</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token literal-property property">nullValue</span><span class="token operator">:</span> <span class="token keyword nil null">null</span><span class="token punctuation">,</span> </span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> </span><span class="code-line"> <span class="token literal-property property">animationDuration</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> </span><span class="code-line"> <span class="token literal-property property">headerText</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> </span><span class="code-line"> <span class="token literal-property property">showSplashScreen</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> </span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> </span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="code-line"> </span><span class="code-line"><span class="token keyword">const</span> undefinedValue <span class="token operator">=</span> </span><span class="code-line"> response<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">.</span><span class="token property-access">undefinedValue</span> <span class="token operator">??</span> <span class="token string">"some other default"</span><span class="token punctuation">;</span> <span class="token comment">// result: 'some other default'</span> </span><span class="code-line"><span class="token keyword">const</span> nullValue <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">.</span><span class="token property-access">nullValue</span> <span class="token operator">??</span> <span class="token string">"some other default"</span><span class="token punctuation">;</span> <span class="token comment">// result: 'some other default'</span> </span><span class="code-line"><span class="token keyword">const</span> headerText <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">.</span><span class="token property-access">headerText</span> <span class="token operator">??</span> <span class="token string">"Hello, world!"</span><span class="token punctuation">;</span> <span class="token comment">// result: ''</span> </span><span class="code-line"><span class="token keyword">const</span> animationDuration <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">.</span><span class="token property-access">animationDuration</span> <span class="token operator">??</span> <span class="token number">300</span><span class="token punctuation">;</span> <span class="token comment">// result: 0</span> </span><span class="code-line"><span class="token keyword">const</span> showSplashScreen <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">settings</span><span class="token punctuation">.</span><span class="token property-access">showSplashScreen</span> <span class="token operator">??</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// result: false</span> </span></code></pre></div></div></div></div></div><blockquote><p>From <a href="https://github.com/tc39/proposal-nullish-coalescing" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">https://github.com/tc39/proposal-nullish-coalescing<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a></p></blockquote><h2 id="lodash"><a class=" autolink-heading" aria-hidden="true" tabindex="-1" data-sentry-element="Link" data-sentry-component="SmartLink" data-sentry-source-file="smartLink.tsx" href="#lodash">Lodash<svg class="anchorlink before" fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"></path></svg></a></h2><p>Be sure to not import <code>lodash</code> utilities using the default <code>lodash</code> package. There is an <code>eslint</code> rule to make sure this does not happen. Instead, import the utility directly, e.g. <code>import isEqual from 'lodash/isEqual';</code>.</p><p>Previously we used a combination of <a href="https://www.npmjs.com/package/lodash-webpack-plugin" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">lodash-webpack-plugin<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> and <a href="https://github.com/lodash/babel-plugin-lodash" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">babel-plugin-lodash<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> but it is easy to overlook these plugins and configuration when trying to use a new lodash utility (e.g. <a href="https://github.com/getsentry/sentry/pull/13834" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">this PR<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a>). With <code>webpack</code> tree shaking and <code>eslint</code> enforcement, we should be able to maintain reasonable bundle sizes.</p><p>See <a href="https://github.com/getsentry/sentry/pull/15521" class="" data-sentry-component="ExternalLink" data-sentry-source-file="externalLink.tsx">this PR<span class="icon icon-external-link"><svg viewBox="0 0 24 24" width="14" height="14" class="ml-1 inline" data-sentry-element="svg" data-sentry-source-file="externalLink.tsx"><path fill="currentColor" d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" data-sentry-element="path" data-sentry-source-file="externalLink.tsx"></path></svg></span></a> for more information.</p><p>We prefer using optional chaining and nullish coalescing over <code>get</code> from <code>loadash/get</code>.</p></div><div class="grid grid-cols-2 gap-4 not-prose mt-16"><div class="col-span-1"><a href="/backend" class="no-underline" data-sentry-component="PaginationNav" data-sentry-source-file="paginationNav.tsx"><div class="py-3 px-4 border-2 dark:[border-color:var(--gray-4)] rounded-md transition-colors hover:[border-color:var(--accent)] text-left"><div class="text-sm [color:var(--foreground)]">Previous</div><div class="flex items-center gap-1 font-[500] justify-start"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>API Server</div></div></a></div><div class="col-span-1"><a href="/frontend/design-tenets" class="no-underline" data-sentry-component="PaginationNav" data-sentry-source-file="paginationNav.tsx"><div class="py-3 px-4 border-2 dark:[border-color:var(--gray-4)] rounded-md transition-colors hover:[border-color:var(--accent)] text-right"><div class="text-sm [color:var(--foreground)]">Next</div><div class="flex items-center gap-1 font-[500] justify-end">Frontend Design Tenets<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div></a></div></div><div class="space-y-4 py-4 border-[var(--gray-6)]"><div class="flex items-center gap-4 text-sm mt-8"><span class="font-medium">Was this helpful?</span><div class="flex"><button class="py-1 px-2 gap-4 hover:bg-[var(--gray-3)] rounded flex items-center justify-center" aria-label="Yes, this was helpful">Yes 馃憤</button><button class="py-1 px-2 gap-4 hover:bg-[var(--gray-3)] rounded flex items-center justify-center" aria-label="No, this wasn't helpful">No 馃憥</button></div></div><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><form class="space-y-4"><div><label for="comments" class="block text-sm font-medium mb-4">How can we improve this page?</label><textarea id="comments" name="comments" required="" rows="2" class="w-[calc(100%-4px)] ml-[2px] px-3 py-2 border border-[var(--gray-6)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] bg-transparent text-sm" placeholder="Please share your thoughts..."></textarea></div><button data-accent-color="" type="submit" class="rt-reset rt-BaseButton rt-r-size-3 rt-variant-solid rt-Button px-4 py-2 text-sm rounded-lg bg-[var(--accent-purple)]">Submit feedback</button></form></div></div><div class="styles_cta__uq_BB" data-sentry-component="GitHubCTA" data-sentry-source-file="index.tsx"><small><strong>Help improve this content</strong></small><br/><small>Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").<div><a data-sentry-element="Link" data-sentry-source-file="index.tsx" href="https://docs.sentry.io/contributing/">How to contribute</a> 聽聽|聽聽<a data-sentry-element="Link" data-sentry-source-file="index.tsx" href="https://github.com/getsentry/sentry-docs/edit/master/develop-docs/frontend/index.mdx">Edit this page</a> 聽聽|聽聽<a data-sentry-element="Link" data-sentry-source-file="index.tsx" href="https://github.com/getsentry/sentry-docs/issues/new/choose">Create a docs issue</a> 聽聽|聽聽<a data-sentry-element="Link" data-sentry-source-file="index.tsx" href="https://sentry.zendesk.com/hc/en-us/">Get support</a> </div></small></div></div></div><aside class="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]"><div class="sidebar"><div class="style_doc-toc__vjQZA" data-sentry-component="SidebarTableOfContents" data-sentry-source-file="index.tsx"><ul class="style_section-nav__El0F9"></ul></div></div></aside></main></section></div></div></div><script src="/_next/static/chunks/webpack-d79a28a3f658970a.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[46969,[\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"7177\",\"static/chunks/app/layout-53e78c04f62af853.js\"],\"\"]\n3:I[66525,[\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"7177\",\"static/chunks/app/layout-53e78c04f62af853.js\"],\"ThemeProvider\"]\n4:I[69013,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"Theme\"]\n5:I[23449,[],\"\"]\n6:I[47869,[],\"\"]\n7:I[50038,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"4345\",\"static/chunks/app/not-found-2a59ee56bf1fd327.js\"],\"default\"]\n8:I[5584,[\"9415\",\"static/chunks/app/%5B%5B...path%5D%5D/layout-02fd90067ea08d09.js\"],\"HotReload\"]\na:I[38310,[],\"OutletBoundary\"]\nc:I[38310,[],\"MetadataBoundary\"]\ne:I[38310,[],\"ViewportBoundary\"]\n10:I[81956,[\"4219\",\"static/chunks/app/global-error-1cf061f76ccf130f.js\"],\"default\"]\n:HL[\"/_next/static/media/b9378c7268e717c1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c22ccc5eb58b83e1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/c9d46349fae1f48c.css\",\"style\"]\n:HL[\"/_next/static/css/c17e2f2a11627bf5.css\",\"style\"]\n:HL[\"/_next/static/css/b52557125fa02b8a.css\",\"style\"]\n:HL[\"/_next/static/css/e3064454c3082c14.css\",\"style\"]\n:HL[\"/_next/static/css/7028a603747574d7.css\",\"style\"]\n:HL[\"/_next/static/css/75a6696a350c96f8.css\",\"style\"]\n:HL[\"/_next/static/css/6ca8e94f9559bd34.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"cVW1ILzYMe0y1wwyodX3T\",\"p\":\"\",\"c\":[\"\",\"frontend\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[[\"path\",\"frontend\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c9d46349fae1f48c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c17e2f2a11627bf5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"data-sentry-component\":\"RootLayout\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"$L2\",null,{\"async\":true,\"defer\":true,\"data-api\":\"$undefined\",\"data-domain\":\"docs.sentry.io,rollup.sentry.io\",\"data-exclude\":\"$undefined\",\"src\":\"https://plausible.io/js/script.js\",\"integrity\":\"$undefined\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"$L2\",null,{\"id\":\"next-plausible-init\",\"dangerouslySetInnerHTML\":{\"__html\":\"window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }\"},\"nonce\":\"$undefined\"}],\"$undefined\"]}],[\"$\",\"body\",null,{\"className\":\"__variable_d51e15\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L3\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"data-sentry-element\":\"ThemeProvider\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"$L4\",null,{\"accentColor\":\"iris\",\"grayColor\":\"sand\",\"radius\":\"large\",\"scaling\":\"95%\",\"data-sentry-element\":\"Theme\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7028a603747574d7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{}]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"$L2\",null,{\"async\":true,\"src\":\"https://widget.kapa.ai/kapa-widget.bundle.js\",\"data-website-id\":\"cac7cc70-969e-4bc1-a968-55534a839be4\",\"data-button-hide\":true,\"data-modal-override-open-class\":\"kapa-ai-class\",\"data-project-name\":\"Sentry\",\"data-project-color\":\"#6A5FC1\",\"data-project-logo\":\"https://avatars.githubusercontent.com/u/1396951?s=280\u0026v=4\",\"data-font-family\":\"var(--font-rubik)\",\"data-modal-disclaimer\":\"Please note: This is a tool that searches publicly available sources. Do not include any sensitive or personal information in your queries. For more on how Sentry handles your data, see our [Privacy Policy](https://sentry.io/privacy/).\",\"data-modal-example-questions\":\"How to set up Sentry for Next.js?,What are tracePropagationTargets?\",\"data-sentry-element\":\"Script\",\"data-sentry-source-file\":\"layout.tsx\"}]]}]]}]]}],{\"children\":[[\"path\",\"frontend\",\"oc\"],[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b52557125fa02b8a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"data-sentry-component\":\"DocsLayout\",\"data-sentry-source-file\":\"layout.tsx\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$0:f:0:1:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L8\",null,{\"data-sentry-element\":\"HotReload\",\"data-sentry-source-file\":\"layout.tsx\"}]]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e3064454c3082c14.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7028a603747574d7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/75a6696a350c96f8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6ca8e94f9559bd34.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":\"$Lb\"}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"G3YwMvOs7HaZKl6tHHAwv\",{\"children\":[[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b52557125fa02b8a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Frontend\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"How we write frontend code at Sentry.\"}],[\"$\",\"meta\",\"3\",{\"name\":\"zd-site-verification\",\"content\":\"ocu6mswx6pke3c6qvozr2e\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://develop.sentry.dev/frontend/\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"Frontend\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"How we write frontend code at Sentry.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:title\",\"content\":\"Frontend\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:description\",\"content\":\"How we write frontend code at Sentry.\"}],[\"$\",\"link\",\"11\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}]]\n"])</script><script>self.__next_f.push([1,"b:null\n"])</script><script>self.__next_f.push([1,"11:I[64746,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"Header\"]\n13:I[70745,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"Banner\"]\n14:I[5229,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"SmartLink\"]\n15:I[27582,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"CodeContextProvider\"]\n16:I[20797,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\""])</script><script>self.__next_f.push([1,"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"CodeTabs\"]\n17:I[71338,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"CodeBlock\"]\n18:I[98088,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"DocFeedback\"]\n19:I[19548,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"\"]\n1a:I[11174,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"SidebarTableOfContents\"]\n1c:I[56159,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/"])</script><script>self.__next_f.push([1,"3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"default\"]\n1d:I[92975,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"ReaderDepthTracker\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"tw-app\",\"data-sentry-component\":\"DocPage\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"$L11\",null,{\"pathname\":\"frontend\",\"searchPlatforms\":[],\"data-sentry-element\":\"Header\",\"data-sentry-source-file\":\"index.tsx\"}],[\"$\",\"section\",null,{\"className\":\"px-0 flex relative\",\"children\":[\"$L12\",[\"$\",\"main\",null,{\"className\":\"main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1 prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)] prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)] prose-img:my-2 prose-strong:text-[var(--gray-12)] w-[75ch] xl:max-w-[calc(100%-250px)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4\",\"children\":[\"$\",\"$L13\",null,{\"data-sentry-element\":\"Banner\",\"data-sentry-source-file\":\"index.tsx\"}]}],[\"$\",\"ul\",null,{\"className\":\"list-none flex p-0 flex-wrap\",\"style\":{\"margin\":0},\"data-sentry-component\":\"Breadcrumbs\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"li\",\"/\",{\"className\":\"style_breadcrumb-item__bDEaT\",\"children\":[\"$\",\"$L14\",null,{\"to\":\"/\",\"children\":\"Home\"}]}],[\"$\",\"li\",\"/frontend/\",{\"className\":\"style_breadcrumb-item__bDEaT\",\"children\":[\"$\",\"$L14\",null,{\"to\":\"/frontend/\",\"children\":\"Frontend\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"hgroup\",null,{\"children\":[[\"$\",\"h1\",null,{\"children\":\"Frontend\"}],[\"$\",\"h2\",null,{\"children\":\"How we write frontend code at Sentry.\"}]]}],[\"$\",\"div\",null,{\"id\":\"main\",\"children\":[\"$\",\"$L15\",null,{\"data-sentry-element\":\"CodeContextProvider\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"This guide specifically focuses on the frontend part of the \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry\",\"children\":\"Sentry\"}],\".\"]}],[\"$\",\"h2\",null,{\"id\":\"directory-structure\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#directory-structure\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Directory structure\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"The frontend codebase is currently located under \",[\"$\",\"code\",null,{\"children\":\"static/app\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"As of March 2025 \",[\"$\",\"code\",null,{\"children\":\"static/gsApp\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"static/gsAdmin\"}],\" have been open-sourced and merged into \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry\",\"children\":\"Sentry\"}],\". If you are looking for earlier git history of those folders you need to have access to \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/getsentry\",\"children\":\"Getsentry\"}],\".\"]}],[\"$\",\"h2\",null,{\"id\":\"folder--file-structure\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#folder--file-structure\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Folder \u0026 File structure\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"h3\",null,{\"id\":\"file-naming\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#file-naming\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"File Naming\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"Name a file meaningfully, based on how the module's functions, or classes are used or the application section they are used in.\"}],[\"$\",\"li\",null,{\"children\":[\"Unless necessary, don't use prefixes or suffixes (ie. \",[\"$\",\"code\",null,{\"children\":\"dataScrubbingEditModal\"}],\", \",[\"$\",\"code\",null,{\"children\":\"dataScrubbingAddModal\"}],\") instead favor names like \",[\"$\",\"code\",null,{\"children\":\"dataScrubbing/editModal\"}],\".\"]}],[\"$\",\"li\",null,{\"children\":\"Tip: Name the file to match the component or function that is being exported. This makes it easier for people to know what is inside the file, and re-use it.\"}]]}],[\"$\",\"h3\",null,{\"id\":\"using-indextsx\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#using-indextsx\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Using \",[\"$\",\"code\",null,{\"children\":\"index.tsx?$\"}],[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Having an \",[\"$\",\"code\",null,{\"children\":\"index\"}],\" file in a folder provides a way to implicitly import the main file without specifying it.\"]}],[\"$\",\"p\",null,{\"children\":\"The use of an index file should comply with the following rules:\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":\"If the folder is created to group components that are used together, and there is an entrypoint component, that uses the components within the grouping (examples, avatar, idBadge). The entrypoint component should be the index file.\"}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"em\",null,{\"children\":\"Don't\"}],\" use an \",[\"$\",\"code\",null,{\"children\":\"index.tsx?$\"}],\" file if the folder contains components used in other parts of the app regardless of the entrypoint file. (ie, actionCreators, panels)\"]}],[\"$\",\"li\",null,{\"children\":[[\"$\",\"em\",null,{\"children\":\"Don't\"}],\" use an index file just to re-export. Prefer importing individual components instead.\"]}]]}],[\"$\",\"h2\",null,{\"id\":\"react\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#react\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"React\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"h3\",null,{\"id\":\"defining-react-components\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#defining-react-components\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Defining React components\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":\"New components should be created as functional components, using function declarations instead of arrow functions. Props should be declared above the component.\"}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"typescript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-typescript\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-typescript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"interface\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":\"Props\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" author\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" object\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" content\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token builtin\",\"children\":\"string\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token function function-variable\",\"children\":\"onEdit\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"value\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token builtin\",\"children\":\"string\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"void\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// use destructuring assignment for props\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"export\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"default\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"Note\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" author\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" content\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\" onEdit \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" Props\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function function-variable\",\"children\":\"handleChange\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"value\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\u003e\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" user \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" ConfigStore\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"get\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"user\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"if\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"user\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],\"isSuperuser\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"onEdit\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"value\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"return\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],\"div onChange\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"handleChange\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"content\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],\"div\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}]}]}]}],[\"$\",\"h3\",null,{\"id\":\"components-vs-views\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#components-vs-views\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Components vs views\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Both the \",[\"$\",\"code\",null,{\"children\":\"app/components/\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"app/views/\"}],\" folders contain React components.\"]}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",null,{\"children\":[\"Put files in \",[\"$\",\"code\",null,{\"children\":\"app/views/\"}],\" when the component can not be reused in other parts of the codebase.\",[\"$\",\"ul\",null,{\"children\":[\"$\",\"li\",null,{\"children\":[\"Typically only layout/construction of full pages should be in this folder. ie: files that are imported by \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry/blob/master/static/app/routes.tsx\",\"children\":\"routes.tsx\"}],\".\"]}]}]]}],[\"$\",\"li\",null,{\"children\":[\"Put files into \",[\"$\",\"code\",null,{\"children\":\"app/components/\"}],\" for anything else that \",[\"$\",\"em\",null,{\"children\":\"could\"}],\" be reused.\",[\"$\",\"ul\",null,{\"children\":[\"$\",\"li\",null,{\"children\":[\"If the component accepts any prop beyond \",[\"$\",\"code\",null,{\"children\":\"RouteComponentProps\"}],\" then it very likely belongs inside \",[\"$\",\"code\",null,{\"children\":\"app/components/\"}]]}]}]]}]]}],[\"$\",\"h3\",null,{\"id\":\"type-declarations\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#type-declarations\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Type declarations\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"We do not follow any strict \\\"prefer type over interface\\\" rules for type declarations, so using either is at your discretion. That being said, there are \",[\"$\",\"$L14\",null,{\"href\":\"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces\",\"children\":\"functional differences\"}],\" between the two that you should be aware of so you can use them appropriately.\"]}],[\"$\",\"p\",null,{\"children\":[\"A simple guiding principle is to prefer interfaces when you require declaration merging. The reason for that is that type intersections are poor at detecting conflicts, produce unexpected or unwanted results and when used in combination with large types \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections\",\"children\":\"perform worse than interfaces\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":\"Example:\"}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"typescript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-typescript\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-typescript\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// This is valid and the outcome is a \\\"never\\\" type\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"type\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"A\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" color\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"blue\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u0026\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\" color\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"red\\\"\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"interface\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"B\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" color\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"blue\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Interface 'C' incorrectly extends interface 'B'.\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// Types of property 'color' are incompatible.\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"interface\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"C\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"extends\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token class-name\",\"children\":[\"$\",\"span\",null,{\"className\":\"token constant\",\"children\":\"B\"}]}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" color\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"red\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\"\\n\"]}]]}]}]}]}]}],[\"$\",\"h3\",null,{\"id\":\"event-handlers\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#event-handlers\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Event handlers\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":\"We use different prefixes to better distinguish event handlers from event callback props.\"}],[\"$\",\"p\",null,{\"children\":[\"Use the \",[\"$\",\"code\",null,{\"children\":\"handle\"}],\" prefix for event handlers, e.g:\"]}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Button\"}],\" onClick\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"this\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"handleDelete\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]}]}]}]}],[\"$\",\"p\",null,{\"children\":[\"For event callback props passed to the component use the \",[\"$\",\"code\",null,{\"children\":\"on\"}],\" prefix, e.g:\"]}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"className\":\"token maybe-class-name\",\"children\":\"Button\"}],\" onClick\",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"this\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"props\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"onDelete\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"\u003e\"}],\"\\n\"]}]}]}]}]}]}],[\"$\",\"h2\",null,{\"id\":\"state-management\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#state-management\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"State management\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"callout callout-info\",\"role\":\"alert\",\"data-sentry-component\":\"Callout\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"callout-icon\",\"onClick\":\"$undefined\",\"role\":\"$undefined\",\"data-sentry-element\":\"Icon\",\"data-sentry-source-file\":\"index.tsx\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}],[\"$\",\"div\",null,{\"className\":\"callout-content\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"callout-body content-flush-bottom\",\"children\":[\"$\",\"p\",null,{\"children\":[\"For React Hooks tips check out \",[\"$\",\"$L14\",null,{\"to\":\"/frontend/using-hooks/\",\"children\":\"this page\"}],\".\"]}]}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"Prefer the built-in \",[\"$\",\"code\",null,{\"children\":\"useState\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"useReducer\"}],\" react hooks for state whenever possible.\"]}],[\"$\",\"p\",null,{\"children\":[\"We currently also have \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/reflux/refluxjs\",\"children\":\"Reflux\"}],\" and \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/mobxjs/mobx\",\"children\":\"MobX\"}],\" included in package.json but their use for new cases is discouraged.\"]}],[\"$\",\"p\",null,{\"children\":[\"Reflux implements the unidirectional data flow pattern outlined by \",[\"$\",\"$L14\",null,{\"href\":\"https://facebook.github.io/flux/\",\"children\":\"Flux\"}],\". Stores are registered under \",[\"$\",\"code\",null,{\"children\":\"app/stores\"}],\" and are used to store various pieces of data used by the application. Actions need to be registered under \",[\"$\",\"code\",null,{\"children\":\"app/actions\"}],\". We use action creator functions (under \",[\"$\",\"code\",null,{\"children\":\"app/actionCreators\"}],\") to dispatch actions. Reflux stores listen to actions and update themselves accordingly.\"]}],[\"$\",\"h2\",null,{\"id\":\"testing\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#testing\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Testing\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"callout callout-info\",\"role\":\"alert\",\"data-sentry-component\":\"Callout\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"callout-icon\",\"onClick\":\"$undefined\",\"role\":\"$undefined\",\"data-sentry-element\":\"Icon\",\"data-sentry-source-file\":\"index.tsx\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}],[\"$\",\"div\",null,{\"className\":\"callout-content\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"callout-body content-flush-bottom\",\"children\":[\"$\",\"p\",null,{\"children\":[\"For React Testing Library (RTL) tips check out \",[\"$\",\"$L14\",null,{\"to\":\"/frontend/using-rtl/\",\"children\":\"this page\"}],\".\"]}]}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"Note: Your filename needs to be \",[\"$\",\"code\",null,{\"children\":\".spec.tsx\"}],\" for jest to run run it!\"]}],[\"$\",\"p\",null,{\"children\":[\"We have useful fixtures defined in \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry/tree/master/tests/js/fixtures\",\"children\":\"tests/js/fixtures/\"}],\" Use these! If you are defining mock data in a repetitive way, it鈥檚 probably worth adding this these files. \",[\"$\",\"code\",null,{\"children\":\"routerContext\"}],\" is a particularly useful one for providing the context object that most view are written to rely on.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"Client.addMockResponse()\"}],\" is the best way to mock API requests. it鈥檚 \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry/blob/master/static/app/__mocks__/api.tsx\",\"children\":\"our code\"}],\" so if it鈥檚 confusing you, just put \",[\"$\",\"code\",null,{\"children\":\"console.log()\"}],\" statements into its logic!\"]}],[\"$\",\"p\",null,{\"children\":[\"Marking your test method \",[\"$\",\"code\",null,{\"children\":\"async\"}],\" and using the \",[\"$\",\"code\",null,{\"children\":\"await tick();\"}],\" utility can let the event loop flush run events and fix this:\"]}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"wrapper\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access function method\",\"children\":\"find\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"ExpandButton\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access function method\",\"children\":\"simulate\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"click\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword control-flow\",\"children\":\"await\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"tick\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token function\",\"children\":\"expect\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],\"wrapper\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access function method\",\"children\":\"find\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"CommitRow\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access function method\",\"children\":\"toHaveLength\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"2\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]]}]}]}]}]}],[\"$\",\"h2\",null,{\"id\":\"babel-syntax-plugins\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#babel-syntax-plugins\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Babel Syntax Plugins\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"We have decided to only use ECMAScript proposals that are in stage 3 (or later) (See \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/tc39/proposals\",\"children\":\"TC39 Proposals\"}],\"). The only exception to this are decorators.\"]}],[\"$\",\"h2\",null,{\"id\":\"new-syntax\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#new-syntax\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"New Syntax\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"h3\",null,{\"id\":\"optional-chaining\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#optional-chaining\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Optional Chaining\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"$L14\",null,{\"href\":\"https://github.com/tc39/proposal-optional-chaining\",\"children\":\"Optional chaining\"}],\" helps us access [nested] objects without having to check for existence before each property/method access. If we try to access a property of an \",[\"$\",\"code\",null,{\"children\":\"undefined\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"null\"}],\" object, it will stop and return \",[\"$\",\"code\",null,{\"children\":\"undefined\"}],\".\"]}],[\"$\",\"h4\",null,{\"id\":\"syntax\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#syntax\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Syntax\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"The Optional Chaining operator is spelled \",[\"$\",\"code\",null,{\"children\":\"?.\"}],\". It may appear in three positions:\"]}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"bash\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-bash\",\"children\":[\"$\",\"code\",null,{\"className\":\"code-highlight language-bash\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"obj?.prop // optional static property access\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"obj?.\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"[\"}],\"expr\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"]\"}],\" // optional dynamic property access\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\"func?.\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"(\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"..\"}],\".args\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\")\"}],\" // optional \",[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"function\"}],\" or method call\\n\"]}]]}]}]}]}]}],[\"$\",\"blockquote\",null,{\"children\":[\"$\",\"p\",null,{\"children\":[\"From \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/tc39/proposal-optional-chaining\",\"children\":\"https://github.com/tc39/proposal-optional-chaining\"}]]}]}],[\"$\",\"h3\",null,{\"id\":\"nullish-coalescing\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#nullish-coalescing\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Nullish Coalescing\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":\"This is a way to set a \\\"default\\\" value. e.g. previously you would do something like\"}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"let\"}],\" x \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" volume \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"||\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"0.5\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]}]}]}]}],[\"$\",\"p\",null,{\"children\":[\"Which is a problem since \",[\"$\",\"code\",null,{\"children\":\"0\"}],\" is a valid value for \",[\"$\",\"code\",null,{\"children\":\"volume\"}],\", but because it evaluates to \",[\"$\",\"code\",null,{\"children\":\"false\"}],\" -y, we do not short circuit the expression and the value of \",[\"$\",\"code\",null,{\"children\":\"x\"}],\" is \",[\"$\",\"code\",null,{\"children\":\"0.5\"}]]}],[\"$\",\"p\",null,{\"children\":[\"If instead we used \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/tc39/proposal-nullish-coalescing\",\"children\":\"nullish coalescing\"}]]}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"let\"}],\" x \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" volume \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"0.5\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}]}]}]}]}]}],[\"$\",\"p\",null,{\"children\":[\"It will only default to \",[\"$\",\"code\",null,{\"children\":\"0.5\"}],\" if \",[\"$\",\"code\",null,{\"children\":\"volume\"}],\" is \",[\"$\",\"code\",null,{\"children\":\"null\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"undefined\"}],\".\"]}],[\"$\",\"h4\",null,{\"id\":\"syntax-1\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#syntax-1\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Syntax\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":\"Base case. If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.\"}],[\"$\",\"div\",null,{\"className\":\"code-tabs-wrapper\",\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$L17\",null,{\"language\":\"javascript\",\"title\":\"\",\"filename\":\"\",\"children\":[\"$\",\"pre\",null,{\"className\":\"language-javascript\",\"children\":[\"$\",\"code\",null,{\"className\":\"language-javascript code-highlight\",\"children\":[[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" response \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"{\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"nullValue\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token keyword nil null\",\"children\":\"null\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"height\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"400\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"animationDuration\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"0\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"headerText\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token literal-property property\",\"children\":\"showSplashScreen\"}],[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\":\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"false\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" \",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\",\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\"}\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":\"\\n\"}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" undefinedValue \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[\" response\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"undefinedValue\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"some other default\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// result: 'some other default'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" nullValue \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" response\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"nullValue\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"some other default\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// result: 'some other default'\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" headerText \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" response\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"headerText\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token string\",\"children\":\"\\\"Hello, world!\\\"\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// result: ''\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" animationDuration \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" response\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"animationDuration\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token number\",\"children\":\"300\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// result: 0\"}],\"\\n\"]}],[\"$\",\"span\",null,{\"className\":\"code-line\",\"children\":[[\"$\",\"span\",null,{\"className\":\"token keyword\",\"children\":\"const\"}],\" showSplashScreen \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"=\"}],\" response\",[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"settings\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\".\"}],[\"$\",\"span\",null,{\"className\":\"token property-access\",\"children\":\"showSplashScreen\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token operator\",\"children\":\"??\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token boolean\",\"children\":\"true\"}],[\"$\",\"span\",null,{\"className\":\"token punctuation\",\"children\":\";\"}],\" \",[\"$\",\"span\",null,{\"className\":\"token comment\",\"children\":\"// result: false\"}],\"\\n\"]}]]}]}]}]}]}],[\"$\",\"blockquote\",null,{\"children\":[\"$\",\"p\",null,{\"children\":[\"From \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/tc39/proposal-nullish-coalescing\",\"children\":\"https://github.com/tc39/proposal-nullish-coalescing\"}]]}]}],[\"$\",\"h2\",null,{\"id\":\"lodash\",\"children\":[\"$\",\"$L14\",null,{\"href\":\"#lodash\",\"aria-hidden\":true,\"className\":\"autolink-heading\",\"tabIndex\":\"-1\",\"children\":[\"Lodash\",[\"$\",\"svg\",null,{\"className\":\"anchorlink before\",\"fill\":\"currentColor\",\"height\":\"16\",\"viewBox\":\"0 0 24 24\",\"width\":\"16\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z\"}]}]]}]}],[\"$\",\"p\",null,{\"children\":[\"Be sure to not import \",[\"$\",\"code\",null,{\"children\":\"lodash\"}],\" utilities using the default \",[\"$\",\"code\",null,{\"children\":\"lodash\"}],\" package. There is an \",[\"$\",\"code\",null,{\"children\":\"eslint\"}],\" rule to make sure this does not happen. Instead, import the utility directly, e.g. \",[\"$\",\"code\",null,{\"children\":\"import isEqual from 'lodash/isEqual';\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"Previously we used a combination of \",[\"$\",\"$L14\",null,{\"href\":\"https://www.npmjs.com/package/lodash-webpack-plugin\",\"children\":\"lodash-webpack-plugin\"}],\" and \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/lodash/babel-plugin-lodash\",\"children\":\"babel-plugin-lodash\"}],\" but it is easy to overlook these plugins and configuration when trying to use a new lodash utility (e.g. \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry/pull/13834\",\"children\":\"this PR\"}],\"). With \",[\"$\",\"code\",null,{\"children\":\"webpack\"}],\" tree shaking and \",[\"$\",\"code\",null,{\"children\":\"eslint\"}],\" enforcement, we should be able to maintain reasonable bundle sizes.\"]}],[\"$\",\"p\",null,{\"children\":[\"See \",[\"$\",\"$L14\",null,{\"href\":\"https://github.com/getsentry/sentry/pull/15521\",\"children\":\"this PR\"}],\" for more information.\"]}],[\"$\",\"p\",null,{\"children\":[\"We prefer using optional chaining and nullish coalescing over \",[\"$\",\"code\",null,{\"children\":\"get\"}],\" from \",[\"$\",\"code\",null,{\"children\":\"loadash/get\"}],\".\"]}]]}]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 gap-4 not-prose mt-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-1\",\"children\":[\"$\",\"a\",null,{\"href\":\"/backend\",\"className\":\"no-underline\",\"data-sentry-component\":\"PaginationNav\",\"data-sentry-source-file\":\"paginationNav.tsx\",\"children\":[\"$\",\"div\",null,{\"className\":\"py-3 px-4 border-2 dark:[border-color:var(--gray-4)] rounded-md transition-colors hover:[border-color:var(--accent)] text-left\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm [color:var(--foreground)]\",\"children\":\"Previous\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1 font-[500] justify-start\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}],\"API Server\",false]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-1\",\"children\":[\"$\",\"a\",null,{\"href\":\"/frontend/design-tenets\",\"className\":\"no-underline\",\"data-sentry-component\":\"PaginationNav\",\"data-sentry-source-file\":\"paginationNav.tsx\",\"children\":[\"$\",\"div\",null,{\"className\":\"py-3 px-4 border-2 dark:[border-color:var(--gray-4)] rounded-md transition-colors hover:[border-color:var(--accent)] text-right\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm [color:var(--foreground)]\",\"children\":\"Next\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1 font-[500] justify-end\",\"children\":[false,\"Frontend Design Tenets\",[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}]]}]]}]}]}]]}],[\"$\",\"$L18\",null,{\"pathname\":\"frontend\",\"data-sentry-element\":\"DocFeedback\",\"data-sentry-source-file\":\"index.tsx\"}],[\"$\",\"div\",null,{\"className\":\"styles_cta__uq_BB\",\"data-sentry-component\":\"GitHubCTA\",\"data-sentry-source-file\":\"index.tsx\",\"children\":[[\"$\",\"small\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Help improve this content\"}]}],[\"$\",\"br\",null,{}],[\"$\",\"small\",null,{\"children\":[\"Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update (\\\"yeah, this would be better\\\").\",[\"$\",\"div\",null,{\"children\":[[\"$\",\"$L19\",null,{\"href\":\"https://docs.sentry.io/contributing/\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"index.tsx\",\"children\":\"How to contribute\"}],\" \",\"聽聽|聽聽\",[\"$\",\"$L19\",null,{\"href\":\"https://github.com/getsentry/sentry-docs/edit/master/develop-docs/frontend/index.mdx\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"index.tsx\",\"children\":\"Edit this page\"}],\" 聽聽|聽聽\",[\"$\",\"$L19\",null,{\"href\":\"https://github.com/getsentry/sentry-docs/issues/new/choose\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"index.tsx\",\"children\":\"Create a docs issue\"}],\" \",\"聽聽|聽聽\",[\"$\",\"$L19\",null,{\"href\":\"https://sentry.zendesk.com/hc/en-us/\",\"data-sentry-element\":\"Link\",\"data-sentry-source-file\":\"index.tsx\",\"children\":\"Get support\"}],\" \"]}]]}]]}]]}]]}],[\"$\",\"aside\",null,{\"className\":\"sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"sidebar\",\"children\":[[\"$\",\"$L1a\",null,{}],\"$L1b\"]}]}]]}]]}],[\"$\",\"$L1c\",null,{\"data-sentry-element\":\"Mermaid\",\"data-sentry-source-file\":\"index.tsx\"}],[\"$\",\"$L1d\",null,{\"data-sentry-element\":\"ReaderDepthTracker\",\"data-sentry-source-file\":\"index.tsx\"}]]}]\n"])</script><script>self.__next_f.push([1,"1e:I[44038,[\"5105\",\"static/chunks/0e5ce63c-1aac88c3332c7248.js\",\"2408\",\"static/chunks/2408-24bc9320f6c9c6b5.js\",\"9212\",\"static/chunks/9212-9efaa171a6fab3eb.js\",\"3932\",\"static/chunks/3932-3ec231ea91b1e5ec.js\",\"463\",\"static/chunks/463-5a49920f1a516c58.js\",\"4746\",\"static/chunks/4746-3d8e7491215d00ec.js\",\"818\",\"static/chunks/818-89022b4aad375c1e.js\",\"3812\",\"static/chunks/app/%5B%5B...path%5D%5D/page-c6ac6dff74cef529.js\"],\"SidebarLink\"]\n1b:null\n"])</script><script>self.__next_f.push([1,"12:[\"$\",\"aside\",null,{\"className\":\"style_sidebar__iEJoR\",\"data-sentry-component\":\"DevelopDocsSidebar\",\"data-sentry-source-file\":\"developDocsSidebar.tsx\",\"children\":[[\"$\",\"input\",null,{\"type\":\"checkbox\",\"id\":\"style_navbar-menu-toggle__dc5I6\",\"className\":\"hidden\"}],[\"$\",\"style\",null,{\"children\":\":root { --sidebar-width: 300px; }\"}],[\"$\",\"div\",null,{\"className\":\"md:flex flex-col items-stretch\",\"children\":[\"$\",\"div\",null,{\"className\":\"style_toc__wKI2w\",\"children\":[[\"$\",\"ul\",null,{\"data-sidebar-tree\":true,\"children\":[[\"$\",\"li\",\"getting-started\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/getting-started/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Getting Started\"}],false]}],false]}],[\"$\",\"li\",\"engineering-practices\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/engineering-practices/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Engineering Practices\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"application-architecture\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/application-architecture/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Application Architecture\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"development-infrastructure\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/development-infrastructure/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Development Infrastructure\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"backend\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/backend/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Backend\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"frontend\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/frontend/\",\"className\":\"style_sidebar-title__u_GwL flex items-center active justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Frontend\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(0deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],[\"$\",\"ul\",null,{\"data-sidebar-tree\":true,\"className\":\"pl-3\",\"children\":[[],[[\"$\",\"$L1e\",\"/frontend/design-tenets/\",{\"to\":\"/frontend/design-tenets/\",\"title\":\"Frontend Design Tenets\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/using-styled-components/\",{\"to\":\"/frontend/using-styled-components/\",\"title\":\"Using Styled Components\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/component-library/\",{\"to\":\"/frontend/component-library/\",\"title\":\"UI Component Library\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/upgrade-policies/\",{\"to\":\"/frontend/upgrade-policies/\",\"title\":\"Dependency Upgrade Policies\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/using-hooks/\",{\"to\":\"/frontend/using-hooks/\",\"title\":\"Using Hooks\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/using-rtl/\",{\"to\":\"/frontend/using-rtl/\",\"title\":\"Using React Testing Library\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/strict-typescript-settings-guide/\",{\"to\":\"/frontend/strict-typescript-settings-guide/\",\"title\":\"Strict TypeScript Settings Guide\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/network-requests/\",{\"to\":\"/frontend/network-requests/\",\"title\":\"Network Requests\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/pull-request-previews/\",{\"to\":\"/frontend/pull-request-previews/\",\"title\":\"Pull Request Previews\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}],[\"$\",\"$L1e\",\"/frontend/working-on-getting-started-docs/\",{\"to\":\"/frontend/working-on-getting-started-docs/\",\"title\":\"Working on Getting Started Docs\",\"collapsed\":true,\"path\":\"/frontend/\",\"children\":[]}]]]}]]}],[\"$\",\"li\",\"services\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/services/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Services\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"integrations\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/integrations/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Integrations\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"ingestion\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/ingestion/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Ingestion\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"sdk\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/sdk/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"SDKs\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}],[\"$\",\"li\",\"self-hosted\",{\"className\":\"mb-3\",\"data-sidebar-branch\":true,\"data-sentry-component\":\"DynamicNav\",\"data-sentry-source-file\":\"dynamicNav.tsx\",\"children\":[[\"$\",\"$L14\",null,{\"to\":\"/self-hosted/\",\"className\":\"style_sidebar-title__u_GwL flex items-center justify-between\",\"activeClassName\":\"active\",\"data-sidebar-link\":true,\"children\":[[\"$\",\"h6\",null,{\"children\":\"Self-Hosted Sentry\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"16\",\"height\":\"16\",\"viewBox\":\"0 0 16 16\",\"style\":{\"transition\":\"transform 200ms\",\"transform\":\"rotate(270deg)\"},\"data-sentry-element\":\"svg\",\"data-sentry-component\":\"NavChevron\",\"data-sentry-source-file\":\"navChevron.tsx\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z\",\"data-sentry-element\":\"path\",\"data-sentry-source-file\":\"navChevron.tsx\"}]}]]}],false]}]]}],[\"$\",\"hr\",null,{}],[\"$\",\"ul\",null,{\"data-sidebar-tree\":true,\"children\":[[\"$\",\"$L1e\",null,{\"to\":\"https://open.sentry.io/code-of-conduct/\",\"title\":\"Code of Conduct\",\"path\":\"/frontend/\",\"data-sentry-element\":\"SidebarLink\",\"data-sentry-source-file\":\"developDocsSidebar.tsx\"}],[\"$\",\"$L1e\",null,{\"to\":\"https://docs.sentry.io\",\"title\":\"User Documentation\",\"path\":\"/frontend/\",\"data-sentry-element\":\"SidebarLink\",\"data-sentry-source-file\":\"developDocsSidebar.tsx\"}]]}]]}]}]]}]\n"])</script></body></html>