How to exclude / disable React Developer Tools in Production build?

user_9399978 0
Viewed 4148

As its name suggests developer tools should be visible or accessible only during development and not in production. I don't want my end users seeing the state and component tree, thus knowing what's going on under the hood. Although React Developer Tool in Production neither allows modification of the components' state nor does it reveal their names, it doesn't fully hide them or disable the tools altogether. End Users can still see each component's state and the whole app tree.

Is there a way to exclude / disable React Developer tools or disconnect it in the production build, like how Augury does for Angular?

reactjs browser security javascript
1 Answers

While I was searching the internet for answers while this question is still in draft, I found this one. But sadly this didn't work. It did however tell me that it has something to do with __REACT_DEVTOOLS_GLOBAL_HOOK__.

So After playing with it and modifying it, it worked. It successfully disconnected the App from React Developer Tools.

Here is the code to disconnect the App from React Developer Tools.

// disableReactDevTools.ts

// Declare the types if you're using TypeScript
// Remove this block if you're using JavaScript
declare global {
  interface Window {
    __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
  }
}

export function disableReactDevTools() {
  // Check if the React Developer Tools global hook exists
  if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== "object") {
    return;
  }

  for (const prop in window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    if (prop === "renderers") {
      // this line will remove that one console error

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] = new Map()
    } else {
      // Replace all of its properties with a no-op function or a null value
      // depending on their types

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] =
        typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] === "function"
          ? () => {}
          : null;
    }
  }
}

// index.tsx
import React from "react";
import ReactDOM from "react-dom";

// ...

if (process.env.NODE_ENV === "production") disableReactDevTools();
// ...

This code will throw any error or warnings in the console.

user_93999780
Related