Update sentry sample rate (#650)

* chore: adjust tracesSampleRate in Sentry configuration for improved performance

* fix: improve node removal safety in useTotalContributors hook

* fix: correct dependency array in TabContentDetector to ensure proper rendering behavior

* fix: enhance TabContentDetector to prevent duplicate rendering of tabs

- Added renderedTabs prop to SimpleTab and TabContentDetector components.
- Updated useEffect in TabContentDetector to check if the tab has already been rendered, ensuring proper rendering behavior and preventing duplicate calls to onRendered.

* feat: update HeaderNav to conditionally render cloud plan links

- Integrated useCloudPlan hook to retrieve the current cloud plan.
- Modified navigation links in HeaderNavStack and HeaderNavStackMobile to dynamically adjust the URL based on the cloud plan, enhancing user experience.

* fix: correct optional chaining in filterRightToc function

- Removed optional chaining for item.items to ensure proper filtering of nested items in the filterRightToc function, enhancing functionality.

Author: shhdgit

sentry.config.js

@@ -5,5 +5,5 @@ Sentry.init({
   dsn: process.env.GATSBY_SENTRY_DSN,
   integrations: [Sentry.browserTracingIntegration()],
 
-  tracesSampleRate: 0.1,
+  tracesSampleRate: 0.01,
 });

src/components/Contributors/index.tsx

@@ -237,7 +237,13 @@ export const useTotalContributors = (
         return;
       }
       ReactDOM.unmountComponentAtNode(appendedNode);
-      appendedNode?.parentNode?.removeChild(appendedNode);
+      // Check if the node is still a child of its parent before removing
+      if (
+        appendedNode.parentNode &&
+        appendedNode.parentNode.contains(appendedNode)
+      ) {
+        appendedNode.parentNode.removeChild(appendedNode);
+      }
     };
   }, [totalContributors]);
 

src/components/Layout/HeaderNav.tsx

@@ -23,6 +23,7 @@ import { BuildType } from "shared/interface";
 import { GTMEvent, gtmTrack } from "shared/utils/gtm";
 
 import TiDBLogo from "media/logo/tidb-logo-withtext.svg";
+import { CLOUD_MODE_KEY, useCloudPlan } from "shared/useCloudPlan";
 
 // `pageUrl` comes from server side render (or build): gatsby/path.ts/generateUrl
 // it will be `undefined` in client side render
@@ -46,6 +47,7 @@ export default function HeaderNavStack(props: {
 }) {
   const { language, t } = useI18next();
   const selectedItem = useSelectedNavItem(language, props.pageUrl);
+  const { cloudPlan } = useCloudPlan();
 
   return (
     <Stack
@@ -64,7 +66,11 @@ export default function HeaderNavStack(props: {
         <NavItem
           selected={selectedItem === "tidbcloud"}
           label={t("navbar.cloud")}
-          to={`/tidbcloud`}
+          to={
+            cloudPlan === "dedicated"
+              ? `/tidbcloud`
+              : `/tidbcloud/${cloudPlan}?${CLOUD_MODE_KEY}=${cloudPlan}`
+          }
         />
       )}
 
@@ -161,7 +167,7 @@ export function HeaderNavStackMobile(props: { buildType?: BuildType }) {
   const theme = useTheme();
   const { language, t } = useI18next();
   const selectedItem = useSelectedNavItem(language);
-
+  const { cloudPlan } = useCloudPlan();
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -240,7 +246,11 @@ export function HeaderNavStackMobile(props: { buildType?: BuildType }) {
           >
             <LinkComponent
               isI18n
-              to="/tidbcloud"
+              to={
+                cloudPlan === "dedicated"
+                  ? `/tidbcloud`
+                  : `/tidbcloud/${cloudPlan}?${CLOUD_MODE_KEY}=${cloudPlan}`
+              }
               style={{ width: "100%" }}
               onClick={() =>
                 gtmTrack(GTMEvent.ClickHeadNav, {

src/components/Layout/Navigation/RightNav.tsx

@@ -83,7 +83,7 @@ export default function RightNav(props: RightNavProps) {
             headingIds.push(id);
           }
         }
-        if (item.items) {
+        if (item?.items) {
           collectIds(item.items);
         }
       });

src/components/MDXComponents/SimpleTab.tsx

@@ -104,6 +104,7 @@ export function SimpleTab({
             key={id}
             id={id}
             activeTab={activeTab}
+            renderedTabs={renderedTabs}
             onRendered={() => {
               setRenderedTabs((prev) => {
                 if (prev.includes(id)) {
@@ -135,19 +136,25 @@ export const TabContentDetector = ({
   children,
   id,
   activeTab,
+  renderedTabs,
   onRendered,
 }: {
   children: ReactElement;
   id: string;
   activeTab: string;
+  renderedTabs: string[];
   onRendered: (id: string) => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (ref.current && ref.current.children.length > 0) {
+    if (
+      ref.current &&
+      ref.current.children.length > 0 &&
+      !renderedTabs.includes(id)
+    ) {
       onRendered(id);
     }
-  }, []);
+  });
   return (
     <div ref={ref} key={id} className={clsx({ [hidden]: activeTab !== id })}>
       {children}