DEV Community: Lauren Slayman

Manually Debugging Common Flask Errors

Lauren Slayman — Sun, 11 Jun 2023 23:29:56 +0000

When it comes to testing and debugging while building Flask applications, there are luckily a ton of tools and frameworks that can be utilized — some are even already built-in! However, as many programmers already know, it can be far too easy to rely solely on these methods, leaving one in the weeds when encountering errors that feel all but impossible to decode. In fact, there are a several reasons why knowing how to debug manually in Flask is not only an important skill but a truly invaluable habit to maintain; here are a few examples:

It provides developers far more flexibility and control over the debugging process. You’re able to zone in more closely on the root cause of the issue and tailor your techniques (i.e. print statements, logs, or breakpoints) to fit the situation and/or your particular goals.
There are few methods for deepening your understanding of your codebase and its execution flow that are more valuable than being able to break down your errors into bite-size pieces and truly unravel the source of the bugs. As irritating as it can be to spend portions of your worktime untangling errors instead of actively building, when you’re finally able to move past the error thrown your way with a more concrete understanding of what led to the error and/or how intimately it affected other portions of your code, your time was still genuinely well spent!
Because it doesn’t require any additional tools or frameworks and it can, manually debugging is usually non-invasive. Further, it can be completely directly within the codebase without the added weight of external dependencies.
In addition to simply being a good habit, several manual debugging techniques can applied across other projects and frameworks, making it an extremely portable skill.
While the process of debugging can often feel time consuming, manual debugging is exceedingly quick and simple — it doesn’t rely on extensive configuration nor setup time for additional debugging tools or libraries. This is particularly beneficial when working on projects requiring a quick turnaround.

Now, there are obviously countless situations in which debugging tools, frameworks, or integrated development environments (IDEs, for short) would be ideal — they can provide advanced features, automated breakpoints, and real-time inspections that can make the debugging process feel simpler and more efficient, especially when dealing with large codebases, so the point of this essay isn’t to devalue common debugging tools and frameworks, simply to emphasize why knowing how to (and frequently practicing) manually debug errors is such an important skill and habit.

To continue, here are some common Flask errors and how to debug them, step-by-step:

First, here’s a code snippet of a simple Flask application with a single route defined for the root URL ('/') and the route handler will return a simple greeting:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the home page!'

if __name__ == '__main__':
    app.run(debug=True)

Let’s see what happens when we try to expand upon it.

404 Not Found

What it means: The requested route or URL does not exist within the Flask application. See the example below:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the home page!'

@app.route('/about')
def about():
    return 'This is the about page.'

if __name__ == '__main__':
    app.run(debug=True)

Notice that we wrote in a new route, '/about', but there is not a corresponding route handler, so if you were to try to access the URL in a tool like cURL or Postman, you’d likely encounter the following console error:

404 Not Found: The requested URL was not found on the server. If you entered the URL manually, please check your spelling and try again.

First, review the code and ensure that the correct route has been defined
Then, check for any typos or syntax errors within the route definition
Next, verify that the Flask server has been restarted after any code changes have been made
If confident that the code is correct, double-check the URL to ensure it matches the precise route definition
If the issue persists, you could add print statements and/or logging message in the route handlers (this will trace the execution flow and ensure that the handler function is being called), like such:

@app.route('/about')
def about():
    print('Inside the about route handler')
    return 'This is the about page.'

The console output will help you determine if the route handler is being reached or if the issue may lie elsewhere.

Further, you could set the Flask debugger setting to 'debug=True' and intentionally trigger an exception. For instance, the following line could be added inside the ‘about’ route handler:

raise Exception('Testing 404 error handling')

405 Method Not Allowed

What it means: The requested HTTP method if not allowed for the specified route in the Flask application

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the home page!'

@app.route('/about', methods=['GET'])
def about():
    return 'This is the about page.'

if __name__ == '__main__':
    app.run(debug=True)

You’ll notice that the route for the '/about' page above, is only configured for ‘GET’ requests within the ‘methods’ parameter. Let’s assume you were trying to make a ‘POST’ request, you’d come up against the following error:

