{"record":{"id":"2bf67191fdbe109e","repo":"mastra-ai/mastra","slug":"usemobiledrawer-must-be-used-within-a-mainsidebarp","errorCode":null,"errorMessage":"useMobileDrawer must be used within a MainSidebarProvider.","messagePattern":"useMobileDrawer must be used within a MainSidebarProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/playground-ui/src/ds/components/MainSidebar/main-sidebar-context.ts","lineNumber":62,"sourceCode":"  const ctx = React.useContext(MainSidebarContext);\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!ctx || !drawer) {\n    throw new Error('useMainSidebar must be used within a MainSidebarProvider.');\n  }\n  return { ...ctx, ...drawer };\n}\n\nexport function useMaybeSidebar(): MainSidebarContextValue | null {\n  const ctx = React.useContext(MainSidebarContext);\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!ctx || !drawer) return null;\n  return { ...ctx, ...drawer };\n}\n\n/** Reads only mobile drawer state. Cheap — no re-renders on sidebar resize. */\nexport function useMobileDrawer(): MobileDrawerContextValue {\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!drawer) throw new Error('useMobileDrawer must be used within a MainSidebarProvider.');\n  return drawer;\n}\n","sourceCodeStart":44,"sourceCodeEnd":65,"githubUrl":"https://github.com/mastra-ai/mastra/blob/75dd419e613fe9c39f846ffc500716141b74fda6/packages/playground-ui/src/ds/components/MainSidebar/main-sidebar-context.ts#L44-L65","documentation":"useMobileDrawer reads only the MobileDrawerContext (openMobile, setOpenMobile), which MainSidebarProvider supplies. Outside the provider the context is null and the hook throws, keeping mobile drawer state accessible only where the provider guarantees it exists.","triggerScenarios":"Calling useMobileDrawer in a component outside <MainSidebarProvider>; rendering a mobile-only control (e.g. hamburger toggle) in a header laid out above or beside the provider.","commonSituations":"A header component reused across layouts, some of which don't mount the sidebar provider; tests rendering the toggle in isolation; extracting the drawer toggle into a shared package without the provider dependency.","solutions":["Ensure an ancestor renders <MainSidebarProvider> (it provides both desktop and mobile contexts).","Alternatively use useMaybeSidebar/useMobileDrawer-nullable variant if the component must tolerate absence.","Move the provider to the app shell root so headers/footers can consume drawer state.","Wrap with the provider in tests/storybook before rendering the consumer."],"exampleFix":"// before\nfunction MobileToggle() {\n  const { openMobile, setOpenMobile } = useMobileDrawer(); // throws\n// after\n<MainSidebarProvider>\n  <MobileToggle />\n</MainSidebarProvider>","handlingStrategy":"fallback","validationCode":"// Only call useMobileDrawer under MainSidebarProvider; otherwise fall back:\nconst drawer = useMaybeMobileDrawer?.();\nif (!drawer) return <NonCollapsibleHeader />;","typeGuard":"function hasDrawer(d: MobileDrawerContextValue | null): d is MobileDrawerContextValue {\n  return d !== null;\n}","tryCatchPattern":"// Catch at the boundary or prefer nullable access:\n<ErrorBoundary fallback={<StaticHeader /> }>\n  <MobileToggle />\n</ErrorBoundary>","preventionTips":["Place headers using drawer state inside the provider's layout subtree.","Promote MainSidebarProvider to the shell root for app-wide access.","Wrap isolated renders (tests/storybook) with the provider.","Prefer nullable context hooks in reusable component libraries."],"tags":["react","context","sidebar","playground-ui"],"backgroundTag":"missing-react-context-provider","analyzedSha":"75dd419e613fe9c39f846ffc500716141b74fda6","analyzedAt":"2026-08-30T00:15:31.844Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}