Categories
Software Development Web Development

Symfony 5+ error logging handlers explained

This will be a super long article, this subject is way more complex than it originally sounds. As always, I’ll be updating this soon with more info and possibly more examples as I figure it out better.

First off, you are not limited to just one logger in Symfony. However, the most popular is Monolog and Symfony has built in support making it easier to implement. So that is what I cover here.

One thing you might want to use a logger for is logging specific exceptions or errors to specific locations. You may also just want to log some value in your code for debugging purposes to see what is happening or being sent to a particular method/function. These are good use cases for logging.

While most errors/exceptions already display with lots of info in the browser, you may be like me and want certain things logged so you can review the entire pattern over a period of time.

The steps required to log sound sort of simple:

  1. Install the logger
  2. Configure the logger, decide how you want it to actually work. You don’t have to configure it with yaml. Doing so makes it so that you can autowire loggers instead of having to create a new object passing values in each time which will usually be the same values.
  3. Get the logger into your class some how( this can vary depending on whether it is a controller or a service/class)
  4. Use the logger to log something like an exception.

Installing

Your project might already have monolog logger installed since Symfony uses it by default to log everything. It doesn’t matter. Running the line below won’t hurt even if it is installed already.

To install the Monolog Logger you simply open your terminal, navigate to the root of your project and type the following :

composer require symfony/monolog-bundle

That is all. Now the monolog bundle is installed and you can use it after you configure it. And that is where the fun and confusion begin. Symfony uses Monolog so it may already be installed  depending on how you created your project.

Handlers

First decide what types of loggers you want to use. You will probably see people using the stream type logger most often. This is really generic and is the default. I don’t like the stream handler because it just keeps growing infinitely.

I prefer storing different logs to different places. You can even store the logs in a database if you want. The good news is you can use more than one type of logger, and configure them however you want.

First off, here is a long list of handler types you can use with Monolog. This is going to be SUPER LONG. I’d rather just list it here than link to a file. This list is taken from the code on github

