DEV Community: LironEr

Monitor your app bundle size with BundleMon and CodeFresh

LironEr — Wed, 02 Jun 2021 19:33:00 +0000

Your goal is to keep your bundle size as small as possible to reduce the amount of time it takes for users to load your website/application. This is particularly important for users on low bandwidth connections.

BundleMon helps you achieve that by constantly monitoring your bundle size on every commit and alerts you on changes.

This step by step guide will help you set up BundleMon with CodeFresh

Clone repo

For this guide I used this repo: https://github.com/Yog9/SnapShot

git clone https://github.com/Yog9/SnapShot

Build

yarn build

Add BundleMon

yarn add -D bundlemon

Add BundleMon config

Create a file new file .bundlemonrc.json

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.*.js",
      "maxSize": "1kb"
    }
  ]
}

Run BundleMon

yarn bundlemon

Ignore hash in file name

Changing app code will cause webpack to generate a new hash for files that have been changed.

main.e0277e23.chunk.js -> main.c2a935b4.chunk.js

In order for BundleMon to know it's the same file you need to add <hash> string to file path config:

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.<hash>.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.<hash>.js",
      "maxSize": "1kb"
    }
  ]
}

Create pipeline

Create new pipeline in CodeFresh
Add GIT triggers:
- PR trigger:
- trigger name: PR
- trigger by: Pull request opened & Pull request synchronized
- main branch trigger:
- trigger name: main-push
- trigger by: Push commits
- branch: /^((main)$).*/gi

version: "1.0"

steps:
  main_clone:
    title: "Cloning repository"
    type: "git-clone"
    repo: "${{CF_REPO_OWNER}}/${{CF_REPO_NAME}}"
    revision: "${{CF_REVISION}}"
    git: "github"

  install:
    title: "Install dependencies"
    image: "node:14"
    environment:
      - NPM_CONFIG_CACHE=${{CF_VOLUME_PATH}}/.cache/npm
      - YARN_CACHE_FOLDER=${{CF_VOLUME_PATH}}/.cache/yarn
    commands:
      - yarn

  build:
    title: "Build"
    image: "node:14"
    commands:
      - yarn build

  bundlemon:
    title: "Run BundleMon"
    image: "node:14"
    environment:
      - BUNDLEMON_PROJECT_ID=${{BUNDLEMON_PROJECT_ID}}
      - BUNDLEMON_PROJECT_APIKEY=${{BUNDLEMON_PROJECT_APIKEY}}
    commands:
      - yarn bundlemon

  deploy:
    title: "Deploy"
    image: "node:14"
    commands:
      - echo "deploy..."
    when:
      branch:
        only:
          - main

Create BundleMon project

In order to save history and get differences from your main branches you will need to create a new project and setup environment variables.

Create new project and copy the project ID and API key
Add BUNDLEMON_PROJECT_ID & BUNDLEMON_PROJECT_APIKEY to pipeline variables

API key is a secret, encrypt the secret in CodeFresh UI when adding this variable

Add GitHub integration

Install BundleMon GitHub App
Add output configuration to BundleMon config

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
],

You can change github output options

When creating your first PR with BundleMon you should see all files found by BundleMon as "Added", because there isn't a record on your main branch.

Once you merge the PR BundleMon will keep a record on your main branch, so on your next PR you should see the difference between the PR and your main branch.

Monitor your app bundle size with BundleMon and GitHub actions

LironEr — Sat, 06 Feb 2021 18:33:26 +0000

BundleMon is a free open-source tool that help you achieve that by constantly monitoring your bundle size on every commit and alerts you on changes.

This step by step guide will help you set up BundleMon with GitHub actions

Clone repo

For this guide I used this repo: https://github.com/Yog9/SnapShot

git clone https://github.com/Yog9/SnapShot

Build

yarn build

Add BundleMon

yarn add -D bundlemon@next

Add BundleMon config

Create a file new file .bundlemonrc.json

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.*.js",
      "maxSize": "1kb"
    }
  ]
}

Run BundleMon

yarn bundlemon

Ignore hash in filename

Changing app code will cause webpack to generate a new hash for files that have been changed.

main.e0277e23.chunk.js -> main.c2a935b4.chunk.js

In order for BundleMon to know it's the same file you need to add <hash> string to file path config:

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.<hash>.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.<hash>.js",
      "maxSize": "1kb"
    }
  ]
}

GitHub action

Install BundleMon GitHub App.

Create a new file .github/workflows/build.yml

name: Build

on:
  push:
    branches: [master]
  pull_request:
    types: [synchronize, opened, reopened]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16
        uses: actions/setup-node@v2-beta
        with:
          node-version: "16"

      - name: Install dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Run BundleMon
        run: yarn bundlemon
        env:
          CI_COMMIT_SHA: ${{github.event.pull_request.head.sha || github.sha}} # important!

