{"record":{"id":"09d5daf140065821","repo":"necolas/react-native-web","slug":"touchable-touch-target-debug-should-not-be-enabled","errorCode":null,"errorMessage":"Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!","messagePattern":"Touchable\\.TOUCH_TARGET_DEBUG should not be enabled in prod!","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-native-web/src/exports/Touchable/index.js","lineNumber":995,"sourceCode":"\nconst Touchable = {\n  Mixin: TouchableMixin,\n  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.\n  /**\n   * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).\n   */\n  renderDebugView: ({\n    color,\n    hitSlop\n  }: {\n    color: string | number,\n    hitSlop: EdgeInsetsProp\n  }): Node => {\n    if (!Touchable.TOUCH_TARGET_DEBUG) {\n      return null;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n      throw Error(\n        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!'\n      );\n    }\n    const debugHitSlopStyle = {};\n    hitSlop = hitSlop || { top: 0, bottom: 0, left: 0, right: 0 };\n    for (const key in hitSlop) {\n      debugHitSlopStyle[key] = -hitSlop[key];\n    }\n    const normalizedColor = normalizeColor(color);\n    if (typeof normalizedColor !== 'number') {\n      return null;\n    }\n    const hexColor =\n      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);\n    return (\n      <View\n        pointerEvents=\"none\"\n        style={{","sourceCodeStart":977,"sourceCodeEnd":1013,"githubUrl":"https://github.com/necolas/react-native-web/blob/a9de220ba9e65bdea540fb5322ffb1da2b0bf442/packages/react-native-web/src/exports/Touchable/index.js#L977-L1013","documentation":"Touchable.render contains a debug branch that draws visible hitSlop outlines when the static flag Touchable.TOUCH_TARGET_DEBUG is enabled. If that flag is true while NODE_ENV is production, the code throws Error('Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!') because the debug overlay is meant only for development tuning of touch targets. This is a deliberate fail-fast guard so a debug-only build flag doesn't leak into production bundles.","triggerScenarios":"Touchable.TOUCH_TARGET_DEBUG = true (set statically or by a devtools/debug module) while the app runs with process.env.NODE_ENV === 'production'; typically from copying a dev config into a prod build or a bundler incorrectly leaving process.env.NODE_ENV unminified/unreplaced.","commonSituations":"Forgot to remove TOUCH_TARGET_DEBUG after debugging touch target sizes; bundler (webpack/metro) config not defining NODE_ENV=production so the guard misfires or the flag persists; e2e/production builds sharing a constants file with the debug flag enabled.","solutions":["Set Touchable.TOUCH_TARGET_DEBUG = false (or remove the assignment) in production code paths","Verify process.env.NODE_ENV is correctly set to 'production' during bundling (DefinePlugin / metro config) so dead dev code is stripped","Search the codebase for TOUCH_TARGET_DEBUG and ensure it's only enabled in dev-only modules or behind __DEV__","If the flag is needed in prod-like testing, run with NODE_ENV=development instead of enabling it in production"],"exampleFix":"// before\nTouchable.TOUCH_TARGET_DEBUG = true;\n// after\nif (process.env.NODE_ENV !== 'production') {\n  Touchable.TOUCH_TARGET_DEBUG = true;\n}","handlingStrategy":"validation","validationCode":"if (Touchable.TOUCH_TARGET_DEBUG && process.env.NODE_ENV === 'production') {\n  throw new Error('Disable Touchable.TOUCH_TARGET_DEBUG before a production build');\n}","typeGuard":"function isProdSafeTouchable(t) {\n  return !(t.TOUCH_TARGET_DEBUG === true && process.env.NODE_ENV === 'production');\n}","tryCatchPattern":"try {\n  renderApp();\n} catch (e) {\n  if (e.message.includes('TOUCH_TARGET_DEBUG')) {\n    Touchable.TOUCH_TARGET_DEBUG = false;\n    renderApp();\n  } else {\n    throw e;\n  }\n}","preventionTips":["Set TOUCH_TARGET_DEBUG only inside if (process.env.NODE_ENV !== 'production') or __DEV__ blocks","Verify NODE_ENV is defined/replaced correctly in the bundler (DefinePlugin, metro transformer) for production builds","Add a CI smoke test on the production bundle that renders Touchable to catch debug-flag leakage","Grep for TOUCH_TARGET_DEBUG in release checklists before shipping"],"tags":["debug-flag","production","touchable"],"backgroundTag":"debug-flag-enabled-in-production","analyzedSha":"a9de220ba9e65bdea540fb5322ffb1da2b0bf442","analyzedAt":"2026-09-01T10:01:09.883Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}