* Possible handler types and related configurations (brackets indicate optional params):
 *
 * - service:
 *   - id
 *
 * - stream:
 *   - path: string
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [file_permission]: int|null, defaults to null (0644)
 *   - [use_locking]: bool, defaults to false
 *
 * - console:
 *   - [verbosity_levels]: level => verbosity configuration
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [console_formatter_options]: array
 *
 * - firephp:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - browser_console:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - gelf:
 *   - publisher: {id: ...} or {hostname: ..., port: ..., chunk_size: ...}
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - chromephp:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - rotating_file:
 *   - path: string
 *   - [max_files]: files to keep, defaults to zero (infinite)
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [file_permission]: string|null, defaults to null
 *   - [use_locking]: bool, defaults to false
 *   - [filename_format]: string, defaults to '{filename}-{date}'
 *   - [date_format]: string, defaults to 'Y-m-d'
 *
 * - mongo:
 *   - mongo:
 *      - id: optional if host is given
 *      - host: database host name, optional if id is given
 *      - [port]: defaults to 27017
 *      - [user]: database user name
 *      - pass: mandatory only if user is present
 *      - [database]: defaults to monolog
 *      - [collection]: defaults to logs
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - elasticsearch:
 *   - elasticsearch:
 *      - id: optional if host is given
 *      - host: elastic search host name. Do not prepend with http(s)://
 *      - [port]: defaults to 9200
 *      - [transport]: transport protocol (http by default)
 *      - [user]: elastic search user name
 *      - [password]: elastic search user password
 *   - [index]: index name, defaults to monolog
 *   - [document_type]: document_type, defaults to logs
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - redis:
 *   - redis:
 *      - id: optional if host is given
 *      - host: 127.0.0.1
 *      - password: null
 *      - port: 6379
 *      - database: 0
 *      - key_name: monolog_redis
 *
 * - predis:
 *   - redis:
 *      - id: optional if host is given
 *      - host: tcp://10.0.0.1:6379
 *      - key_name: monolog_redis
 *
 * - fingers_crossed:
 *   - handler: the wrapped handler's name
 *   - [action_level|activation_strategy]: minimum level or service id to activate the handler, defaults to WARNING
 *   - [excluded_404s]: if set, the strategy will be changed to one that excludes 404s coming from URLs matching any of those patterns
 *   - [excluded_http_codes]: if set, the strategy will be changed to one that excludes specific HTTP codes (requires Symfony Monolog bridge 4.1+)
 *   - [buffer_size]: defaults to 0 (unlimited)
 *   - [stop_buffering]: bool to disable buffering once the handler has been activated, defaults to true
 *   - [passthru_level]: level name or int value for messages to always flush, disabled by default
 *   - [bubble]: bool, defaults to true
 *
 * - filter:
 *   - handler: the wrapped handler's name
 *   - [accepted_levels]: list of levels to accept
 *   - [min_level]: minimum level to accept (only used if accepted_levels not specified)
 *   - [max_level]: maximum level to accept (only used if accepted_levels not specified)
 *   - [bubble]: bool, defaults to true
 *
 * - buffer:
 *   - handler: the wrapped handler's name
 *   - [buffer_size]: defaults to 0 (unlimited)
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [flush_on_overflow]: bool, defaults to false
 *
 * - deduplication:
 *   - handler: the wrapped handler's name
 *   - [store]: The file/path where the deduplication log should be kept, defaults to %kernel.cache_dir%/monolog_dedup_*
 *   - [deduplication_level]: The minimum logging level for log records to be looked at for deduplication purposes, defaults to ERROR
 *   - [time]: The period (in seconds) during which duplicate entries should be suppressed after a given log is sent through, defaults to 60
 *   - [bubble]: bool, defaults to true
 *
 * - group:
 *   - members: the wrapped handlers by name
 *   - [bubble]: bool, defaults to true
 *
 * - whatfailuregroup:
 *   - members: the wrapped handlers by name
 *   - [bubble]: bool, defaults to true
 *
 * - syslog:
 *   - ident: string
 *   - [facility]: defaults to 'user', use any of the LOG_* facility constant but without LOG_ prefix, e.g. user for LOG_USER
 *   - [logopts]: defaults to LOG_PID
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - syslogudp:
 *   - host: syslogd host name
 *   - [port]: defaults to 514
 *   - [facility]: defaults to 'user', use any of the LOG_* facility constant but without LOG_ prefix, e.g. user for LOG_USER
 *   - [logopts]: defaults to LOG_PID
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [ident]: string, defaults to
 *
 * - swift_mailer:
 *   - from_email: optional if email_prototype is given
 *   - to_email: optional if email_prototype is given
 *   - subject: optional if email_prototype is given
 *   - [email_prototype]: service id of a message, defaults to a default message with the three fields above
 *   - [content_type]: optional if email_prototype is given, defaults to text/plain
 *   - [mailer]: mailer service, defaults to mailer
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [lazy]: use service lazy loading, bool, defaults to true
 *
 * - native_mailer:
 *   - from_email: string
 *   - to_email: string
 *   - subject: string
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [headers]: optional array containing additional headers: ['Foo: Bar', '...']
 *
 * - symfony_mailer:
 *   - from_email: optional if email_prototype is given
 *   - to_email: optional if email_prototype is given
 *   - subject: optional if email_prototype is given
 *   - [email_prototype]: service id of a message, defaults to a default message with the three fields above
 *   - [mailer]: mailer service id, defaults to mailer.mailer
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - socket:
 *   - connection_string: string
 *   - [timeout]: float
 *   - [connection_timeout]: float
 *   - [persistent]: bool
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - pushover:
 *   - token: pushover api token
 *   - user: user id or array of ids
 *   - [title]: optional title for messages, defaults to the server hostname
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [timeout]: float
 *   - [connection_timeout]: float
 *
 * - raven / sentry:
 *   - dsn: connection string
 *   - client_id: Raven client custom service id (optional)
 *   - [release]: release number of the application that will be attached to logs, defaults to null
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [auto_log_stacks]: bool, defaults to false
 *   - [environment]: string, default to null (no env specified)
 *
 * - sentry:
 *   - hub_id: Sentry hub custom service id (optional)
 *
 * - newrelic:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [app_name]: new relic app name, default null
 *
 * - hipchat:
 *   - token: hipchat api token
 *   - room: room id or name
 *   - [notify]: defaults to false
 *   - [nickname]: defaults to Monolog
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [use_ssl]: bool, defaults to true
 *   - [message_format]: text or html, defaults to text
 *   - [host]: defaults to "api.hipchat.com"
 *   - [api_version]: defaults to "v1"
 *   - [timeout]: float
 *   - [connection_timeout]: float
 *
 * - slack:
 *   - token: slack api token
 *   - channel: channel name (with starting #)
 *   - [bot_name]: defaults to Monolog
 *   - [icon_emoji]: defaults to null
 *   - [use_attachment]: bool, defaults to true
 *   - [use_short_attachment]: bool, defaults to false
 *   - [include_extra]: bool, defaults to false
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [timeout]: float
 *   - [connection_timeout]: float
 *
 * - slackwebhook:
 *   - webhook_url: slack webhook URL
 *   - channel: channel name (with starting #)
 *   - [bot_name]: defaults to Monolog
 *   - [icon_emoji]: defaults to null
 *   - [use_attachment]: bool, defaults to true
 *   - [use_short_attachment]: bool, defaults to false
 *   - [include_extra]: bool, defaults to false
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - slackbot:
 *   - team: slack team slug
 *   - token: slackbot token
 *   - channel: channel name (with starting #)
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - cube:
 *   - url: http/udp url to the cube server
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - amqp:
 *   - exchange: service id of an AMQPExchange
 *   - [exchange_name]: string, defaults to log
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - error_log:
 *   - [message_type]: int 0 or 4, defaults to 0
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - null:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - test:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - debug:
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - loggly:
 *   - token: loggly api token
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [tags]: tag names
 *
 * - logentries:
 *   - token: logentries api token
 *   - [use_ssl]: whether or not SSL encryption should be used, defaults to true
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *   - [timeout]: float
 *   - [connection_timeout]: float
 *
 * - insightops:
 *   - token: Log token supplied by InsightOps
 *   - region: Region where InsightOps account is hosted. Could be 'us' or 'eu'. Defaults to 'us'
 *   - [use_ssl]: whether or not SSL encryption should be used, defaults to true
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - flowdock:
 *   - token: flowdock api token
 *   - source: human readable identifier of the application
 *   - from_email: email address of the message sender
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - rollbar:
 *   - id: RollbarNotifier service (mandatory if token is not provided)
 *   - token: rollbar api token (skip if you provide a RollbarNotifier service id)
 *   - [config]: config values from https://github.com/rollbar/rollbar-php#configuration-reference
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * - server_log:
 *   - host: server log host. ex: 127.0.0.1:9911
 *   - [level]: level name or int value, defaults to DEBUG
 *   - [bubble]: bool, defaults to true
 *
 * All handlers can also be marked with `nested: true` to make sure they are never added explicitly to the stack
 *
 * @author Jordi Boggiano <j.boggiano@seld.be>
 * @author Christophe Coevoet <stof@notk.org>

That is a lot. Some are obvious, others you will need to google and figure out.

You can get as wild and creative as you want though.

Config location is everything

Where you place your configuration is very important. A little more hint here.

If you want to log just during Development you put the configuration inside the dev folder. /app/config/packages/dev/monolog.yaml

If you want to log only during production you put the configuration in the prod folder. /app/config/packages/prod/monolog.yaml

If you want to log in all environments you place the configuration in the main configuration folder. /app/config/packages/monolog.yaml

So if you want a specific logger that logs to a specific file to be available in all environments define it in the “packages” folder.

It isn’t too bad once you figure it out.

Here is the official documentation on how configuration works. Read it if you need more information.

An example configuration

Before getting too much further lets look at the default file I have for the configuration of monolog in the development environment.

#file name -> /config/packages/dev/monolog.yaml
monolog:
    handlers:
        main:
            type: rotating_file
            max_files: 3
            path: "%kernel.logs_dir%/%kernel.environment%.log"
            #path: php://stderr
            level: debug
            channels: ["!event"]
        # uncomment to get logging in your browser
        # you may have to allow bigger header sizes in your Web server configuration
        #firephp:
        #    type: firephp
        #    level: info
        #chromephp:
        #    type: chromephp
        #    level: info
        console:
            type: console
            process_psr_3_messages: false
            channels: ["!event", "!doctrine", "!console"]

Yours may differ, I have probably made changes to this and forgotten at this point or some changes in the Symfony code base may have happened.

After the word handlers you list each handler one tab level in.  Each handler gets it’s own configuration settings. Basically you pick a handler from the long list above, then configure it properly for your needs.

For local development I prefer the rotating_file option. Since it seems like it is the only one that you can put a limit on the number of files.

The stream option just infinitely fills a single file forever and ever. Unless you have some sort of log rotator as mentioned in the documentation.

If you have the time and urge you could even store the messages in a database then create a user interface in your admin panel to view the messages then delete them. Otherwise you will need some way of limiting the logs and log sizes.

The documentation refers to this list as a stack of handlers. You can have as many as you want, like I mentioned above.

Here is the default production configuration taken from here in the Symfony docs.

# file name -> /config/packages/prod/monolog.yaml
monolog:
    handlers:
        filter_for_errors:
            type: fingers_crossed
            # if *one* log is error or higher, pass *all* to file_log
            action_level: error
            handler: file_log

        # now passed *all* logs, but only if one log is error or higher
        file_log:
            type: stream
            path: "%kernel.logs_dir%/%kernel.environment%.log"

        # still passed *all* logs, and still only logs error or higher
        syslog_handler:
            type: syslog
            level: error

The Symfony docs say the following about production logs.

In the prod environment, logs are written to STDERR PHP stream, which works best in modern containerized applications deployed to servers without disk write permissions.

I’ll probably remove the line that logs locally to a file the file_log line. No need to infinitely fill a log I don’t read. You will need to decide what handlers you want in production and configure them.

Handler names

As you can see in the development configuration file above, there is a handler named “main”. You can give your handlers any name you want, but you need to tell Symfony what type it is with the type directive like you see in main.

main: 
  type: rotating_file 
  max_files: 3 
  path: "%kernel.logs_dir%/%kernel.environment%.log" 
  level: debug 
  channels: ["!event"]

The word “main” can be anything you desire, but notice how you must use type, then use one of the above handler names, then provide the options. Read more about handler names here in the Symfony docs. Basically you can call the handler anything even “asdfg” as long as you use the word “type” and list the type and other required information. More on this below.

Bubble?

That is the question!

One property that you will see on all of the types above is “bubble” Further digging into the github monolog documentation reveals the following about it.

Handlers also have a $bubble property which defines whether they block the record or not if they handled it. In this example, setting the MailHandler‘s $bubble argument to false means that records handled by the MailHandler will not propagate to the StreamHandler anymore.

Basically this means you need to define your loggers in the proper order if you want to have the handling stop at a particular logger for a particular situation. Otherwise each logger in your list does something each time and you might not want that. Like do you want errors to go to a log and also to the console during development?

One thing you may want to think about is where do you want your errors, exceptions and other logged data to be logged? This answer will be different for production vs development for sure. You may want to log just exceptions to a database in production, so that you can query it and show them in an admin user interface for example.

This part of the documentation speaks about logging to different locations.

Channels aka logging to multiple places

What are these channels?

The documentation speaks of channels. What are these channels? In the code above for the monolog.yaml development configuration you will see this line

 channels: ["!event", "!doctrine", "!console"]

Here in the documentation it says the following about channels

The Symfony Framework organizes log messages into channels. By default, there are several channels, including doctrine, event, security, request and more. The channel is printed in the log message and can also be used to direct different channels to different places/files.

Aha. So that is what those are. I wonder what the ! means? Does that mean it ignores those or does it mean it accepts those? Yes it does. Basically the above line would log everything except (event, doctrine and console.) Below you can see a list of all the channels.

So to clarify if you want a handler to log a message for a specific channel you can use the following syntax in the handler configuration.

channels: [security, doctrine]

If you want the handler to ignore a channel then you use this syntax in the handler configuration

channels: ["!event", "!doctrine", "!console"]

You can really get as insanely complex as you want with this logging stuff.

By the way how do you know what logging channels are available?

I prefer the following command, because these can be auto-wired :

php bin/console debug:autowiring

Scroll down and look for monolog listings. You will see something like this.(These can all be auto-wired)

console bin output

These are the channels you have.Basically whenever one of these experiences an issue Symfony sends out an event and the handlers you list decide if they want to do something about it. This way using the channels and multiple handlers you can log things exactly where you want them.  You can even log the same event/message multiple times in multiple locations.

As the docs mention, by default Symfony logs all events to the same location. It is up to you to change that to your projects needs.

Another useful command is the following which allows you to get detailed info about each, it also lists more, but not all are auto-wireable.

php bin/console debug:container monolog

That is interactive and you can choose one of the listings to get more information about it. I find the first method useful to find what I actually can access.

Creating Custom Channels

Sometimes you need to log a specific issue to a specific file or location. For this you need to create your own Channel. The documentation is really weak on this subject so lets dig deep into it.

I get tired of the foo bar BS so here I create a custom channel named “chicken” just so it sticks out for this example.

To create the channel you simple list it at the top of the monolog.yaml file like this.

monolog:
  channels: ['chicken']
  handlers:
    main:
      type: rotating_file
      max_files: 3
      path: "%kernel.logs_dir%/%kernel.environment%.log"
      #path: php://stderr
      level: debug
      channels: [ "!event" ]

A little confusing how you use that syntax in more than one location. In one it listens for channels in another it creates channels.

Wait what?

Maybe channel_list or something else to differentiate would have been better?

Placing the directive above the rest of the handler code creates the new channel or channels.  I don’t know if this is a requirement, but I know it works. To create more than one channel create strings separated by commas.

Now to check if anything happened I will use this command


php bin/console debug:autowiring

Now we have a chicken logger.

Now you can see “monolog.logger.chicken” logger that was created with that one line in the monolog.yaml configuration file.

That is how it is done.

How to use the logger?

There are two ways to use the logger, one you didn’t have to do any of this to use, the other is autowiring, which is why we did all of this for. The other way is to just initiate it and pass the values to the constructor like the documentation for Monolog shows.

Even though all that configuration seems like a pain, in the end it makes things easier by allowing us to auto-wire the logger we want. This saves a lot of having to create the same boilerplate code over and over all throughout our app.

Taking another look at the output of the bin/console debug:container command from above we can see the following

Lets now use the chickenLogger

Each line after the first monolog.logger contains what looks like a PHP variable. It is in fact a PHP variable, one you can use for type hinting. How this works is you type hint LoggerInterface, then use which variable you want and Symfony automagically loads it for you.

farth too easy meme
It feels too easy to be true

Back to the chickenLoggerExample. What I want to do with the chickenLogger is use it to log exceptions to their own exceptions log for easier viewing. This is useful in a situation like using a library to create and convert images.

class UserImageProcessor
{

    private LoggerInterface $chickenLogger;

    public function __construct(LoggerInterface $chickenLogger){
        $this->chickenLogger = $chickenLogger;
        $this->chickenLogger->debug('lets log some chickens');
    }

See in the constructor how I passed the variable $chickenLogger and now Symfony passes me the chickenLogger Channel and I can now log chickens. Logging chickens is a very handy feature in the real world.

And below is the whole monolog.yaml file I am using to log my chickens.

monolog:
  channels: ['chicken']
  handlers:
    main:
      type: rotating_file
      max_files: 3
      path: "%kernel.logs_dir%/%kernel.environment%.log"
      #path: php://stderr
      level: debug
      channels: [ "!event", "!chicken" ]

    exceptions:
      type: rotating_file
      max_files: 2
      path: "%kernel.logs_dir%/exceptions.log"
      file_permission: '765'
      level: debug
      channels: ['chicken']


    # uncomment to get logging in your browser
    # you may have to allow bigger header sizes in your Web server configuration
    #firephp:
    #    type: firephp
    #    level: info
    #chromephp:
    #    type: chromephp
    #    level: info
    console:
      type: console
      process_psr_3_messages: false
      channels: [ "!event", "!doctrine", "!console" ]

Notice I used the file permissions option. That is a handy one. See the exceptions handler is using the chicken channel. Again I could have named the “exceptions:” section anything even “chirpy-birds” symfony doesn’t care, only the directives matter.

Now when I log my chickens, the main handler section will ignore the chickens, but my exceptions section will log my chickens and so will the console. I’d have to add “!chicken” to the consoles “channels” section or I can add “bubbles: false” to the exceptions section to stop it.

Now you know!!!

Links about Loggers

Logging to Rollbar -> Helps you organize and view logs and much more.

Logging with Monolog -> A short article

Logging -> Documentation link ->overall general information

How to log messages to different files -> more from the documentations

Using the logger -> more from the docs on how to use it.

Categories
Software Development Web Development

PHP Enumeration classes vs fake enumerations what to use.

I am growing to HATE PHP ENUMS. Why? Because if you forget to call ->value you get BS errors about cannot convert object to string. It is just another un-needed step. Enums sounded cool at first but fuq the BS with calling ->value, it is entirely too easy to forget.

Enumeration classes in PHP are a new feature as of version 8.1 Fake enumerations were what we did before this new feature. A fake enumeration was just a class with constants, the syntax to refer to them was the same minus ->value. See my other article if you don’t know what fake PHP enumerations are Php Backed Enums don’t forget to call value

TLDR

Use plain classes with constants if any of the values will repeat. Use Enumerations when each value is always unique. Keep reading to find out WTF I am talking about.

WTF are you talking about?

The story

The new Enumeration classes have a limitation on them that each “case” must have an unique value, it is just how it works.
This is only a problem when you are using Enumerations more like the old fake constant enumerations, because you can’t give two cases the same value. If you are using ints you run into this issue more quickly.

Let me show an example.

I have often used this pattern to help eliminate bugs from typing, it also helps you remember what values are possible for something. Below is the values allowed for an image for some sort of upload.

class ImageDataEnum
{
    const HEIGHT = 'height';
    const SIZE_STRING = 'size';
    const IMAGE_URL = 'image_url';
    const WIDTH = 'width';
}

This way I know what values are allowed in the upload and I don’t get errors from typing.This would convert to an Enumeration perfectly.

I have dysgraphia and dyslexia so this is something I fight constantly, it is also why I hate Linux command line. Basically my brain gets the letters out of order sometimes when I type or write or leaves entire letters out or adds them and my eyes don’t see it for some odd reason sometimes. I couldn’t take notes in school because it turned into jibberish word soup.

But I also like to use them to store info that won’t change, like maximum image size. This is a use case that won’t work with PHP Enumerations, probably one of the only ones I can think of.

Bad code

You made a real mess of that code fella

This kind of code won’t work.

enum ImageSizeEnum: int
{

    case BLOG_IMAGE_HEIGHT = 600;
    case BLOG_IMAGE_WIDTH = 600;
    case TWITTER_LARGE_IMAGE_HEIGHT = 600;
    case TWITTER_LARGE_IMAGE_WIDTH = 1200;
    case PROFILE_PICTURE_HEIGHT = 180;
    case PROFILE_PICTURE_WIDTH = 180;
    case PROFILE_THUMB_HEIGHT = 55;
    case PROFILE_THUMB_WIDTH = 55;
    case USER_THUMB_HEIGHT = 150;
    case USER_THUMB_WIDTH = 150;
    case USER_IMAGE_HEIGHT = 600;
    case USER_IMAGE_WIDTH = 600;

}

Notice that while each case has a unique name, they do not have unique values. The code above will give you an error because the values for the cases is repeated. If you are using PHPStorm then it is screaming at you right now with red underlines and error warnings etc. LOLOL

PHP Storm is all like…

The docs say the following

In PHP, Enums are a special kind of object. The Enum itself is a class, and its possible cases are all single-instance objects of that class. That means Enum cases are valid objects and may be used anywhere an object may be used, including type checks

In order to do what is intended in the code above (a list of constants to be used in code later) this has to be converted back to a class with constants. It looks so similar it is crazy.

Just convert really quickly

Ok code

This code will work.

class ImageSizeEnum
{

    const BLOG_IMAGE_HEIGHT = 600;
    const BLOG_IMAGE_WIDTH = 600;
    const TWITTER_LARGE_IMAGE_HEIGHT = 600;
    const TWITTER_LARGE_IMAGE_WIDTH = 1200;
    const PROFILE_PICTURE_HEIGHT = 180;
    const PROFILE_PICTURE_WIDTH = 180;
    const PROFILE_THUMB_HEIGHT = 55;
    const PROFILE_THUMB_WIDTH = 55;
    const USER_THUMB_HEIGHT = 150;
    const USER_THUMB_WIDTH = 150;
    const USER_IMAGE_HEIGHT = 600;
    const USER_IMAGE_WIDTH = 600;

}

With the fake enum you leave off the ->value part when you need the value as noted in this article. Php Backed Enums don’t forget to call value

Now I can have constants that have the same value and PHP won’t barf errors on me.

kitten frew up meme
I make PHP barf.

You can also do something very similar in Javascript if you are interested check out this article. Faking Enumerations with Vanilla javascript

Summary

So basically if you need to use the same value with a different name, then you need the old fashioned PHP fake enumerations. If your use case has it so that every named case has a unique value then use Enumerations.

 

Categories
Software Development Web Development

Javascript and contenteditable how to move the cursor to the end of user input

This appears to work in all browsers. Let me know if you find issues.

So this is something I needed to do and all the examples I found didn’t work properly. Or they worked partially, or only in one browser.

The idea seems super simple, but in reality the problem becomes complex for several reasons. For one, you need to have event listeners to listen for input then perform the proper actions to update the content and move the cursor to the end.

My use case makes it even harder and maybe yours does too. What I needed was to allow a user to enter hashtags and then send an ajax request to the backend to fetch a list of matching hashtags to display in a drop list below the input(auto suggestions). Then when the user selects one, add it to the list by removing the typing first, then add the new hashtag and move the cursor to the end.

At first I was all confident like

This should be easy right?

So that sounded easy. I got most of it working by using Google, reading some articles, reading stack questions… but it wasn’t working properly. My cursor would appear in random places or not appear, or not be where I wanted it to be. I tried reading the MDN docs for range and well I didn’t quite grasp how the system works.

If you are reading this you probably have done all this too and may be having issues as well.

Trying to get this working

One stupid, nonsensical issue I ran into right away was when the user hit backspace instead of one letter or hashtag being removed, ALL CONTENT WAS REMOVED.

homer simpson meme
Not the action we expected now is it.

I fixed this by adding &nbsp; which is html for non breaking space. Explained in depth in this great article. Some people add an empty paragraph from what I read. I decided to use nbsp; because it is seen as a #text node not a text element like p for example.

So now when the user backspaces, the first backspace does nothing, but the next removes the hashtag. This repeats until there are no hashtags. I was using divs, with spans inside them. I moved to just a simple span element with @nbsp; added to the end.

My original html minus class and id’s

My first idea was to have a hashtag with an x to remove it. But then I was like, most people will just backspace and if they are on their phone no way they can accurately touch it.

I also discovered that you must add contenteditable=false to each element within the parent element so that when the user clicks, the cursor doesn’t appear inside some randomish point instead of at the end of the content.

So I adjusted it to be just the span with a following nbsp tag like this.

Ok so now I have these hashtags displaying correctly. I don’t like that I have to add the invisible space tag to make the contenteditable act right, but what can we do?

If you are wondering how I make these cool code images, you need to checkout this carbon app.

Below is the actual div and some sample hashtags I pulled from the developers console.

notice the html structure here.

See that autocomplete=off . Yeah you need that so that when a user types into input or contenteditable divs it doesn’t drop it’s own suggestion list over your suggestion list, it really makes things a mess.

Moving the cursor to the end.

In the video below you can see what I want and what I have gotten working so far. This pretty much works exactly how I wanted it to work. Notice the user can enter a hashtag at the beginning and when they choose enter the cursor moves to the end.

If you are working on a similar project and need the cursor to go to the end like this, then you know what a pain it was to get this figured out. LOL

I eventually got tired of the try, fail, google, curse, try, fail, curse some more routine. So I decided to dig directly into the W3C standards myself. It started making sense after  I read it a few times and then checked the MDN links above again and played around etc. I tried reading the DOM spec but I didn’t find it as helpful. But overall it took reading all of everything I could find and trial and error to figure it out.

Ok so what magical code have I used? I wont cover the entire class and how it works. I’ll just show the actual method that creates a range and moves to the end.

moveCursorAfterHashtags() {
        let hashtagRange = document.createRange();
        let windowSelection = window.getSelection();
        //remove any previously created ranges
        windowSelection.removeAllRanges();
        let theNodes = this.hashtagsDivElement.childNodes;
        this.hashtagsDivElement.focus();
        let firstNode = theNodes[0];
        let lastNode = theNodes[theNodes.length - 1];
        let start = theNodes[0];
        let end = theNodes[theNodes.length - 1];
        console.log('Start is ' + start.nodeName + ' end is ' + end.nodeName + " node count " + theNodes.length);
        hashtagRange.setStartBefore(firstNode);
        hashtagRange.setEndAfter(lastNode);
        hashtagRange.collapse(false);
       //add the range to a window selection object.
        windowSelection.addRange(hashtagRange);
        windowSelection.collapseToEnd();
        console.log('commonAncestorContainer contains ' + hashtagRange.commonAncestorContainer.id);
        console.log('The start container is ' + hashtagRange.startContainer.id);
        console.log('The end container is ' + hashtagRange.endContainer.id);
    }

Notice all the console logs needed to figure this out. LOL

So the code above creates a range. Then creates a selection object, this is needed to actually move the cursor to the end of the range with this line

windowSelection.collapseToEnd();

But before you move the cursor to the end you must collapse the range to a single point hence the line

 hashtagRange.collapse(false);

You will see people using setStart() and setEnd(). After reading the docs I found it MUCH EASIER. to just use setStartBefore() and setEndAfter().

This is because of the structure I am using a span followed by a plain #text node, which may or may not exist, and it makes calculating the offsets harder. This way if the user backspaces one time and the nbsp is removed, but the leading hashtag remains the range is still inclusive and less calculations needed.

so much thinking…

You can see I feed them a node. The first and last node are calculated with

let firstNode = theNodes[0];
let lastNode = theNodes[theNodes.length - 1];

hashtagRange.setStartBefore(firstNode); 
hashtagRange.setEndAfter(lastNode);

This is because .childNodes returns an array which starts with 0, so to get the last one you must reduce the count by 1. A 2 item array will have the values 0 and 1, because the numbering starts at 0.

In this terminology node is anything html element or just typed text or the nbsp; that makes the space. These are all called nodes.

The other start and end are old code just used for console logging to see WTF is going on LOL

Also notice where I set the focus to the parent div element before creating the range etc.

this.hashtagsDivElement.focus();

I am not sure if this makes a difference, I prefer to add focus to the element first.
And that is how you get the cursor to set at the end of the contenteditable div.

 

boom how it is done baby meme
Trial and error until it works

 

If this doesn’t work properly in all browsers it is the browser makes fault for not deciphering the cryptic standards better.

Categories
Web Development

Javascript event listeners be careful where you bind this

In Javascript User interface programming you often need to work with EventListeners. In modern Javascript you may also be doing this in a class, which is handy. One of the  things that sucks about Javascript event listeners is they eat memory and slow your app down, if you are not REALLY careful.

sweet meme
Slow down your app the easy way!

They do this because each time the action you use to add the event listener code fires, more and more code gets added to memory, more things need to be kept up with etc.

There are some best practices that help with this issue such as always remembering to remove the event listeners, never use anonymous functions, arrow functions etc. Here on MDN there is a lot of good information I won’t waste time repeating in this article.

What I want to cover in this article is properly binding this within a class when using Event Listeners so that the function signatures match and therefore the listeners can properly be removed. Don’t think reloading the page solves your problem either… it doesn’t. In fact it just makes the browser eat more and more memory.

The reason we need to bind this is the code in our Javascript classes that handle the events ( event handlers ) usually need to access other methods and properties within the class when called by the event listener code.

Magical Bugs

Worse than the memory issue is the magical, insanely, nearly impossible bugs that having multiple listeners calling the same function can create.

If for example the function changes a variable value so that some UI action changes etc. One example I just ran into was a method in a class that monitored a keypress then moved the cursor. This was for an auto completer with a drop list of suggestions. The idea was to have Javascript highlight the selected option and accept it when the user hits enter. Below is the code example.

keyPressHandler(event) {

        let target = event.target.id;
        this.keyPressed = event.keyCode;
        this.optionElementsList = document.getElementById(target + "-ez-hashtags-list");

        if (this.optionElementsList) {
            this.optionElementsList = this.optionElementsList.getElementsByTagName("div");
        }

        switch (event.keyCode) {
            /*If the arrow DOWN key is pressed,
           increase the currentChoice variable:*/
            case 40:
                console.log('inside keyPressHandler handling keydown event');
                this.currentChoice++;
                this.makeActive();
                break;
            /*If the arrow UP key is pressed,
       decrease the currentFocus variable:*/
            case 38 :
                console.log('inside keyPressHandler handling keydown event');
                this.currentChoice--;
                this.makeActive();
                break;
            /*If the ENTER key is pressed, prevent the form from being submitted,*/
            case 13 :
                event.preventDefault();

                if (this.currentChoice > -1) {
                    /*and simulate a click on the "active" item:*/
                    if (this.optionElementsList) {
                        this.optionElementsList[this.currentChoice].click();
                    }
                    //empty the keysTyped variable
                    this.keysTyped = '';
                }
                break;
            case 8 :
            case 9 :
                //9 is tab, close any list if they hit tab
                //8 is backspace close the current list if they hit backspace
                this.closeOpenLists();
                break;
        }
    }

This is similar to what you need to do when creating a custom WYSIWYG html editor. You need to monitor every damn key pressed and perform actions based on that. The real fun begins when you have two listeners say one for keyup and one for keydown or just two of the same.

The code above if the user hits the up or down arrow decreases or increases the variable used to track the users expected action. It then calls another method to make the correct option highlighted for the user as selected. Below is the code.

makeActive() {

        if (!this.optionElementsList) {
            return false;
        }
        /*start by removing the "active" class on all items:*/
        this.makeInactive();

        if (this.currentChoice >= this.optionElementsList.length) {
            this.currentChoice = 0;
        }
        if (this.currentChoice < 0) {
            this.currentChoice = (this.optionElementsList.length - 1);
        }
        /*add class "autocomplete-active":*/
        this.optionElementsList[this.currentChoice].classList.add("ez-hashtags-active");
    }

This is where the currentChoice variable comes in play. The up and down arrows add the class which changes the background color to make it look highlighted. Then when the user hits enter, the selected value is entered into the input, but in this case a div with contenteditable=true This UI stuff is a real pain in the ass.

The BAD CODE

Now lets look at the wrong way to bind this, even though it looks like this should totally work properly.

 createChoiceList(elementId, inputValue) {

        if (Utils.isEmpty(inputValue)) {
            return false;
        }
        this.currentChoice = -1;

        if (!Utils.isEmpty(this.listOptions)) {

            if (Utils.notEmpty(this.optionContainer)) {
                this.closeOpenLists();
            }

            /*create a DIV element that will contain the items (values):*/
            this.optionContainer = document.createElement("DIV");
            this.optionContainer.setAttribute("id", elementId + "-ez-hashtags-list");
            this.optionContainer.setAttribute("class", "ez-hashtags-items");
            /*append the DIV element as a child of the hashtag div container:*/
            this.hashtagsDivElement.parentNode.appendChild(this.optionContainer);

            /*for each item in the array...*/
            for (let i = 0; i < this.listOptions.length; i++) {

                /*check if the item starts with the same letters as the text field value:*/
                let firstLetter = this.listOptions[i].substr(0, inputValue.length).toUpperCase();

                if (firstLetter === inputValue.toUpperCase()) {

                    /*create a DIV element for each matching element:*/
                    let b = document.createElement("DIV");
                    /*make the matching letters bold:*/
                    b.innerHTML = "#" + this.listOptions[i].substr(0, elementId.length) + "";
                    b.innerHTML += this.listOptions[i].substr(elementId.length);
                    /*insert an input field that will hold the current array item's value:*/
                    b.innerHTML += "";
                    /*execute a function when someone clicks on the item value (DIV element):*/
                    this.optionContainer.appendChild(b);
                }
            }
            this.hashtagsDivElement.addEventListener('keydown', this.keyPressHandler.bind(this));
            this.optionContainer.addEventListener('click', this.choiceSelectionHandler.bind(this));
        }
    }

The offending code is the last two lines that add the even listeners. The intention here was to make the signature match the remove event listener code. Like  this below.

removeKeypressHandlers() {
        try {

            if (this.hashtagsDivElement) {
                this.hashtagsDivElement.removeEventListener('keydown',this.keyPressHandler.bind(this));
            }

            if (this.optionContainer) {
                this.optionContainer.removeEventListener('click', this.choiceSelectionHandler.bind(this));
            }

        } catch (e) {
            console.log("OOPS we caught an error " + e);
        }
    }

It looks good, like they match like it should function, right?

makes sense to me meme
Looks good to me…

WRONG

Even though those functions look like they match, bind(this) creates a new function every time it is called.

scared chimp
Oh that can’t be good. That can’t be good at all.

So now we have LOTS OF EVENT LISTENERS. And that causes magical bugs like the video below.  The real good example is after the 30 second mark.

Notice how when I first type the selection works. Then when I backspace and start again it just jumps to the last one. Then I backspace and start again and it works. Then it doesn’t I was like WTFF I am losing my mind. Watch towards the end for the magic to start really good.

God forbid you ever meet an articulate ass.

articulate ass
Meet the articulate ass

The right way

So how should we defeat this Javascript demon and bind this properly for our event handlers??? Well the answer is quite simple actually. You create another new variable in the constructor and bind this to the handler there. This way bind creates only 1 function, 1 time and it can easily be removed. As a bonus if you add the function 100 times in 100 calls, the browser will only actually add it 1 time.

So lets see the code.

        constructor(inputElementId, endpointUrl, fetchOnce = true, keysThreshold = 2) {

        //set the routes for the Routing object
        Routing.setRoutingData(routes);
        this.inputElementId = inputElementId;
        this.currentChoice = -1;
        this.endpointUrl = endpointUrl;
        this.fetchOnce = fetchOnce;
        this.inputElement = document.getElementById(inputElementId);
        this.hashtagsDivElement = null;
        this.hashtagValues = '';
        this.inputValues = '';
        this.optionContainer = null;
        this.optionElementsList = null;
        this.listOptions = '';
        this.keyPressed = '';
        this.keysTyped = '';
        this.boundChoiceSelectionHandler = this.choiceSelectionHandler.bind(this);
        this.boundKeypressHandler = this.keyPressHandler.bind(this);
        this.boundTypingHandler = this.handleTyping.bind(this);
        //add the hashtags div and hide the actual input element
        this.hideInputElement();
        this.addHashtagsDiv();
    }

As you can see in the code above,this goes in the class constructor. Anywhere else and you could be creating the same listeners over and over.

Then to actually add the listeners when you want them to be added you do this little trick below.

this.inputElement.addEventListener('keydown', this.boundKeypressHandler);
            this.optionContainer.addEventListener('click', this.boundSelectionHandler);

Notice now the binding is done in the constructor and the variable that holds the bound function is added in place of the previous binding in the addEventListener() calls. This way these eventListeners are only ever created once, the other times are ignored. Javascript bind actually creates and returns a new function with the scope needed to use this keyword.

To remove the event listeners later to cleanup memory, you do this.

removeKeypressHandlers() {
        try {

            if (this.inputElement) {
                console.log('Removing the input element keydown handler');
                this.inputElement.removeEventListener('keydown', this.boundKeypressHandler);
            }

            if (this.optionContainer) {
                console.log('removing the option container click handler');
                this.optionContainer.removeEventListener('click', this.boundSelectionHandler);
            }

        } catch (e) {
            console.log("OOPS we caught an error " + e);
        }

    }

Notice now the signatures of the calls match exactly this.boundxxx

I had learned this information many years ago and forgot it until I had this hard to catch bug above. I then finally remembered I was was doing stupid things and how to do this properly.

These kind of things will make you hate Javascript UI programming or any DOM action programming. I hope I never forget this lesson again.

Categories
Uncategorized

How to update your FosJsRoutingBundle routes file

When you add a new route to one of your Symfony API routes aka your controllers, you will need to recreate the JSON routing file that FosJsRoutingBundle uses.

To do that you use this simple command.

php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

This command will rewrite your existing routes JSON file located in the public folder of your project.

Then to make sure your routes are working you display them with this command.

php bin/console fos:js-routing:debug

This will output your currently available routes created with the line above.
To learn more about the command read this short article. How to view Symfony 5+ FosJsRoutingBundle routes

To learn how to get the Javascript routes in your javascript code in the first place with FosJsRoutingBundle read this book I wrote on the subject. LOL How to get URL Routes in your Javascript in Symfony 5+

Categories
Resources Web Development

How to view Symfony 5+ FosJsRoutingBundle routes

I can never remember this command. However, now that I am creating more AJAX and exposing endpoints I need this command more often.

This command is found in the docs too. But I can never remember where, so I will write about it here.
The command to view how FosJsRoutingBundle views your routes.

php bin/console fos:js-routing:debug

This will list something like this for you.

 Name                  | Method | Scheme | Host | Path                   |
+-----------------------+--------+--------+------+------------------------+
| menu                  | GET    | ANY    | ANY  | /menu                  |
| alias_exists          | ANY    | ANY    | ANY  | /alias_exists          |
| email_exists          | ANY    | ANY    | ANY  | /email_exists          |
| get_image_collections | GET    | ANY    | ANY  | /get_image_collections |
| save_user_image       | POST   | ANY    | ANY  | /save_user_image       |
| get_user_image_data   | GET    | ANY    | ANY  | /get_user_image_data   |
+-----------------------+--------+--------+------+------------------------+

Isn’t that pretty.This is not dynamically updated. You need to re-output your routes to the file FosJSRoutingBundle expects them to be in, so that when it creates a route it matches. I need to write an article about how to do only that. For now scroll to the bottom of the following article. How to get URL Routes in your Javascript in Symfony 5+

But if you don’t update your routes they won’t match the above output and your routes will fail when you use FosJS. Mine seemed to just redirect to my current page. Your setup/configs may differ.

Categories
Resources Web Development

How to view Symfony routes

I often need to view my current routes and how the Symfony kernel views them. This usually happens when I am adding new routes, I end up getting conflicts and have to resolve them by viewing what exists etc.

The command to view your routes is really simple. Open your console and navigate to your projects main directory and type the following command to see a list of all of your current Controllers routes.

php bin/console debug:router

That will output a list of all of your routes. Something like this

user_settings                 GET        ANY      ANY    /user-settings                       
  profile_unavailable           GET        ANY      ANY    /profile-unavailable{page_data}      
  save_user_settings            POST       ANY      ANY    /save-user-settings                  
  _preview_error                ANY        ANY      ANY    /_error/{code}.{_format}             
  _wdt                          ANY        ANY      ANY    /_wdt/{token}                        
  _profiler_home                ANY        ANY      ANY    /_profiler/                          
  _profiler_search              ANY        ANY      ANY    /_profiler/search                    
  _profiler_search_bar          ANY        ANY      ANY    /_profiler/search_bar                
  _profiler_phpinfo             ANY        ANY      ANY    /_profiler/phpinfo                   
  _profiler_search_results      ANY        ANY      ANY    /_profiler/{token}/search/results    
  _profiler_open_file           ANY        ANY      ANY    /_profiler/open                      
  _profiler                     ANY        ANY      ANY    /_profiler/{token}                   
  _profiler_router              ANY        ANY      ANY    /_profiler/{token}/router            
  _profiler_exception           ANY        ANY      ANY    /_profiler/{token}/exception         
  _profiler_exception_css       ANY        ANY      ANY    /_profiler/{token}/exception.css     
  show_dash                     ANY        ANY      ANY    /admin                               
  tos                           GET        ANY      ANY    /app/pages/tos                       
  privacy                       GET        ANY      ANY    /app/pages/privacy                   
  block_user                    POST       ANY      ANY    /block-user                          
  unblock_user                  POST       ANY      ANY    /unblock-user                        
  blocked_users                 GET        ANY      ANY    /blocked-users                       

As you can see there are 5 columns. The first column is the routes name, tos for example. Here is how tos is declared in the Controller

* @Route("/app/pages/tos", name="tos", methods={"GET"})

The second column is what type of HTTP request is allowed POST, GET, HEAD etc. The next two columns are the Scheme and Host, dig in the docs under routing, I believe, if you want more info on those two. The final fifth column is the Path, this is what your URL should look like.

Categories
Software Development Web Development

Symfony how to get query string values sent by AJAX calls

When using a Symfony API endpoint for getting values such as maybe something like an auto-complete feature you will need to be able to send some text(what the user enters) to the backend. Then have the backend return a response based on that.

For example with an auto complete feature, you might want to send 3 characters to an API endpoint and have it only return a list of words that start with those three characters, instead of returning every last word in the database. This will use less of your servers resources and the users while speeding your app up.

The way I suggest to do this is to first use FosJsRouting bundle in your Javascript to create the URL’s for you. This makes it much easier, faster ( Once you get it installed etc ) and consistent. Here is a long article I wrote about installing and using FosJsRouting bundle How to get URL Routes in your Javascript in Symfony 5+.

This is a short example and doesn’t include checking if the user is logged in ( has rights) if it is an AJAX request, check headers etc. it is just for this example.



/**
     * returns a list of the users image collection names
     * @Route("/get_image_collections", name="get_image_collections", options={"expose"=true},  methods={"GET"})
     */
    public function get_image_collections(Request $request): JsonResponse
    {
        $query = $request->getQueryString();
      $text2 = $request->query->get('text');
      $text =  $request->get("text");
        $values = array(
            'first',
            'second',
            'third',
            'fan',
            'free',
            'narcotics',
            'arse',
            'tardigrade',
            'tinnitus',
            'monkey',
            'mall',
            'doppleganger',
            'ballocks',
            'zoo',
            $query,
            $text,
            $text2
        );
        return new JsonResponse($values);
    }

This is very simple, it doesn’t even hit a database, it is just for this article and testing. All this does right now is return the list and add some text and query so I can see what was sent. In production you might even want to use caching so that your database only gets hit if it has to.

As you can see there appears to be two ways to get the value of the query. Both worked for me, but I am thinking that going through the query method is the proper way like follows.

$request->query->get('text');

The query being used for this endpoint looks like this

"http://sogi-test/get_image_collections?text=fa"

In the future I’ll update the code to include security checks, to return a matching list compiled from a database query and caching.

But notice the (Request $request) that is Dependency Injected ( see symfony dependency injection )

I should also add, below is how I am building the URL with FosJsBundle

let url = Routing.generate('get_image_collections', {text: text});

That is where the “text” named query key is coming from. You can name the key anything you want. If you have more than one named value then use a comma and add it after the first, like in the FosJsRoutingBundle docs under how to use above link.
For example say you want to include something like a page number for paging through results or limiting them etc. You could create the
url route like this

let url = Routing.generate('get_image_collections', {text: text, limit: limit});

This Javascript JSON looks confusing, the first part is the name(key) the second is a(value) variable containing the value
Then to get the values in your controller route you do this.


$text = $request->query->get('text');
$limit = $request->query->get('limit');

You can send as many values as you need to this way. Forms work a little differently. I’ll write an article about those soon too.

And that is how you get the values you send.
baby how it is done meme
That is how it is done

Interesting Error story

I figured I would mention this debugging story I had while sending an ajax request with an improperly formed URL ( aka not matching the route)

I kept getting errors when trying to use Promise.json() with the value returned from my AJAX call. What happened is the server was returning HTML instead of JSON which results in an error when Promise.json() is called.

A while of that and thinking it was my JS code but not really sure of WTF was going on. I finally started outputting my URL to see what was being created and low and behold that was it. I was even watching the Request/Response in the browser. But, it was not obvious until I really started inspecting the created URL vs the route output that I figured out my route and url didn’t match and that was the reason for the redirect.

How to view Symfony routes

 

My route didn’t match because at some point I changed how I wanted the route to look and I had not rerun the FosJsRouting bundle as mentioned in that article to renew the routes in it’s json file.  So it created a URL that didn’t match, the route was created like /route/{text} but the api route expected /route&text=….

I didn’t get an error. Nope and nothing was recorded that I could find in the error logs. Symfony simply redirected ( 301) sent back to my ajax which then somehow did another request to the page I was using the javascript in,  returning the pages HTML.

I was like

Uhm, wait… what?

I have no idea why Symfony redirects when the route doesn’t match.  I don’t even know what setting to adjust where to change this, I know I did something somewhere at sometime… I’ll have to dig into what I did.

Why this happend is because I didn’t re-update the FosJsRouting json file and then restart webpack so it pulls in the new file. But I know there is some sort of setting somewhere for Symfony for the redirect action I am seeing and I know I set it somewhere somehow.

Can I have hamburger now???

Categories
Web Development

How to quickly create a Symfony 5+ controller

A Symfony 5 controller is just a class. You could just use your IDE to create a new class  for you, but you would need  to add some boiler plate code like the namespace and then extend AbstractController and add some use statements etc.

Symfony 5+ has a better way though. With just one command you can have a new controller created with the basic boiler plate already created. How do you ask? With a simple Symfony maker command.

php bin/console make:controller NewControllerName

IT is that easy. Now you can go to the new Controller and start adding methods. Here is a deeper explanation.

This also creates a template. You can delete the template if you don’t need it or leave it. I got the following output when creating UserImageController


created: src/Controller/UserImageController.php
created: templates/user_image/index.html.twig
Categories
rants

Ubuntu 20 slow and freezes often

I’ve used Ubuntu since version 8 or about 2009/2010ish. It used to be super fast. You used to be able to run it on ANYTHING. It was easy to use. I can’t take the damn slowness these days.

Update. Apparently Gnome is the culprit plus some other useless crap. Some say Kubuntu is faster. I don’t have time to dink around with this right now.

Here is a total list of all the things that still suck on ALL linux desktops in 2022 Major Linux problems on the desktop 2022 edition.

These days Ubuntu is SLOWER THAN MOLASSES IN THE WINTER IN SIBERIA. So slow I am HONESTLY thinking about switching back to Windows just so I can work. I rather spend my time working than investigating and typing utter bullshit cryptic commands into the command line.

nothing works meme
Ubuntu 20

Booting is extra slow, 3 to 5 minutes on an i7 with 16Gb ram. That is purely insane. I think this is a record honestly.

Opening any program is slower than hell, whether it is a browser or an IDE, Slow. Slow and slow.

CONSTANT CRASHES AND FREEZES.

Linux has a special trick called freeze…

And once this MOFO freezes, you can’t do shit. Nothing works.  No combination of keys on the keyboard will give any result. Your only option with Ubuntu/Linux desktop is to un-plug your PC.

ISN’T THAT JUST SUPER….

I don’t feel like digging into any files to figure out WTF this pile of bile is doing. I am guessing Ubuntu/Mint (this all happens on another PC I am running mint on) TOTALLY SUCKS at memory management, as the freezes almost always happen when I am using a browser. Honestly I use my computer to get shit done not to screw around playing with the command line trying to get everything working so I can feel extra smart.

That shit is for kids. In adultland we need our PC to turn on and run programs and function and shit like that.

sarcastic kid meme
DERP

But the slowness and freezing really sucks and is pushing me to move back to Windows for web development and programming. Plus most of the image editing, video editing, etc. etc. etc. software for Linux desktop is not worth the shit. Hell most of the software for linux desktop is chock full o bugs.

I sent someone my resume I created with LibreOffice they sent me an email back saying they couldn’t open it. Yay, we still have that old ass issue in 2021???

homer simpson meme
My first encounter with an app using an ORM

Then you got the damn issues with print drivers and video drivers and drivers in general. In reality you are lucky if you get a PC to run Linux desktop properly. And don’t give me this shit about flavor xxx is better. They are all built from the same damn kernel, which is what most functionality is built on.

Right now I need my computer to work. I have too much to do to stop and investigate why Linux is not working and dig through logs and google and go to forum after forum, for 2 damn days.

Screw that and soon screw Linux desktop too.

I am over the sluggishness.

Over the super hard freezes.

Over the slow startups.

Over the slow everything and piss poor memory management.

It probably doesn’t even use all 8 cores either. And to think you used to be able to run Ubuntu on tiny devices.
I bet the Linux Fanboys are having some hyperventilating butthurt right now, gonna leave me lots of comments. They never read the article, then leave the dumbest comments.

I love you guys too and I want to help you heal that butthurt.