1. Introduction

The goal of this tutorial is to provide an understanding of how to handle errors and secure your web applications. By the end of this guide, you should have a strong grasp of how to prevent, detect, and handle errors in your code, and how to protect your web application from common security threats.

You will learn:
- Basic and advanced error handling techniques
- Common security threats and how to mitigate them
- Best practices for web application security

Prerequisites:
- Basic understanding of web development
- Familiarity with HTML, CSS, and JavaScript

2. Step-by-Step Guide

Error Handling

Errors are inevitable in any program. The key is to handle them gracefully. JavaScript provides try, catch, and finally blocks to handle errors.

try {
    // Code that may throw an error
} catch (error) {
    // Code to handle the error
} finally {
    // Code that will run whether an error was thrown or not
}

Secure Coding

Web application security involves protecting websites and online services against different security threats that exploit vulnerabilities in an application’s code.

Some of the best practices for secure coding are:
- Validate input: Ensure data is valid before using it.
- Use secure functions: Avoid functions that are known to have security issues.
- Encrypt sensitive data: Protect sensitive data like passwords and credit card numbers by encrypting it.

3. Code Examples

Error Handling Example

try {
    let x = nonExistentVariable; // This will throw an error
} catch (error) {
    console.log('An error occurred:', error);
} finally {
    console.log('Cleaning up...');
}

In the above example, an error is thrown when we try to use a non-existent variable. This error is then caught and logged to the console. The 'Cleaning up...' message will be logged whether an error occurs or not.

Secure Coding Example

// Always validate user input
let userInput = document.querySelector('#userInput').value;

if (userInput.length > 0) {
    // Process the input
} else {
    console.log('Invalid input');
}

// Always encrypt sensitive data
let password = 'myPassword';
let encryptedPassword = btoa(password); // Simple encryption using base64 encoding

In the example above, user input is validated before it's processed. Also, sensitive data (the password in this case) is encrypted before it's stored.

4. Summary

We've discussed the basics of error handling and some best practices for secure coding. Remember to always validate your input and encrypt sensitive data.

For further learning, consider studying more about secure functions, and how to protect against specific types of attacks like SQL Injection, XSS, etc.

5. Practice Exercises

1. Exercise 1: Write a JavaScript function that throws an error if the input is not a number. Catch and log the error.
2. Exercise 2: Write a JavaScript function that encrypts a given string using the btoa() function.

Solutions:

1. Solution to Exercise 1:

function checkIfNumber(input) {
    try {
        if (isNaN(input)) {
            throw new Error('Input is not a number');
        }
    } catch (error) {
        console.log('An error occurred:', error);
    }
}

checkIfNumber('test'); // Logs: An error occurred: Error: Input is not a number

1. Solution to Exercise 2:

function encryptString(input) {
    return btoa(input);
}

console.log(encryptString('myPassword')); // Logs: bXlQYXNzd29yZA==

Keep practicing and exploring more about error handling and secure coding. The more you practice, the better you'll get!