You are a learner. You recently started learning some technology-related topic. You just watched a Youtube video about some concept. You are excited about it and want to try it on your own laptop. Lucky for you, the video’s owner has given you the exact set of steps you need to follow to accomplish it.

You execute one step after another, pausing the video in between so that you can get the feeling of a ‘do-it-along-with-the-expert’. All is well, so far!

Suddenly, as you follow a step, you see an unexpected error printed out on your console. It looks like this:

element click intercepted: Element <div class="bubble-1aWzr4a1 active-92fZrJLX bubble-1zb_ZDhw">...</div> is not clickable at point (641, 336). Other element would receive the click: <button aria-label="Close" type="button" class="close-button-3pxNR2uR closeButton-1H9ESDGF">...</button>

Or, something like this:

Uncaught TypeError: Cannot read property 'props' of undefined

Or, even scarier one like this: 😈😈😈

Caught exception: System.AggregateException
Message: One or more errors occurred.
   at System.Threading.Tasks.Task.Wait(Int32 millisecondsTimeout, CancellationToken cancellationToken)
   at Laserfiche.SignalR.Client.LFHubProxy.Connect()
   at Laserfiche.SignalR.Client.Factories.LFHubProxyFactory.Create(HubEndPoint hubEndPoint)
   at Laserfiche.PushNotificationService.Master.Services.RegisterService.Register(PushServiceRegisterRequest registerData)
   at Laserfiche.PushNotificationService.Master.PushNotificationService.Register(PushServiceRegisterRequest registerData)
   at SyncInvokeRegister(Object , Object[] , Object[] )
   at System.ServiceModel.Dispatcher.SyncMethodInvoker.Invoke(Object instance, Object[] inputs, Object[]& outputs)
   at System.ServiceModel.Dispatcher.DispatchOperationRuntime.InvokeBegin(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage5(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage41(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage4(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage31(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage3(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage2(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage11(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.ImmutableDispatchRuntime.ProcessMessage1(MessageRpc& rpc)
   at System.ServiceModel.Dispatcher.MessageRpc.Process(Boolean isOperationContextSet)

Inner exception: System.Net.Http.HttpRequestException
Message: An error occurred while sending the request.

Inner exception: System.Net.WebException
Message: The underlying connection was closed: An unexpected error occurred on a send.
   at System.Net.HttpWebRequest.EndGetResponse(IAsyncResult asyncResult)
   at System.Net.Http.HttpClientHandler.GetResponseCallback(IAsyncResult ar)

Inner exception: System.IO.IOException
Message: Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host.
   at System.Net.TlsStream.EndWrite(IAsyncResult asyncResult)
   at System.Net.PooledStream.EndWrite(IAsyncResult asyncResult)
   at System.Net.ConnectStream.WriteHeadersCallback(IAsyncResult ar)

Inner exception: System.Net.Sockets.SocketException
Message: An existing connection was forcibly closed by the remote host
   at System.Net.Sockets.Socket.EndReceive(IAsyncResult asyncResult)
   at System.Net.Sockets.NetworkStream.EndRead(IAsyncResult asyncResult)

You feel that uncomfortable knot in your stomach. ‘Oh! What, in the name of Bill Gates, does this error mean? Oh! Did I mess something up? Oh! How do I solve this?’, your brain races with thoughts of anxiety.

If you can relate to the above situation, this blog post is for you. In this post, I will explain my way of dealing with unexpected error messages.

Mindset Hacks for Troubleshooting

  1. You are not expected to understand everything that is printed in the error message. In fact, no one, not even the hard-core techies, understands each and everything printed in the console.
  2. The goal here is to find help from the internet, not to solve it all by yourselves. Again, everyone takes help from the internet to debug/troubleshoot errors. This is not a university examination, where no help is allowed 😀
  3. Sometimes, it takes time to solve issues. It is ok to take time, particularly while learning.
  4. More errors you solve by taking help from the internet, you will get better at this and take less time than someone who is a beginner.
  5. Even when you do all the right things, sometimes, you may not solve the problem. This happens to all of us.
  6. A problem that appears unsolvable one moment, can appear very simple after you take a walk or after a night’s sleep. If things don’t seem to work, taking a break and actively diverting yourself from the problem can help finding a new perspective.

Easier said than done, eh? ✌️

Now, let us dive into a few ways of making troubleshooting easy.

Method 1 - Google already available solutions

Step 1 - Try to find at least one sentence or phrase that you can understand, even vaguely. For example, if you are looking at the following error:

element click intercepted: Element <div class="bubble-1aWzr4a1 active-92fZrJLX bubble-1zb_ZDhw">...</div> is not clickable at point (641, 336). Other element would receive the click: <button aria-label="Close" type="button" class="close-button-3pxNR2uR closeButton-1H9ESDGF">...</button>

One sentence that sounds like plain english to me is this: element click intercepted or is not clickable at point or Other element would receive the click.

Step 2 - Copy that entire line, paste in Google and hit search.

Step 3 - Mostly, the first result would be a StackOverflow or some forum post. In that post, someone would have asked a question, most likely, similar to your problem. Read the accepted answer and resolve as suggested there.

Method 2 - Look for familiar things in the log

In the error log, look for familiar elements like file names, variable names, etc. (particularly the ones that you created). You will find error logs mentioning filenames/ class names like the one below:

TypeError: Cannot read property 'map' of undefined
    at App (App.js:9)
    at renderWithHooks (react-dom.development.js:10021)
    at mountIndeterminateComponent (react-dom.development.js:12143)
    at beginWork (react-dom.development.js:12942)
    at HTMLUnknownElement.callCallback (react-dom.development.js:2746)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:2770)
    at invokeGuardedCallback (react-dom.development.js:2804)
    at beginWork$1 (react-dom.development.js:16114)
    at performUnitOfWork (react-dom.development.js:15339)
    at workLoopSync (react-dom.development.js:15293)
    at renderRootSync (react-dom.development.js:15268)
    at performSyncWorkOnRoot (react-dom.development.js:15008)
    at scheduleUpdateOnFiber (react-dom.development.js:14770)

In the above log, you can see that every line mentions one filename (like App.js) and a line number in that file (9 in this case). Also, I saw the error message that loosely translates to ‘You are calling a function on an undefined variable’.

Here, App.js is a file that I wrote. Hence, I will go and investigate the line number 9 in App.js.

There I may find that I am calling a function map() on a variable, which does not have a value. So, I can see how to make sure the value is populated before calling the map function.

This was possible because I was able to pin-point the file name and the line number where error happened.

Method 3 - Analyze the Stack Trace

If the above 2 methods don’t help you, you might need to learn how to read the stack trace.

Don’t worry! this is not some complicated terminology. This blog post explains everything about Stack Traces in plain english, along with tips on how to find solutions.

Method 4 - Ask for help

If all the above methods did not help, why not post a question on Stack Overflow or any forums? Even Tech Coach Circle’s forums are a good candidate. Techie community is largely helpful and take pride in helping others 🙂

Method 5 - Disengage to engage again

When nothing worked, it makes sense to disengage from the problem. Like I said before, many problems can be solved with a fresh perspective gained by sleep or diversion.

These are the 5 things I do to avoid panic and solve unexpected errors. So far, I have survived and you too will :). Happy troubleshooting!

Hey 👋 liked the stuff here?

Subscribe to updates from Tech Coach Circle here.