{"record":{"id":"89a6bcdcb08f1e27","repo":"iflytek/astron-agent","slug":"usemodelcontext-must-be-used-within-a-modelprovider","errorCode":null,"errorMessage":"useModelContext must be used within a ModelProvider","messagePattern":"useModelContext must be used within a ModelProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"console/frontend/src/pages/model-management/context/model-context.tsx","lineNumber":193,"sourceCode":"\n  const value = useMemo(\n    () => ({\n      state,\n      actions,\n    }),\n    [state, actions]\n  );\n\n  return (\n    <ModelContext.Provider value={value}>{children}</ModelContext.Provider>\n  );\n};\n\n// Hook\nexport const useModelContext = (): ModelContextValue => {\n  const context = useContext(ModelContext);\n  if (context === undefined) {\n    throw new Error('useModelContext must be used within a ModelProvider');\n  }\n  return context;\n};\n","sourceCodeStart":175,"sourceCodeEnd":197,"githubUrl":"https://github.com/iflytek/astron-agent/blob/5e758547a83371a5a4b29dadf4ac03e8dd527635/console/frontend/src/pages/model-management/context/model-context.tsx#L175-L197","documentation":"`useModelContext` reads React context created by the ModelProvider. The context object has no default value (undefined), so if the hook runs while no `<ModelProvider>` ancestor exists, the code throws 'useModelContext must be used within a ModelProvider'. This is a standard context-guard pattern to give a clear message instead of a cryptic undefined-destructure crash later.","triggerScenarios":"Calling useModelContext() from a component rendered outside <ModelProvider>, or inside a component tree where the provider is conditionally unmounted, or in a separate React root (portal/render) that doesn't inherit the provider.","commonSituations":"Reusing a model-aware component in a new route/page where the provider was forgotten; moving a component into a story/test without the provider wrapper; provider placed below the consumer in the tree (context flows downward only).","solutions":["Wrap the consuming component tree with <ModelProvider> at the nearest common ancestor (page or route layout).","Check render order: the provider must be an ancestor, not a sibling or child, of the consumer.","In tests/stories, wrap with the provider in the render helper.","If undefined is legitimate, create a variant hook that returns a default context instead of throwing."],"exampleFix":"// before\n<ModelDetailPage /> // throws: no provider\n\n// after\n<ModelProvider>\n  <ModelDetailPage />\n</ModelProvider>","handlingStrategy":"try-catch","validationCode":"// at module scope\ncustomHooks.push(() => {\n  try { useContextForTest(ModelContext); } catch { console.warn('ModelProvider missing'); }\n});","typeGuard":"const useModelContextSafe = (): ModelContextValue | undefined => useContext(ModelContext);","tryCatchPattern":"let value: ModelContextValue;\ntry {\n  value = useModelContext();\n} catch {\n  value = DEFAULT_MODEL_CONTEXT; // or render fallback UI\n}","preventionTips":["Wrap each route/page that uses model hooks with <ModelProvider> in a shared layout.","Add a test-render helper that always includes required providers.","Keep provider placement in route-level components, not leaf components.","Enable ESLint react-context rules or code review checks for provider usage."],"tags":["react","context","provider","typescript"],"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"}