The temperature in the Twin Cities of Minneapolis and St. Paul in the past couple days has dropped a few degrees. We just started the month of August which should be midsummer. My wife always says that around the birthday of one of our sons (which is around mid March) fall arrives. I do just do not want to believe that summer is almost over. To tell you the truth, COVID-19 has not helped and to top it off this year the Minnesota State Fair has been cancelled. The fair is what marks the end of summer around here.
I was expecting an email to get something outside work done, but it did not arrive. Hopefully I will be able to work on it this coming Friday. My wife wants to visit my son who lives in Wisconsin next weekend. We chat on-line with Jitsi pretty much every day, but nothing beats chatting in person. We both are very good at keeping social distancing practices. We do not have too many weekends left before school starts. That will be a game changer for everyone that has kids attending K-12 and / or college. We need to find a way to get our country and the world back on track.
In a previous post I mentioned that we live of a private road. The road was starting to show age signs. In addition, several neighbors were experiencing issues drainage issues when we received large amounts of rain due to summer storms. After a couple weeks of work, we have large underground drainage, replaced road curb, and a nice and smooth new road surface.
For the next couple times of garbage collection days, we have been asked to put leave our bins in the main road. The home owners association does not want heavy trucks on the recently resurfaced road.
Now to the main subject of this post which will be quite short.
As you know I have been taking an ACM on-line React course. The course is by O’Reilly. Chapter 6 which I finished last week; covers debugging React applications. In my humble opinion, if you are interested in this topic, I would suggest signing up for this (or any other comparable) course. I can only show the resulting state of the application files after inducing and then correcting a set of bugs.
I completed chapter six and then created a GitHub repository to hold the code for the project.
# **** open command prompt console on Windows 10 **** Microsoft Windows [Version 10.0.18363.959] (c) 2019 Microsoft Corporation. All rights reserved. # **** **** C:\Users\johnc>dir 07/16/2020 07:39 AM <DIR> . 07/16/2020 07:39 AM <DIR> .. 05/13/2020 03:07 PM 57 .angular-config.json 06/18/2020 04:50 PM <DIR> .atom 05/13/2020 03:03 PM <DIR> .config 09/22/2019 08:00 AM <DIR> .eclipse 03/15/2020 08:38 AM 59 .gitconfig 06/19/2020 08:40 AM 119 .node_repl_history 04/23/2020 11:11 AM <DIR> .p2 05/07/2020 08:11 AM 1,005,502 .pipwin 04/21/2020 08:07 AM <DIR> .pylint.d 09/22/2019 08:00 AM <DIR> .tooling 03/10/2020 03:53 PM <DIR> .vscode 07/15/2020 09:12 AM <DIR> 3D Objects 07/15/2020 09:12 AM <DIR> Contacts 04/08/2020 07:59 AM <DIR> ContainsCloseNums 02/17/2020 03:52 PM <DIR> Documents 07/23/2020 10:04 AM <DIR> Downloads 09/22/2019 07:57 AM <DIR> eclipse 09/22/2019 07:59 AM <DIR> eclipse-workspace_0 07/15/2020 09:12 AM <DIR> Favorites 07/15/2020 09:12 AM <DIR> Links 07/15/2020 09:12 AM <DIR> Music 05/13/2020 03:49 PM <DIR> my-app 09/12/2019 04:36 PM <DIR> NCH Software Suite 07/16/2020 07:39 AM <DIR> node_modules 08/03/2020 07:27 AM <DIR> OneDrive 07/16/2020 07:39 AM 3,871 package-lock.json 05/04/2020 03:42 PM <DIR> pipwin 07/15/2020 09:12 AM <DIR> Saved Games 07/15/2020 09:12 AM <DIR> Searches 05/11/2020 03:04 PM <DIR> source 07/15/2020 09:12 AM <DIR> Videos 05/05/2020 01:30 PM <DIR> vimfiles 06/10/2020 10:50 AM <DIR> workspace0 07/28/2020 11:08 AM <DIR> workspace1 05/05/2020 01:51 PM 3,281 _viminfo # **** desired directory **** C:\Users\johnc>cd workspace1 # **** **** C:\Users\johnc\workspace1>dir 07/28/2020 11:08 AM <DIR> . 07/28/2020 11:08 AM <DIR> .. 07/08/2020 07:44 AM <DIR> base-syntax 07/27/2020 08:50 AM <DIR> Combinations 07/01/2020 08:58 AM <DIR> HospitalsHillClimbing 07/23/2020 10:15 AM <DIR> KittysCalculations 06/22/2020 11:34 AM <DIR> learnangular5 07/09/2020 02:21 PM <DIR> lists-conditionals 07/28/2020 11:09 AM <DIR> LowestCommonAncestor 07/02/2020 08:48 AM <DIR> react-complete-guide 07/22/2020 08:03 AM <DIR> styling-components-elements 07/11/2020 10:18 AM <DIR> TheMasseuse 07/22/2020 04:36 PM <DIR> TreePreorderTraversal # **** desired directory **** C:\Users\johnc\workspace1>cd styling-components-elements # **** **** C:\Users\johnc\workspace1\styling-components-elements>git init Reinitialized existing Git repository in C:/Users/johnc/workspace1/styling-components-elements/.git/ # **** check if we are in the proper remote repository (we are not) **** C:\Users\johnc\workspace1\styling-components-elements>git remote -v origin https://github.com/JohnCanessa/styling-components-elements.git (fetch) origin https://github.com/JohnCanessa/styling-components-elements.git (push) # **** change repository **** C:\Users\johnc\workspace1\styling-components-elements>git remote set-url origin https://github.com/JohnCanessa/DebuggingReactApp.git # **** check the name of the remote repository (looks good) **** C:\Users\johnc\workspace1\styling-components-elements>git remote -v origin https://github.com/JohnCanessa/DebuggingReactApp.git (fetch) origin https://github.com/JohnCanessa/DebuggingReactApp.git (push) # **** **** C:\Users\johnc\workspace1\styling-components-elements>dir 07/22/2020 08:03 AM <DIR> . 07/22/2020 08:03 AM <DIR> .. 07/22/2020 07:59 AM 59 .gitignore 07/15/2020 08:10 AM <DIR> .vscode 07/22/2020 08:01 AM <DIR> config 10/19/2017 10:31 AM 374 how-to-use.txt 07/22/2020 08:01 AM <DIR> node_modules 07/22/2020 08:01 AM 364,821 package-lock.json 07/22/2020 08:01 AM 2,648 package.json 07/15/2020 08:08 AM <DIR> public 10/19/2017 10:29 AM 105,919 README.md 07/22/2020 08:01 AM <DIR> scripts 07/28/2020 08:54 AM <DIR> src # **** check we are skipping pushing the /node_modules folder **** C:\Users\johnc\workspace1\styling-components-elements>type .gitignore # **** ignore the node_modules folder **** /node_modules/* # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: src/App.js modified: src/Person/Person.js Untracked files: (use "git add <file>..." to include in what will be committed) src/ErrorBoundary/ no changes added to commit (use "git add" and/or "git commit -a") # **** add the source code files that had been modified and added **** C:\Users\johnc\workspace1\styling-components-elements>git add . warning: LF will be replaced by CRLF in src/App.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/Person/Person.js. The file will have its original line endings in your working directory # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: src/App.js new file: src/ErrorBoundary/ErrorBoundary.js modified: src/Person/Person.js # **** commit the code **** C:\Users\johnc\workspace1\styling-components-elements>git commit -m "first commit" [master 9907ed3] first commit 3 files changed, 50 insertions(+), 15 deletions(-) create mode 100644 src/ErrorBoundary/ErrorBoundary.js # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master nothing to commit, working tree clean # **** push the changes to GitHub **** C:\Users\johnc\workspace1\styling-components-elements>git push origin master Enumerating objects: 55, done. Counting objects: 100% (55/55), done. Delta compression using up to 12 threads Compressing objects: 100% (52/52), done. Writing objects: 100% (55/55), 138.96 KiB | 7.72 MiB/s, done. Total 55 (delta 11), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (11/11), done. To https://github.com/JohnCanessa/DebuggingReactApp.git * [new branch] master -> master # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master nothing to commit, working tree clean # **** check the log **** C:\Users\johnc\workspace1\styling-components-elements>git log -v commit 9907ed359aac8dd39455e3ce08822dea76edaf84 (HEAD -> master, origin/master) Author: JohnCanessa <john.canessa@gmail.com> Date: Mon Aug 3 08:48:57 2020 -0500 first commit commit e5b0925f02b8c44a04a37a6a8ccba36ec3297f81 Author: JohnCanessa <john.canessa@gmail.com> Date: Mon Jul 27 11:22:19 2020 -0500 done with this chapter commit 7fbb5e168401968d9ed1849112589723124c4046 Author: JohnCanessa <john.canessa@gmail.com> Date: Wed Jul 22 08:04:41 2020 -0500 removed styled components from App.js
GitHub runs a bot named Dependabot which may or may not generate warnings at several levels. I went after the first critical alert.
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.2", <=== added
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
:::: :::: ::::
Edited the package.json file and added a line as suggested:
# **** after modifying **** C:\Users\johnc\workspace1\styling-components-elements>npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added 2 packages from 1 contributor, updated 2 packages and audited 1288 packages in 9.995s 1 package is looking for funding run `npm fund` for details found 1549 vulnerabilities (793 low, 41 moderate, 713 high, 2 critical) run `npm audit fix` to fix them, or `npm audit` for details # **** **** C:\Users\johnc\workspace1\styling-components-elements>npm audit fix npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.1","npm":"6.14.5"}) npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + react-dev-utils@4.2.3 added 204 packages from 104 contributors, removed 60 packages, updated 38 packages and moved 3 packages in 52.072s 3 packages are looking for funding run `npm fund` for details fixed 1457 of 1549 vulnerabilities in 1288 scanned packages 51 vulnerabilities required manual review and could not be updated 6 package updates for 41 vulnerabilities involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually) # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: package-lock.json modified: package.json modified: src/Person/Person.js no changes added to commit (use "git add" and/or "git commit -a") C:\Users\johnc\workspace1\styling-components-elements>git add Nothing specified, nothing added. hint: Maybe you wanted to say 'git add .'? hint: Turn this message off by running hint: "git config advice.addEmptyPathspec false" C:\Users\johnc\workspace1\styling-components-elements>git add . warning: LF will be replaced by CRLF in package-lock.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in package.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/Person/Person.js. The file will have its original line endings in your working directory # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: package-lock.json modified: package.json modified: src/Person/Person.js # **** commit changes **** C:\Users\johnc\workspace1\styling-components-elements>git commit -m "added dependency to address some dependabot messages" [master bf58913] added dependency to address some dependabot messages 3 files changed, 2021 insertions(+), 742 deletions(-) # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master nothing to commit, working tree clean C:\Users\johnc\workspace1\styling-components-elements>git push origin master Enumerating objects: 13, done. Counting objects: 100% (13/13), done. Delta compression using up to 12 threads Compressing objects: 100% (7/7), done. Writing objects: 100% (7/7), 19.13 KiB | 3.83 MiB/s, done. Total 7 (delta 5), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (5/5), completed with 5 local objects. remote: remote: GitHub found 36 vulnerabilities on JohnCanessa/DebuggingReactApp's default branch (3 critical, 14 high, 14 moderate, 5 low). To find out more, visit: remote: https://github.com/JohnCanessa/DebuggingReactApp/network/alerts remote: To https://github.com/JohnCanessa/DebuggingReactApp.git 9907ed3..bf58913 master -> master # **** check git status **** C:\Users\johnc\workspace1\styling-components-elements>git status On branch master nothing to commit, working tree clean # **** check the log **** C:\Users\johnc\workspace1\styling-components-elements>git log commit bf58913bd31ce1be25ad57297a7307fcfd477d80 (HEAD -> master, origin/master) Author: JohnCanessa <john.canessa@gmail.com> Date: Mon Aug 3 09:12:36 2020 -0500 added dependency to address some dependabot messages commit 9907ed359aac8dd39455e3ce08822dea76edaf84 Author: JohnCanessa <john.canessa@gmail.com> Date: Mon Aug 3 08:48:57 2020 -0500 first commit commit e5b0925f02b8c44a04a37a6a8ccba36ec3297f81 Author: JohnCanessa <john.canessa@gmail.com> Date: Mon Jul 27 11:22:19 2020 -0500 done with this chapter commit 7fbb5e168401968d9ed1849112589723124c4046 Author: JohnCanessa <john.canessa@gmail.com> Date: Wed Jul 22 08:04:41 2020 -0500 removed styled components from App.js
I guess I need to repeat the process a few time for the remaining critical conditions outlined by Dependabot. I will get it done in the near future.
Error Boundaries are used to avoid an application to crash. To me it is like the typically used try-catch construct found in many programming languages.
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
Introducing Error Boundaries – A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in life cycle methods, and in constructors of the whole tree below them.
import React from 'react'; import classes from './Person.css'; // **** **** const person = ( props ) => { // ???? generate an error ???? const rnd = Math.random(); if (rnd > 0.9) { throw new Error('Something went wrong'); } return ( <div className={classes.Person}> <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p> <p>{props.children}</p> <input type="text" onChange={props.changed} value={props.name} /> </div> ) }; // **** **** export default person;
This last listing shows the final state of the Persons.js file.
import React, { Component } from 'react'; // **** this is a higher order component **** class ErrorBoundary extends Component { state = { hasError: false, errorMessage: '' } componentDidCatch = (error, info) => { this.setState({hasError: true, errorMessage: error}); } render() { if (this.state.hasError) { return <h1>{this.state.errorMessage}</h1>; } else { return this.props.children; } } } // **** **** export default ErrorBoundary;
This last listing shows the final state of the ErrorBoundary.js file.
import React, { Component } from 'react'; import classes from './App.css'; import Person from './Person/Person'; import ErrorBoundary from './ErrorBoundary/ErrorBoundary'; // **** **** class App extends Component { state = { persons: [ { id: 'asfa1', name: 'Max', age: 28 }, { id: 'vasdf1', name: 'Manu', age: 29 }, { id: 'asdf11', name: 'Stephanie', age: 26 } ], otherState: 'some other value', showPersons: false } nameChangedHandler = ( event, id ) => { const personIndex = this.state.persons.findIndex(p => { return p.id === id; // correct // return p.userID === id; // incorrect }); const person = { ...this.state.persons[personIndex] }; // const person = Object.assign({}, this.state.persons[personIndex]); // **** **** person.name = event.target.value; // correct // person.name = event.input.value; // incorrect (look at documentation for event) const persons = [...this.state.persons]; persons[personIndex] = person; this.setState( {persons: persons} ); } deletePersonHandler = (personIndex) => { // const persons = this.state.persons.slice(); const persons = [...this.state.persons]; persons.splice(personIndex, 1); this.setState({persons: persons}); } togglePersonsHandler = () => { const doesShow = this.state.showPersons; this.setState( { showPersons: !doesShow } ); } // **** **** render () { let persons = null; let btnClass = ''; if ( this.state.showPersons ) { persons = ( <div> {this.state.persons.map( (person, index) => { return <ErrorBoundary key={person.id}> <Person click={() => this.deletePersonHandler( index )} name={person.name} age={person.age} changed={( event ) => this.nameChangedHandler(event, person.id)} /> </ ErrorBoundary> })} </div> ); btnClass = classes.Red; } // **** must define classes in App.css **** const assignedClasses = []; if (this.state.persons.length <= 2) { assignedClasses.push(classes.red); // classes = ['red'] } if (this.state.persons.length <= 1) { assignedClasses.push(classes.bold); // classes = ['red', 'bold'] } if (this.state.persons.length <= 0) { assignedClasses.push(classes.underline); // classes = ['red', 'bold', 'underline'] } // ???? ???? console.log("persons: " + persons); // **** **** return ( <div className={classes.App}> <h1>Hi, I'm a React App</h1> <p className={assignedClasses.join(' ')}>This is really working!</p> <button className={btnClass} onClick={this.togglePersonsHandler}> Toggle Persons </button> {persons} </div> ); // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Does this work now?')); } } // **** **** export default App;
This last listing shows the final state of the App.js file.
The entire code for this project can be found in my GitHub repository.
If you have comments or questions regarding this, or any other post in this blog, or if you would like for me to serve of assistance with any phase in the SDLC (Software Development Life Cycle) of a project associated with a product or service, please do not hesitate and leave me a note below. If you prefer, send me a private message using the following address: john.canessa@gmail.com. I will reply as soon as possible.
Keep on reading and experimenting. It is the best way to learn, become proficient, refresh your knowledge and enhance your developer toolset!
One last thing, many thanks to all 1,520 subscribers to my blog!!!
Keep safe during the COVID-19 pandemic and help restart the world economy.
John
Twitter: @john_canessa