405 Method Not Allowed: The method is not allowed for the requested URL.

To troubleshoot, you’d first want to double check that the allowed methods specified within the route decorator’s ‘methods’ parameter are accurate within the code
Then, double check that the HTTP method used in the cURL or Postman request matches the allowed methods written within the code
- Likewise, ensure that the code wasn’t intentionally restricted to specific HTTP methods and if it was, that the methods match the intended operation
If the issue persists, add print statements or logging messages in the route handlers, as specified with the 404 error above:

@app.route('/about', methods=['GET'])
def about():
    print('Inside the about route handler')
    return 'This is the about page.'

Additionally, you can inspect the request object ('request.method') within the route handler to verify the actual HTTP method being used.

500 Internal Server Error

What it means: An unhandled exception or error has occurred during the execution of the Flask application

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the home page!'

@app.route('/about')
def about():
    # Simulating a server error by accessing an undefined variable
    result = 10 / 0
    return 'This is the about page.'

if __name__ == '__main__':
    app.run(debug=True)

Admittedly, the snippet above will automatically induce a server error in the '/about' route by dividing a number by zero. However, once again by using cURL or Postman, we’ll try to debug this error, step-by-step:

First, ensure you’re trying to access the correct route within your HTTP processing tool. If incorrect, you’re likely to encounter the following error, meaning an unhandled exception occurred in the execution process:

500 Internal Server Error: Internal Server Error

The console output should also display a traceback with more detailed information about the error.

ZeroDivisionError: division by zero

This error can be resolved by removing or resolving the problematic line. For this specific case, it can can replaced with a valid calculation or simply removed altogether:

This error can be resolved by removing or resolving the problematic line. For this specific case, it can can replaced with a valid calculation or simply removed altogether:

If the traceback doesn’t help you identify the error, consider adding print statements with the handler, as seen in the earlier error examples.
Finally, restart the Flask server and retry accessing the route-in-question to confirm whether the error has been resolved

Admittedly, we’ve only begun to scratch the surface of errors one could encounter when writing and troubleshooting code in Flask, but I’m hopeful this guide will aid other novice programmers in troubleshooting some the most commonly encountered errors within Flask, as it’s certainly a habit I’ve been trying to better ingrain within my own code-writing.

Python & SQL: A Match Made in Data Manipulation Heaven

Lauren Slayman — Fri, 19 May 2023 23:51:02 +0000

There are several reasons that Python’s popularity has taken off in recent years: it’s simple, readable, and exceptionally versatile. While it wasn’t necessarily created with data management in mind, its extensive library and colossal ecosystem of third-party packages and frameworks have made it an invaluable asset when it comes to data analysis, manipulation and visualization.

SQL, on the other hand, is already operating within its wheelhouse when utilized for aforementioned tasks, as was intended when designed by IBM in the early 1970s. While its early versions focused almost solely on data querying and retrieval, over time it evolved and expanded into the robust database management and manipulation system it’s known for today. However, just because databases are its specialty doesn’t mean it’s without its weaknesses: it isn’t particularly adept at working with external databases nor producing the most effective data visualization, for instance — which is where Python can complement SQL beautifully.

Python, on the other hand, falls rather short when compared to SQL’s ability to manage large datasets and perform complex operations like data retrieval, filtering, indexing, aggregation, etc. Frankly, one could spend days comparing and contrasting the two languages’ strengths and weaknesses which seems like a task both futile and frivolous when the two can simply be paired together to accomplish virtually any and all data-related tasks a programmer (or business) could need.

In fact, by pairing one of Python’s libraries (like SQLAlchemy or psycopg2, for instance) with SQL’s querying abilities, users are able to write SQL statements within Python code, execute them, and retrieve and process Python objects as results with an ease and grace that I would have dreamt of having at my disposal when previously working in non-profit data evaluation.

Further, the two languages build data pipelines and perform Extract, Transform, Load (ETL) processes beautifully. While Python can take the helm on extracting data from a multitude of sources, perform complex transformations and prepare such data for loading into a database, SQL queries are able to perform further transformations within the databases themselves, which optimizes performance while reducing the net back-and-forth data transfers can require.

