Question 197989 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I troubleshoot React issues easier?

I am using sublime text with ESLint to catch any obvious syntax mistakes. I am also using webpack in development mode. However I made a typo as such:

console.log(articls); // line 14 missing e, article does not exist

And got a cryptic print out from React. It did not give me the correct line number / column number as I thought.

Besides running a linter and webpack in development mode is there anything I can do to get the accurate line number.

It is telling me the error is on line 25 and line 25 is blank. The error is on line 14.

The error reporting by Chrome is not correct.

react_devtools_backend_compact.js:2367 The above error occurred in the
<WEBPACK_DEFAULT_EXPORT> component:

at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./A1Bookmark/A1Bookmark.jsx?:25:66)
at div
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1Page/F1Page.jsx?:31:70)
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1/F1.jsx?:32:70)
at Provider (webpack:///./node_modules/react-redux/es/components/Provider.js?:16:3)

Consider adding an error boundary to your tree to customize error
handling behavior. Visit https://reactjs.org/link/error-boundaries to
learn more about error boundaries.

Actual File: ( Lines 1 – 25 )

import                                  './A1Bookmark.css';
import React, { useEffect, useState }   from 'react';
import { useSelector }                  from 'react-redux';

export default () => {
  const [tag, setTag] = useState('Nutrition');
  const articles = useSelector((state) => state.Articles.articles);
  const top_hash = {};

  function makeTopHash() {
    if(!articles) {
      return;
    }
    console.log(articls);
    articles.forEach((article) => {
      if(!(article.tag in top_hash)) {
        top_hash[article.tag] = {};
      }
      if(!(article.domain in top_hash[article.tag])) {
        top_hash[article.tag][article.domain] = {};
      }
    });
  }
  makeTopHash();
  // blank line 25
Tags:

2

Answers


  1. 0

    A VS code plugin called "console ninja" might help. It shows the output of "console.log" and the runtime errors right next to your code.

    Login or Signup to reply.
  2. 0

    Disable Source Maps: If you are using source maps in your development build, they can sometimes cause discrepancies in the reported line numbers. Try disabling source maps temporarily and see if the error message provides a more accurate location. In your webpack configuration, set the devtool option to false or remove it altogether.

    Add "use strict" Directive: Add the "use strict"; directive at the top of your JavaScript file or within the enclosing function. This can sometimes help the JavaScript engine provide more accurate error locations.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search