Error logging in React ES6 - reactjs

I am running a react app (ES6). I am trying to find modules that will allow me to print error messages to my terminal console. All the modules I found simply printed the messages to the browser console.

Ah I see. Well when you want to do this and log them in a file you are better of using something like sentry (https://github.com/getsentry). Pretty sure that you can also stream the logs to you back-end!

Related

prevent react from logging specific errors

Working on a login system in react, if the email/user is invalid, the api return 401 status code, as expected.
I added a span that notify the user with the problem, but react still log this "scary" errors in the console, how can I prevent the log of error with specific "reasons" / status codes?
Don't know if that's what you are looking for, but the "ESLint" NPM package can be used to ignore warnings in react files and it can be used to ignore just one line as well.
To ignore all warnings in the file use:
/* eslint-disable */
On the top of the file and it won't console the warnings from this file anymore, I, unfortunately, don't know more about it but here is the documentation to get started.

How would you console log in Gatsby js?

In any other environment console.log('hello world') should print in the terminal when the line of code is executed but in Gatsby Js no matter what I try or where I look to understand what's going on I'm still left confused. Could someone explain what's going on with Gatsby not allowing me to console log?
Solution: Needed to use the browser's console opposed to the terminal in which the app is running on. Came from React-Native where console logging would print in the terminal window running the app.

How to log errors in browser (error view) instead of blank screen in React

I have a React application which is not created with create-react-app. I would like to add a error handling functionality but I have no idea how:
When there is an error, instead of getting a blank page and errors in console, in development, how do I enable this functionality in a React application
where it shows the error stack in the browser?
Do I have to write the code for it or there is a react configuration that I can just enable or should I use a library to achieve this?
EDIT:
Above image is what I want to see as an error report in my browser when there is an error. It is not an error I am trying to solve.
Try Error Boundaries . Add those in your Root Level to catch all errors inside that.

How can I debug a newly cloned React Native app

I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type

error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro"

We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?

Resources