{"record":{"id":"7b0134cc3ecb68ce","repo":"iflytek/astron-agent","slug":"usedatabasecontext-must-be-used-within-a-databaseprovider","errorCode":null,"errorMessage":"useDatabaseContext must be used within a DatabaseProvider","messagePattern":"useDatabaseContext must be used within a DatabaseProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"console/frontend/src/pages/resource-management/database-detail/context/database-context.tsx","lineNumber":300,"sourceCode":"      dispatch,\n      testTableRef,\n      actions,\n    }),\n    [state, dispatch, testTableRef, actions]\n  );\n\n  return (\n    <DatabaseContext.Provider value={value}>\n      {children}\n    </DatabaseContext.Provider>\n  );\n};\n\n// 自定义Hook\nexport const useDatabaseContext = (): DatabaseContextType => {\n  const context = useContext(DatabaseContext);\n  if (!context) {\n    throw new Error(\n      'useDatabaseContext must be used within a DatabaseProvider'\n    );\n  }\n  return context;\n};\n\n// 分别导出各个部分的Hook，保持API的简洁性\nexport const useDatabaseState = (): DatabaseState => {\n  const { state } = useDatabaseContext();\n  return state;\n};\n\nexport const useDatabaseActions = (): DatabaseContextType['actions'] => {\n  const { actions } = useDatabaseContext();\n  return actions;\n};\n\nexport const useTestTableRef = (): RefObject<{","sourceCodeStart":282,"sourceCodeEnd":318,"githubUrl":"https://github.com/iflytek/astron-agent/blob/5e758547a83371a5a4b29dadf4ac03e8dd527635/console/frontend/src/pages/resource-management/database-detail/context/database-context.tsx#L282-L318","documentation":"`useDatabaseContext` provides state, actions and refs (state/actions/testTableRef) for the database-detail page via DatabaseProvider. If the hook is called with no provider ancestor, the null context triggers 'useDatabaseContext must be used within a DatabaseProvider'. It converts a silent null crash into an actionable message.","triggerScenarios":"Rendering a database-detail child component outside <DatabaseProvider>; using its hooks in a sibling page; wrapping provider in a route component while a child is reused elsewhere (e.g. drawer or modal rendered through a portal outside the provider tree).","commonSituations":"Reusing detail sub-components in list pages; test renders without provider; refactoring routes so the provider no longer encloses the consumer; portals that escape the React tree unless the portal root is inside the provider.","solutions":["Wrap the consuming page/subtree with <DatabaseProvider>.","For modals/portals, render the portal node inside the provider component so context propagates.","Wrap test renders with DatabaseProvider (or a fixture provider).","Split hooks if a component only needs partial state, so it can live outside the provider."],"exampleFix":"// before\n<DatabaseDetailContent /> // throws\n\n// after\n<DatabaseProvider databaseId={id}>\n  <DatabaseDetailContent />\n</DatabaseProvider>","handlingStrategy":"try-catch","validationCode":"const useDatabaseContextSafe = (): DatabaseContextType | undefined => useContext(DatabaseContext);","typeGuard":"function hasDatabaseContext(c: unknown): c is DatabaseContextType {\n  return !!c && 'state' in (c as object) && 'actions' in (c as object);\n}","tryCatchPattern":"let db: DatabaseContextType;\ntry {\n  db = useDatabaseContext();\n} catch {\n  return <DatabaseUnavailable />; // or redirect to list page\n}","preventionTips":["Enclose the whole database-detail page in <DatabaseProvider> including drawers and portals.","Mount portal containers inside the provider tree so context propagates.","Create a providers.jsx test wrapper combining all required providers.","Document the provider requirement on each hook's JSDoc."],"tags":["react","context","provider"],"backgroundTag":"missing-required-argument","analyzedSha":"5e758547a83371a5a4b29dadf4ac03e8dd527635","analyzedAt":"2026-09-12T08:03:51.356Z","contentChangedAt":"2026-09-12T08:03:51.356Z","schemaVersion":2},"datasetVersion":"2026-09-16T04:17:20.429Z"}