Get started by signing up at perfyll.com and create your account
Perfyll is a lightweight JavaScript library designed to empower developers in tracking performance and user actions from an end-to-end (E2E) perspective. This library allows you to seamlessly gather and display performance data either on the cloud platform perfyll.com or for local debugging purposes.
To start using Perfyll, run the follow command on terminal:
npm install --save perfyll
or
yarn add perfyll
Must be included in the the root of the project, you can access your apikeys here
import { init } from "perfyll";
init({
publicKey: "<publicKey>",
// secret must be provided only in the server environment
secret: "<secret>",
});
import { init, log } from "perfyll";
init({ publicKey: "<publicKey>" });
function myFunction() {
log("My Log Example", { myExtraArg: 1 });
}
import { init, logError } from "perfyll";
init({ publicKey: "<publicKey>" });
function myFunction() {
logError(new Error("My Error"), { myExtraArg: 1 });
}
import { init, mark } from "perfyll";
init({ publicKey: "<publicKey>" });
export default function MyComponent() {
function onCheckoutButtonClicked() {
mark("checkoutButtonClicked", {extra: {buttonColor: "blue"}}).send()
}
return ...
}
Simple example
import { startMark, endMark, init } from "perfyll";
init({ publicKey: "<publicKey>" });
async function onProductClicked() {
const registerUser = async () => {
startMark("productClick");
// ...
endMark("productClick").send();
};
}
Example with subMark
import { startMark, endMark, init } from "perfyll";
init({ publicKey: "<publicKey>", secret: "<secret>" });
async function myApiRoute() {
const databaseQuery = async () => {
startMark("databaseQuery");
// ...
endMark("databaseQuery");
};
const registerUser = async () => {
startMark("registerUser");
// ...
await databaseQuery();
// ...
endMark("registerUser").send(["databaseQuery"]);
};
await registerUser();
}
import { init, startMarkAsync, endMarkAsync } from "perfyll";
init(...)
const sendEmail = async () => {
// ...
};
async function myApiRoute() {
const ref = startMarkAsync("sendEmail");
// ...
sendEmail().finally(() => endMarkAsync(ref));
}
Tracking performance in an end to end transaction (client and server).
// In Your Client Component
import { init, getHeaders, startMark, endMark } from "@/lib/perfyll";
init({publicKey: "..."})
export function MyCompoennt() {
...
const onSubmit = () => {
startMark("registerUserRequest");
fetch(
"/api/<resource>",
{headers: getHeaders("registerUserRequest")}
).finally(
() => endMark("registerUserRequest").send([])
);
}
}
// In Your Server
import { init, startMark, endMark } from "@/lib/perfyll";
init({publicKey: "...", secret: '...'})
export function reqisterUserApiRoute(req: Request) {
startMark("reqisterUserRoute", {headers: req.headers});
...
endMark("registerUserRequest").send([]);
}
You can pass extra properties to your marks:
// In Your Client Component
import { init, startMark, endMark } from "@/lib/perfyll";
init({publicKey: "..."})
export function MyCompoennt() {
...
const onClickHandler = () => {
startMark("productClick", {extra: {productType: "TV"}});
...
endMark("productClick").send([])
}
}
When initializing perfyll with the attribute logTimeline
true, a graphical timeline is displayed in the terminal. (Use this in the DEV environment only!)
init({
publicKey: "<publicKey>",
logTimeline: true,
});
Examples of output