[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f1s7bogwy9z2hy":3},{"_id":4,"slug":5,"title":6,"subtitle":7,"kind":8,"cards":9,"tags":58,"categories":60,"source":62,"lang":65,"author":66,"audioState":69,"stats":70,"publishedAt":73,"renderer":74},"6abc0e7cca21c797c7e9e475","see-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632","See which bots and AI crawlers are visiting your React site","A crawler can request your React site's HTML without ever running React.","news",[10,13,18,23,28,33,38,43,48,53],{"headline":6,"body":11,"imageUrl":12,"sourceImageUrl":12},"A crawler can request your React site's HTML without ever running React. If you only look at browser analytics, you can miss those requests entirely.","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvppw1pyhlm2ulsi3i5b2.png",{"headline":14,"body":15,"imageUrl":16,"images":17},"This tutorial uses WebDecoy to observe requests to","This tutorial uses WebDecoy to observe requests to a React application served by Express. It starts in monitor mode, so you can inspect detections before choosing whether to block anything. We build WebDecoy; this example uses its Express SDK and cloud dashboard. Start with where your React site is hosted","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F1.webp",{"local":16},{"headline":19,"body":20,"imageUrl":21,"images":22},"React renders your interface. The server or CDN","React renders your interface. The server or CDN in front of it receives the initial request. That is where this tutorial puts detection. The example has a simple request path:","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F2.webp",{"local":21},{"headline":24,"body":25,"imageUrl":26,"images":27},"If your React files live on a static","If your React files live on a static host and your API runs elsewhere, installing this middleware on the API only covers requests to that API. It does not reveal crawlers fetching the separately hosted pages. Use a sensor at the hosting or CDN layer for that traffic. For Next.js, use the Next.js setup guide, which places detection in its server request hook.","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F3.webp",{"local":26},{"headline":29,"body":30,"imageUrl":31,"images":32},"Download the React + Express example and extract","Download the React + Express example and extract it. With Node.js 22.12 or later installed, run these commands from the extracted directory: Create an API key in your WebDecoy dashboard and add it to .env.local:","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F4.webp",{"local":31},{"headline":34,"body":35,"imageUrl":36,"images":37},"This is a server credential. Keep it out","This is a server credential. Keep it out of React components and do not give it a VITE_ prefix, which is intended for variables exposed to client code. Then build and start the application:","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F5.webp",{"local":36},{"headline":39,"body":40,"imageUrl":41,"images":42},"Open http:\u002F\u002F127.0.0.1:3110. You are visiting Express serving Vite's","Open http:\u002F\u002F127.0.0.1:3110. You are visiting Express serving Vite's production output. Running the Vite development server separately would bypass this Express middleware. Put WebDecoy before the page routes The important part of server.mjs is the middleware order:","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F6.webp",{"local":41},{"headline":44,"body":45,"imageUrl":46,"images":47},"Both page routes pass through WebDecoy before Express","Both page routes pass through WebDecoy before Express serves the HTML. Built assets bypass analysis. Unknown routes still return 404; the middleware does not turn a request for a nonexistent file into a successful page response.","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F7.webp",{"local":46},{"headline":49,"body":50,"imageUrl":51,"images":52},"Monitor mode lets requests continue when WebDecoy would","Monitor mode lets requests continue when WebDecoy would otherwise deny them. honeytoken: false disables automatic HTML trap injection for this walkthrough, keeping the example focused on observing incoming requests.","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F8.webp",{"local":51},{"headline":54,"body":55,"imageUrl":56,"images":57},"The local server accepts direct connections. Before deploying","The local server accepts direct connections. Before deploying behind a proxy, configure Express's trust proxy setting for your actual hosting topology so client IP attribution is correct. Do not blindly trust forwarding headers supplied by clients.","\u002Fapi\u002Fmedia\u002Fposts\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-27b80632\u002F9.webp",{"local":56},[59],"dev",[61],"Technology",{"name":63,"url":64},"Dev.to","https:\u002F\u002Fdev.to\u002Fwebdecoy\u002Fsee-which-bots-and-ai-crawlers-are-visiting-your-react-site-2c5k","en",{"handle":67,"displayName":68},"spots","Spots","queued",{"views":71,"likes":72,"saves":72,"shares":72,"completions":72,"opens":72,"skips":72,"depthSum":72},3,0,"2026-09-29T19:16:12.848Z","local"]