Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Handling errors

From: HTML5: Messaging and Communications in Depth

Video: Handling errors

There are few different types of errors you'll be concerned with in your HTML5 messaging application. Fortunately, most of these can be handled in the same way. Here we have a working copy of errors- one start.html and errors-two start.html. I've made working copies on my server, and I'm editing directly on my server. We'll just take a moment now and page through these for the benefit of those of you who need that. And here's errors-two.

Handling errors

There are few different types of errors you'll be concerned with in your HTML5 messaging application. Fortunately, most of these can be handled in the same way. Here we have a working copy of errors- one start.html and errors-two start.html. I've made working copies on my server, and I'm editing directly on my server. We'll just take a moment now and page through these for the benefit of those of you who need that. And here's errors-two.

Now the first thing we want to do is we want to go into each of these files and edit our constants, make sure those are set correctly. Here we have originTwo, which is set to the hostname of the server with working two on it, and URL two, which is the complete URL to errors-two-working.html. And we'll go into errors-two and check the same thing. And here's the line that you want be concerned with, and make sure that that has the hostname for your originOne server.

And now coming back here into errors-one, we need to add the event handler for the error function. You notice down here we have a function called windowErrorHandler, and this is the error handler, actually for both of these. We have the same function in both of these files. And so that's called windowErrorHandlers. I'm just going to put that in my copy buffer and come up here into the init function and add a handler for that. Now in this case I'm going to use an IDL handler, so I'm going to say window.onerror = and the name of that function with a semicolon.

I am going to save that. The reason I'm using an IDL listener instead of an addEventListener is that support for error handlers with addEventListeners is inconsistent amongst the different browsers. And even here on Firefox it's not completely implemented. So this works well with the IDL listener and it does not work well with the addEventListener. So I'm just going to make copy of this line, and I am going to put exactly this same line into errors-two-working.html. I'll scroll down here to the init function and paste it in right there and press Save.

So now we have the event listener installed for onerror in both of our files, and I am going to come over here to the browser and load this up. So I'm going to load up error-one- working.html on my server, and there you see the messages going back and forth exactly how we expect them to. And now we'll just start introducing some errors and see how that works. It's a really good idea to play around with errors when you're building error handlers, so that you know what to expect. So the first thing we'll do is we'll change our origin from two to three. So this is in errors-one-working.

And so when we come in here and handle message events, the first thing we do is we check if the event origin is equal to this constant and if not, we display this error message here. I am going to come back over here into the browser and reload this. And you notice we get the message, "message from untrusted origin" and it lists the origin where the message came from, which is different than what it was expecting, because here it's expecting three instead of two. So this is a message that we're sending out ourselves from this test, and so it's not really using the onerror handler. Let's go ahead and use the onerror handler now.

So I'm going to change that back, and I am going to come down here and put something nonsensical in this postMessage. I'm just going to say foo. That's not a full URL and so if for some reason you had an error like that, we'll go back into the browser and we'll bring that error up and you see we have an uncaught exception. So, this is our error handler working. You notice when we come down here to our ErrorHandler, it prints the message and the file name and the line number. And here we have the uncaught exception message and the file name and the line number right there.

So this gives us some idea of what the problem is: an invalid or illegal string was specified on line 44. And if we come back up here to line 44, we can deduce what the problem is. So I'm just going to put that back to our constant, and let's go make another error. If I come down here to line 54 and I actually call a function that's not defined--I just misspelled this function here instead of log its xlog, and so I'll press Save and we'll come back over here to the browser and we'll load that up.

And we see it says xlog is not defined, and it doesn't run the rest of the script; it just stops right there. xlog is not defined, gives us the file name and the line number on line 54. So that's exactly what we expect. On the other hand, if we introduce some error here by misspelling the word function, this will not catch the error. Why? Because this is the function where the error handler is actually installed. And so if we never get to that line, we're not going to get our error handler at all. So if I save this and bring this up and run it, you'll see that I get no error message at all.

On the other hand, I can come up here to Tools > Web Developer. This is in the Firefox browser. You have something like this in most of the browsers. Now bring up the console and if I press Reload, you'll notice that I actually get an error message. It's a typical cascading interpreter error message that doesn't really tell you what the problem is, but it gives you an idea of where to look. It says it's missing a semicolon around line 51. And in fact what it is, is it's got an unrecognized keyword. And so we take out that x, and we save it, and we come back in here, and we reload, and we see that everything runs as we expected to.

And I can take down that web developer console. And so now that we have our error handler working, we have a complete set of tools for HTML5 messaging, and we can look at a more interactive example in the next chapter.

Show transcript

This video is part of

Image for HTML5: Messaging and Communications in Depth
HTML5: Messaging and Communications in Depth

11 video lessons · 5795 viewers

Bill Weinman
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Messaging and Communications in Depth.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.