Finally, integrating SQL’s data retrieval capabilities with Python’s rich visualization libraries allows one to build informative and visually-appealing charts, plots and reports like never before. There are several Python libraries, like Matplotlib, Plotly or Bokeh that serve as supremely effective tools to chart, plot or visualize data, which can then be paired with other libraries that can provide customization options for colors, labels, axis formatting and other visual elements that can provide an exceptionally appealing visual presentation of data. Further, these visualizations can be exported in several different formats — including image or interactive files — which can then be shared with other and/or embedded in web applications or reports. Other Python frameworks like Flask or Django are indispensable when it comes to building interactive web applications to drive home the importance of particular data statistics.

Ultimately, by pairing Python’s strengths in analytics, external data integrations and data visualization capabilities with SQL’s exceptionally efficient database operations, integrity and scalability both languages are able to overcome their own inherent weaknesses to create impactful, and insightful representations of data that all stakeholders are bound to appreciate when making data-driven decisions.

useEffect(): Making Side Effects More Manageable in React Apps Since 2019

Lauren Slayman — Sat, 29 Apr 2023 02:26:46 +0000

Imagine this: you're building a React app for the first time -- you're drafting up a wireframe and trying to envision how all of the pages and components will fit together and you realize some of them will need to pull a little more weight than others. While some only need to render their particular components, others may require a little more functionality, maybe they're fetching data, updating the DOM or managing a timer; basically, if the component is doing anything other than simply returning a bit of JSX, it's performing side effects. Luckily, React has special hook for these tasks: useEffect().

For demonstration purposes, let's build a component that counts clicks.

To start, you'll call useEffect() in almost the same manner as calling state at the top the of the component:

import React, { useState, useEffect } from 'react';

From there, we'll build out the rest of the component, directing it exactly what we want it to produce:

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This function will be called after every render
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In the example above, our component is displaying a count as well as a button. When clicked, the button's state is incremented via 'count' and the useEffect() hook is updating the document title with the current count each time it renders.

As you can see, when calling useEffect(), it takes a function as its primary argument (which is being called after each render), and updates the 'document.title' property accordingly.

Notice that there are no additional arguments to the useEffect() hook, so it will be called after every render. If we want it to be called only when the 'count' variable changes, we could simply pass it through as the second argument, like so:

useEffect(() => {
   document.title = `You clicked ${count} times!`;
}, [count]);

This is known as a dependency, which prevents the code from running an endless loop of arguments. And while we have the option to pass the dependencies through arrays like we did above, we can also pass empty arrays through our functions as second arguments, as demonstrated below:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // This function will be called once on component mount
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );

By utilizing the empty array as the second argument, we're telling our component that we only want the side effect to run the first time our component renders, once again preventing an endless loop.

Not sure when or how to pass dependencies through the second argument of useEffect? Here's a short guide!

useEffect(() => {}): No dependencies! This means the side effect will run every time the component renders.
useEffect(() => {}, []): Once again, there's that empty array! This tells our component that we only want the side effect to run the first time it renders.
useEffect(() => {}, [variable1, variable2]): This one may look new -- it's a dependencies array with elements and it communicates that the side effect should run whenever the variable(s) change.

Although this is just a brief overview, the useEffect() hook is an invaluable took when it comes to making components more dynamic and interactive, as it allows them to respond to changes in state, user interactions, or even external events. By using this hook to manage side effects, your components' functionality can be optimized to update in real time, interact with external data sources, manage animations and transitions and so much more! I hope you'll practice utilizing this method in your React apps to experience just how powerful individual components can become. Happy coding!

"Say what, now?" Breaking Down JavaScript Building Blocks for Algorithmically-Challenged Thinkers

Lauren Slayman — Fri, 07 Apr 2023 19:26:21 +0000

Reader, if you're anything like me, you probably excel at logical reasoning, but really struggle to translate those concepts into procedural steps. If you're trying to learn to code, but are experiencing challenges turning conceptual why's into their procedural how's, I'm hoping you'll find this breakdown of JavaScript's three main building blocks: variables, functions, and scope to be of use.

JS Variables

