How to log react console errors to a file?

Question

I am new in front-end/client-side app development for website. I am setting up a new react project. I used create-react-app.

How should I handle the console errors(other than network call errors)? Is there a way to log them in any file?

What are the best logging practices?

Welcome to stack! Since React is a client side library, the errors are occurring on someone else's browser, and browsers for obvious reasons can't write files to computers, let alone your computer. You could however make a POST request on errors somewhere and then log them there — azium
– azium, Commented Jul 29, 2017 at 19:33
Not sure why you would want to do that anyways. What purpose does the file have over, say, just fixing the errors during development? — azium
– azium, Commented Jul 29, 2017 at 19:34
@azium got your points. I have updated my question. Can you have a relook? — Rahul Kumar
– Rahul Kumar, Commented Jul 29, 2017 at 19:42

jeanfrg · Accepted Answer · 2017-07-29 19:49:30Z

5

Even though there are means and ways to store data on the browser (not to actual client files) that's not really the general strategy for logging browser errors (which I believe is what you're referring to).

In my experience we'd have a dedicated logging server with a simple API with adequate security that filters traffic and applies rate limiting. That would finally enhance and write logs into a document database that can later be analysed.

A naive JavaScript solution would be using the following to capture errors and send them out to a logging server.

window.onerror = function(message, url, lineNumber) {  
  // make ajax call to api to save error on server
  return true;
};

I should also mention Sentry.io - they provide a service that does this and even though there are some limitations they're usually enough for a small to mid app.

https://github.com/getsentry

edited Jul 29, 2017 at 19:49

answered Jul 29, 2017 at 19:34

jeanfrg

2,3712 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

azium Over a year ago

I was thinking about sentry as well. :+1:

Rahul Kumar Over a year ago

@jeanfrg I have updated my quesion, Can you have a relook?

jeanfrg Over a year ago

@RahulKumar my answer still stands. Basically what something like sentry does is capture all console errors and them makes an ajax call to an api which will save them for you to be able to check them out at a later date.

jeanfrg Over a year ago

@RahulKumar I've updated the answer with screenshots, links and a code snippet

jeanfrg Over a year ago

@RahulKumar did this help?

Collectives™ on Stack Overflow

How to log react console errors to a file?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related