<img src="https://user-images.githubusercontent.com/347490/104764662-b5358980-5735-11eb-8ef8-7058b6be43da.png" width="89" height="32">

# Storybook Addon Web Vitals

Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the [web-vitals](https://github.com/GoogleChrome/web-vitals).

We report on INP, CLS, and LCP.

![React Storybook Screenshot](https://user-images.githubusercontent.com/347490/104764861-f9288e80-5735-11eb-9198-14de8a066a40.png)

## Getting Started

Requires Storybook 8

First, install the addon

```sh
npm i -D @washingtonpost/storybook-addon-web-vitals
```

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):

```js
module.exports = {
  addons: ["@washingtonpost/storybook-addon-web-vitals"],
};
```

### Usage

See toolbar for feedback on INP, CLS and LCP

CLS changes will highlight offending elements based on results from web-vitals

New results are logged to the console as they come in to provide the full data object from web-vitals


See how your component fairs according to web vitals. 

Introducing Reports: An Extensible Reporting Framework for Socket Data

@washingtonpost/storybook-addon-web-vitals

See how your component fairs according to web vitals

luke.connors

wrneff

mcdoh

floresa

lavanderoi

taliatrackim

tomkaz-wapo

aggyjlee

emmakumer

vonoehsene

ani512

lennybronner

ln-washpost

jorgemhc-dev

sabrinamochi

seanwapo

lorenzog

jchaskell

davidchaiwapo

agillespie

martinezy

tam.steph

colemanc4

luciovilla

ducroquet

threeteaspoons

maddoxnelson

stephanie.clark

jasonvuong

jkoo87

kankelcr

gregoryauld2014

uncompiled

jbrown4

scarothers

khan.salauddin

rowhawn

subs-npm-builder

nealhumphreywapo

ashlynstill

ptnielsen

leslie-s

courtney-kan

kevin.schaul

jakecrump

macallah

jmuyskens

madisonwalls

dsantamarina

artmsilva

ashtol

sberhanu

jjalcantara

alyssa.fowers

joemfox

calcantara

adrianblanco

chiquiesteban

iuraizee

bdgross

dankeating

timmeko

kevinuhrmacher

shellytan

chrisrukan

allisonnmann

aaronsteckelberg

carsonology

shruthagandla

braforda

fernandowz

adityajain15

linorabolini

anthonyjpesce

1313davidlee

kate.rabinowitz

fontc

cecepascual

yuyanlei

vsingarayar

aramzs

ruxk

nader_heidari

thompsond3

tylerremmel

tmac0201

mahig

joemoore-post

ealvarez79

hdormido

yutaochen

nwalker_wp

apbest

briannaschroer

shikha-sub

naema

chloemeister

julia.ledur

solomonsscott

betchavarria

meganwalter

storybook-addon-web-vitals

An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes content scripts that execute JavaScript on specified websites.

What are Chrome extension content scripts?

Chrome: Content Script

This Chrome extension requests host permissions to access specific websites or domains.

What are Chrome extension host permissions?

Chrome: Host Permission

This Chrome extension requests permissions to access browser APIs, user data, or system features.

What are Chrome extension permissions?

Chrome: Permission

This Chrome extension requests wildcard host permissions that grant broad access to websites.

What are Chrome extension wildcard host permissions?

Chrome: Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Generic ad-hoc alert, uploaded by user or produced by system diagnostics

Alert title

Generic alert

An input argument to this GitHub Action is being exported as an environment variable. If a user of this action passes untrusted input, it could be used in an insecure manner by subsequent workflow steps.

What are GitHub Actions taint flows?

GitHub Actions: Input argument exported as environment variable

An input argument to this GitHub Action is being passed back as an output. If a user of this action passes untrusted input, it could be used in an insecure manner by consuming workflows.

GitHub Actions: Input argument passed back as output

An input argument to this GitHub Action flows into a dangerous sink (such as shell command execution). This could allow a malicious user to inject commands or exploit the action.

GitHub Actions: Input argument flows to dangerous sink

@washingtonpost/storybook-addon-web-vitals

Storybook Addon Web Vitals

Getting Started

Usage

Keywords

Related posts

@washingtonpost/storybook-addon-web-vitals

Storybook Addon Web Vitals

Getting Started

Usage

Keywords

Related posts

Introducing Reports: An Extensible Reporting Framework for Socket Data

Socket for Jira Is Now Available