Make sure to set CI_COMMIT_SHA env var, more info can be found here

Add GitHub PR integration

Make sure you already installed BundleMon GitHub App.

Add to your BundleMon config file:

"reportOutput": ["github"]

// or override default options

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
]

When creating your first PR with BundleMon you should see all files found by BundleMon as "Added", because there isn't a record on your main branch.

Once you merge the PR BundleMon will keep a record on your main branch, so on your next PR you should see the difference between the PR and your main branch.

This tutorial also available here

Delete expired documents automatically with MongoDB (TTL index)

LironEr — Wed, 30 Sep 2020 15:57:02 +0000

Recently I needed to delete some documents that I save in MongoDB after some time. I can think of a few examples why we would want to delete data after some time:

logs / events
api keys / access tokens
non-active users
etc

We could do it by running a cronjob that deletes the data, delete the data every time we insert new data or any other solution.

Luckily for me, my wife told me that MongoDB already have that mechanism built-in.

TTL index

TTL (Time-To-Live) indexes are special single-field indexes that MongoDB can use to automatically remove documents from a collection after a certain amount of time.

A background thread in mongod reads the values in the index and removes expired documents from the collection (usually every minute).

For example, to create a TTL index on the lastModifiedDate field of the eventlog collection, use the following operation in the mongo shell:

db.eventlog.createIndex( { "lastModifiedDate": 1 }, { expireAfterSeconds: 3600 } )

The indexed field must be BSON date type or an array of BSON dates
If the indexed field in a document is not a date or an array that holds a date value(s), the document will not expire.
If a document does not contain the indexed field, the document will not expire.

Conditional delete

As of MongoDB 3.2, a collection can be partially indexed using a specified filter expression, partialFilterExpression. TTL index can also be used with partial indexes.

For example:

Delete documents that created 1 hour ago and their state is TMP

db.eventlog.createIndex(
  { created_at: 1 },
  { expireAfterSeconds: 3600, partialFilterExpression: { state: 'TMP' } }
);

Delete documents that created 1 day ago and their count is lower than 5

db.eventlog.createIndex(
  { created_at: 1 },
  { expireAfterSeconds: 86400, partialFilterExpression: { count: { $lt: 5 } } }
);

Additional info on partial indexes

Real world example

Recently I finished developing BundleMon, which is a free tool that helps you monitor your apps bundle size.

One of the components in BundleMon is a service that saves historic reports in order to compare bundle size between branches, So when you open a PR BundleMon saves a record with the current bundle size report.

No need to save the report more than 30 days, so I just added a TTL index:

db.reports.createIndex(
  { creationDate: 1 },
  { expireAfterSeconds: 2592000, partialFilterExpression: { prNumber: { $exists: true } } }
);

Cypress HTML reports with screenshots made easy

LironEr — Fri, 24 Apr 2020 10:03:36 +0000

TL;DR install cypress-mochawesome-reporter to easily generate Cypress HTML report with screenshots attached to failed tests.

4 June 2022: Post updated to be compatible with cypress v10

28 March 2021: Post updated to the latest (v2) cypress-mochawesome-reporter version

The problem

If you ran Cypress with cypress run command and one / many of your tests failed you will get an error message like this:

then you're going to need to scroll up until you find all your errors and try to understand what went wrong 😟

wouldn't it be great to see the report on a website? 🤔

Introducing cypress-mochawesome-reporter

A zero-config Mochawesome reporter for Cypress with screenshots attached to failed tests.

With a few simple steps, you will get a report that you can read easily on a website.

If you are using cypress < 10.0.0 you can use older version of this reporter, read here for more info

Step 1: install cypress-mochawesome-reporter

npm i --save-dev cypress-mochawesome-reporter
yarn add -D cypress-mochawesome-reporter

Step 2: Change cypress reporter & setup hooks

Edit config file (cypress.config.js by default)

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
});

Step 3: Add to cypress/support/e2e.js

import 'cypress-mochawesome-reporter/register';

Run Cypress

That's it! 🎉🎉

For more info & different setup options go to GitHub repo

Only keep reading if you want to find out what this library encapsulates 🤓

Generating an HTML report

Adding Mochawesome reporter to Cypress will generate a website with the test report.

Installation steps in general:

install mochawesome, mochawesome-merge and mochawesome-report-generator.
config Mochawesome reporter.
merge Mochawesome reports into one JSON file.
generate an HTML report based on that file.

Add screenshots to the report

When a test fails Cypress saves a screenshot in cypress/screenshots folder, so we are going to need to add the screenshot for each failed test.

listen for test:after:run .
calculate the path of the screenshot.
call the addContext method from Mochawesome.

A more detailed tutorial of how to do these steps manually can be found here

Hope you find it helpful (: