Production Monitoring

Monitoring the screenly/chrome-extension in a production environment can be accomplished through a combination of Docker, webpack, and test automation frameworks. This documentation outlines the necessary steps and code snippets pertinent to ensuring that the application remains functional and efficient.

Step 1: Docker Environment Setup

Docker provides a consistent environment for running the application. The Dockerfile contains all the necessary instructions to set up the environment in which the app runs.

FROM node:22

WORKDIR /app
RUN mkdir -p /output
RUN chmod -R 777 /output

RUN apt-get update --fix-missing \
    && apt-get install -y \
        ca-certificates \
        fonts-liberation \
        gconf-service \
        libappindicator1 \
        libasound2 \
        libatk1.0-0 \
        libc6 \
        libcairo2 \
        libcups2 \
        libdbus-1-3 \
        libexpat1 \
        libfontconfig1 \
        libgcc1 \
        libgconf-2-4 \
        libgdk-pixbuf2.0-0 \
        libglib2.0-0 \
        libgtk-3-0 \
        libnspr4 \
        libnss3 \
        libpango-1.0-0 \
        libpangocairo-1.0-0 \
        libstdc++6 \
        libx11-6 \
        libx11-xcb1 \
        libxcb1 \
        libxcomposite1 \
        libxcursor1 \
        libxdamage1 \
        libxext6 \
        libxfixes3 \
        libxi6 \
        libxrandr2 \
        libxrender1 \
        libxss1 \
        libxtst6 \
    && rm -rf /var/lib/apt/lists/*
    
ADD package.json /app/package.json
ADD package-lock.json /app/package-lock.json
RUN npm install --quiet

ADD . /app

Step 2: Continuous Integration with Docker Compose

Using docker-compose.yml, set up a service that utilizes webpack for building and monitoring the application. The service will watch for any code changes automatically.

services:
  webpack:
    build: .
    command: npx webpack --watch --config webpack.dev.js
    image: sce_webpack:latest
    volumes:
      - .:/app:delegated
      - /app/node_modules/  # exclude from volume mount; we want this inside the container
    environment:
      - JEKYLL_ENV=development

Step 3: Test Automation

Monitoring includes testing the application’s integrity. A testing script should be created to validate that the application behaves correctly. The following is a script for running tests using Docker:

#!/usr/bin/env bash

set -euo pipefail

docker compose build
docker run \
    --rm -ti \
    -v $(pwd):/app:delegated \
    -v /app/node_modules \
    sce_webpack:latest \
    /bin/bash -c "npx webpack --config webpack.dev.js && npm test"

Step 4: Mocking Browser Storage

During testing, it is essential to mock the browser’s storage to verify that the application interacts properly with it. Below is an example of StateMocker, which stubs browser storage methods.

class StateMocker {
    constructor() {
        if (!window.browser) {
            window.browser = {
                storage: {
                    sync: {
                        set: () => {},
                        get: () => {},
                        remove: () => {},
                    }
                }
            }
        }

        this.fakeStorage = {};
        this.nextFailure = null;

        spyOn(browser.storage.sync, 'set').and.callFake(d => {
            if (this.nextFailure) {
                const theFailure = this.nextFailure;
                this.nextFailure = null;
                return Promise.reject(new Error(theFailure));
            }
            for (const [key, value] of Object.entries(d)) {
                this.fakeStorage[key] = value;
            }
            return Promise.resolve();
        });

        spyOn(browser.storage.sync, 'get').and.callFake(keys => {
            if (typeof keys == "string") {
                return Promise.resolve({keys: this.fakeStorage[keys]});
            }
            if (Array.isArray(keys)) {
                let r = {};
                for (const key of keys) {
                    r[key] = this.fakeStorage[key];
                }
                return Promise.resolve(r);
            }
            throw "Unimplemented";
        });

        spyOn(browser.storage.sync, 'remove').and.callFake(keys => {
            if (typeof keys == "string") {
                delete this.fakeStorage[keys];
                return Promise.resolve();
            }
            if (Array.isArray(keys)) {
                for (const key of keys) {
                    delete this.fakeStorage[key];
                }
                return Promise.resolve();
            }
        });
    }

    setNextFailure(aFailure) {
        this.nextFailure = aFailure;
    }
}

Step 5: Release Management

For version control and release management, ensure to follow the steps documented in the README to create a new release tag in Git, draft a release in GitHub, and verify that the package is generated correctly using the CLI.

$ git pull
$ git checkout master
$ git tag
$ git tag -a vX.Y.Z -m "tl;dr changelog."
$ git push origin vX.Y.Z

Conclusion

These steps outline a robust strategy for monitoring the screenly/chrome-extension in a production environment effectively. Utilizing Docker, continuous integration, and automated testing ensures that the application remains stable, efficient, and ready for deployment.

Source:

• Code snippets and configuration details derived from the Dockerfile, docker-compose.yml, and JavaScript test utilities in the project files.