{"record":{"id":"7c4a8f3c36f8f4fc","repo":"different-ai/openwork","slug":"usedenflow-must-be-used-within-denflowprovider","errorCode":null,"errorMessage":"useDenFlow must be used within DenFlowProvider.","messagePattern":"useDenFlow must be used within DenFlowProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"ee/apps/den-web/app/(den)/_providers/den-flow-provider.tsx","lineNumber":2331,"sourceCode":"    generateWorkerToken: async () => {\n      await generateWorkerToken();\n    },\n    renameWorker,\n    deleteWorker,\n    redeployWorker,\n    refreshRuntime,\n    upgradeRuntime,\n    copyToClipboard,\n    getRuntimeServiceLabel,\n  };\n\n  return createElement(DenFlowContext.Provider, { value }, children);\n}\n\nexport function useDenFlow() {\n  const value = useContext(DenFlowContext);\n  if (!value) {\n    throw new Error(\"useDenFlow must be used within DenFlowProvider.\");\n  }\n  return value;\n}\n","sourceCodeStart":2313,"sourceCodeEnd":2335,"githubUrl":"https://github.com/different-ai/openwork/blob/2b7df46e8ae1517d64c896c7793d2d52ec845669/ee/apps/den-web/app/(den)/_providers/den-flow-provider.tsx#L2313-L2335","documentation":"useDenFlow is the hook that reads DenFlowContext, which is only populated when a component is rendered inside <DenFlowProvider>. The context default is null, so calling the hook outside the provider returns null and the hook throws this guard error. It is a React context misuse guard, not an API failure.","triggerScenarios":"Calling useDenFlow() in a component rendered outside <DenFlowProvider>, e.g. in a layout above the provider, in a utility/module-level call, in a test render without the provider wrapper, or from multiple parallel Next.js runtimes/route groups where the provider isn't mounted.","commonSituations":"Adding a new component to a page whose layout doesn't wrap children with DenFlowProvider; rendering a hook consumer in Storybook/tests without the wrapper; moving the provider deeper in the tree than the consumer.","solutions":["Wrap the consuming component (or its nearest layout/page) with <DenFlowProvider>.","Move the provider up to app/(den)/layout.tsx so all den routes share it.","In tests/Storybook, render inside a DenFlowProvider wrapper or mock the context.","Verify the consumer and provider are in the same React render tree (no duplicated provider modules)."],"exampleFix":"// before\nexport default function MyWidget() {\n  const { user } = useDenFlow();\n// after\nexport default function MyWidget() {\n  return (\n    <DenFlowProvider>\n      <MyWidgetInner />\n    </DenFlowProvider>\n  );\n}\nfunction MyWidgetInner() {\n  const { user } = useDenFlow();","handlingStrategy":"try-catch","validationCode":"import { enqueue } from \"./safeDenFlow\"; // wrapper module\n// safeDenFlow.ts\nexport function useSafeDenFlow() {\n  const ctx = useContext(DenFlowContext);\n  return ctx; // may be null; callers check before use\n}","typeGuard":"function hasDenFlow(v: ReturnType<typeof useSafeDenFlow>): boolean {\n  return v !== null;\n}","tryCatchPattern":"let flow: DenFlowValue | null = null;\ntry {\n  flow = useDenFlow();\n} catch {\n  // cannot use try/catch around hooks — instead use a nullable accessor\n}\n// Correct pattern: a nullable wrapper hook\nconst value = useContext(DenFlowContext);\nif (!value) return <PleaseWrapInProvider />;","preventionTips":["Render all den-route consumers under a single DenFlowProvider in the root layout.","Add an ESLint rule/test that every page using useDenFlow is under the provider.","In tests, always mount a shared renderWithDenFlow() wrapper.","Avoid calling context hooks in module scope or non-component utilities."],"tags":["react","react-context","provider-missing"],"backgroundTag":"hook-used-outside-provider","analyzedSha":"2b7df46e8ae1517d64c896c7793d2d52ec845669","analyzedAt":"2026-09-01T07:59:23.713Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}