I am trying to integrate Sentry error reporting with my react app. I have it working with my backend fine, but I am now having issues with the frontend.
What I have found is that if I run the Raven.configure("sdn").install() from my webrowser console, the error logging will work.
I have added the the script & configure to my index.html, but it will not log errors without my manually configuring in the browser console.
Thanks
Related
I am making a MERN e-commerce project with redux.
I have hosted my backend in Heroku and my frontend is hosted in vercel .
everything running fine from localhost but when I open hosted site
then it shows "o.map is not a function" on console
Here is my project github link-
Frontend- https://github.com/arijitdas13105/Ashop-frontend-new
Backend- https://github.com/arijitdas13105/ashop-backend
My hosted website link - https://ashop-frontend-99x2ayoh7-arijitdas13105.vercel.app/products
My backend Product API - https://ashop-server.herokuapp.com/api/products
let me know anything else need.
When you host in vercel, your JS code is minified with react-scripts build (You can see it in your package.json). This o.map is other variable in your code, probably the products.map. You can solve this issue using products?.map instead, so it will try to render the elements only when it has content.
If the data is not load and you don't know why, I recommend you to run it with npm run dev and figure out the reason (you can use debugger or console.log).
You can see the Network Tab in your devtools to see what the backend is returning as well.
Please help fix I ran into this error after deploying my webpage to git-pages,
now after running my React app it compiles successfully but does not display anything in the browser when you refresh the page this error pops up on the console.
link to the React app
Please follow the steps given on this repo - Deploy React to GithubPages
Alternative - React Deployment pages also explains how you can deploy to github pages Create-react-app deploy to githubpages
I wanted to start getting into Next js, and I followed the tutorial on their site (Next js Tutorial) to a t - with no luck. I run npm run dev and I receive the following messages on my console, and terminal respectively:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
and Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
I am running Node v.13.13.0, React version 16.13.1 and React-DOM version 16.13.1.
I've tried creating my own app from scratch using npx-create-next-app, and I get the exact same error.
I just want to get a Next js app up and running, any help is greatly appreciated.
I had the same problem but I was able to resolve it in the end. I was using GitBash as my command window which was causing the internal server error. Once I switched to windows cmd, everything worked fine.
When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit
I am trying to deploy the friendly-pix firebase sample which can be found at https://github.com/firebase/friendlypix/tree/master/web and am running into errors after deploying it. Below is a screenshot showing what the console debugger is
telling me.
I'm really at a loss for what to do as the error appears to be in the firebase script. I also checked the network tab and nothing is giving a 404 error so all scripts appear to be deployed correctly.