A variable is simply the named storage location for a piece of data.

💡 When naming variables, avoid using reserved words or future reserved words.

Once named, variables then need to be initialized, which requires two steps:

Declaring (using let, const, or var)
Assigning (this is the data to the right of the =) a. These two steps can be completed in a single line of code, but there will be times when it makes more sense to declare the variable without immediately assigning it a value.

When to use let, const, or var:

var can lead to scope-related bugs, so it is almost never used.

const is the go-to option as its variables can neither be redeclared nor reassigned

Note: values must be assigned immediately when using const to declare variables!

let should be used when you know the variable’s value will change (i.e. a counter)

💡 Best practice: always start by declaring variables with const! If you later realize that its value will need to change over time, go back and adjust it to let.

Functions in JS

A function is essentially a procedure — you’re telling JS to perform a task by taking an input and returning an output.

A function declaration (aka function definition or statement) is made up of the function keyword followed by:

The function name
The function parameters (enclosed in parentheses & separated by commas)
- Parameters are locally-scoped variables that are usable ("scoped") to inside the function. They’re defined inside the function’s declarations ().
The JS statements which define the function (enclosed in curly brackets)

function funcName(parameter){
    return whatYouWantFunctionToOutput;
    }

Declaring a function = giving it a name & telling it what to do, it does not execute it.

A function has to be called to perform the actions with the indicated parameter, like such:

funcName(parameterArgument);

When called, functions must be in scope; however, function declarations can also be hoisted (appearing below the call), like such:

funcName(parameterArgument);

function funcName(parameter) {
    return whatYouWantFunctionToOutput;
    }

Function Return Values

Return values are simply values that a function returns when completing its task.

The values being returned could be one of the following:

string
number
expression (such as 1 + 1)

When a return is reached in the code, the return will be executed, but if there is any code after that point, that code will not be executed.

Arrow Functions

Arrow functions allow users to write shorter function syntax:

let myFunction = (a, b) => a * b;

For example, this is standard syntax:

hello = function() {
    return "Hello World!";
}

Whereas this is the same function using the arrow format:

hello = () => {
    return "Hello World!";
}

Further, if the function has only one statement and the statement returns a value, the brackets and the return keyword can be removed:

hello = () => "Hello World!";

If the function has parameters, they’ll be passed inside the parentheses:

hello = (val) => "Hello" + val;

If there’s only one parameter, the parentheses can be removed entirely:

hello = val => "Hello" + val;

Callback Functions

A callback is a function passed as an argument to another function, to be “called back” at a later time (as opposed to being executed immediately).

For example:

//function
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
    }

//callback function
function callMe() {
    console.log('I am a callback function');
    }
//passing function as an argument
greet('Lauren', callMe);

//returned:
>>"Hi Lauren I am a callback function"

Scope

In JS, scope refers to the current context of the code; wherein, which variables and functions can be accessed.

Note: where you define a variable or function in JS determines where it can be accessed later on!

For instance, if a variable is defined within a function, it cannot be accessed outside of that function.

There are several types of scope in JS:

Global Scope

Global scope means that a variable or function is available (and therefore accessible) anywhere in the code or program.

//Global Scoped Variable
const global_variable = "Flatiron School"

//First function
function first_func() {
    return global_variable;
    }
//Second function
function second_func() {
    return first_func();
    }

console.log(second_func());
//output = Flatiron School

Local Scope

Local scope means that a variable or function is only available within its code block. Local scope is created with curly brackets {}.

Scope Chain

Scope chain is the process by which JS determines which variables & objects are referenceable based off their location in the code.

Lexical Scope

Lexical scope means that a variable’s scope is determined by its position in the code (namely, they must be located within the same scope as their parent variables).

As someone with a liberal arts background who has recently elected to step into a new realm of education and career-building, I've struggled greatly with internally translating coding vocabulary into layman's terms to better understand JavaScript's language and building principles. If, reader, you've found yourself with the same struggles, I sincerely hope this breakdown has been of positive use.

A quick note about sources: the primary sources utilized for this post came from lectures and curriculum provided by Flatiron School. Any external sources have been linked throughout.