prevent react from logging specific errors - reactjs

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.

Related

importing Amplify throws error "null is not an object (evaluating 'keys.filter)" in react native app

Any time I import Amplify into my React Native project's App.js file, I get the following error:
TypeError: null is not an object (evaluating 'keys.filter')
Here is how I'm importing it:
I run the project using Expo only. If I comment the import Amplify line out, any other files which use anything related to Amplify cause the same error to occur.
Initially, when I was loading this project for the first time, I had other errors to deal with like first needing to create the aws-exports.js file. I copied this over from an old project (Because this is meant to be a re-do of another project that's already set up). Once I included that file I had to update a few lines in that file because of an improper reference to Linking from expo. Once I fixed that, it throw this error I'm referencing here. Now, even if I delete the aws-exports file it will throw this error as soon as Amplify is imported into the App.js file.
-- Update
I've found where the error is occurring. Some of my code gets executed but the error happens inside of the reactnative.js file when syncing between two memory software.
I've tried to reproduce this error inside a fresh react application by copying the package.js file and then importing Amplify into the App.js file but it doesn't throw this error.
Here is a screenshot of where the error is taking place. I'm still trying to figure out how to pinpoint where in my code this error begins.
According to Expo, you have to follow these steps
it would be best if you imported Amplify
import Amplify from '#aws-amplify/core'
All you need to follow those steps it sees the configuration issue result data is not coming that's why it gives a null value and crashes.
Follow steps below will fix your problem
https://blog.expo.dev/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2
The problem seems to be resolved by changing the slug attribute in the react app.json file. I changed the slug from being a camel case to an all lower case slug.
After this the error has gone away for what seems permanent. I've been able to replicate the error in small sample apps. I don't understand why this causes these errors.

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.

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?

Error logging in React ES6

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!

How to get the exact error message of JsDoc in reactjs?

We are using JsDoc to create our document of reactjs pages. All comment
we wrote as per the jsDoc rule but still it showing below message for some page:
ERROR: Unable to parse D:\Example\src\reducers\example.js:Unexpected token
I am not getting the error in other pages, we wrote the comment same way but
for some pages it is throwing above error. How can I get the exact error
message and line number where it is failing?
How can I get the exact error message and line number where it is failing?
Command-line arguments to JSDoc provide --verbose option which should provide with log detailed information as JSDoc runs. Unfortunately this will not give you exact line number.
What you ask is available as the open request on GitHub: Option to print error stack. As you may guess this is not implemented yet. You may use work around, which posted by iPherian in the same thread. This work around will give you line number and column of the error occur.
EDIT:
As of jsdoc version "3.5.0-dev" (current development master) the feature to print line and column number of error occur is implemented and available. After installation of the current development version ...
npm install git+https://github.com/jsdoc3/jsdoc.git
and running jsdoc against JS source
>"C:\folder\node_modules\.bin\jsdoc.cmd" AppScripts -d bin/Reference --verbose
the error along with line and column numbers are printed out into the output ...

Resources