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 perfyllor
yarn add perfyllMust be included in the the root of the project, you can access your apikeys here
import { init } from "perfyll";
init({ publicKey: "<publicKey>" });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>" });
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({ publicKey: "<publicKey>" });
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 "perfyll";
init({ publicKey: "<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 "perfyll";
init({publicKey: "..."})
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 "perfyll";
init({publicKey: "..."})
export function MyCompoennt() {
...
const onClickHandler = () => {
startMark("productClick", {extra: {productType: "TV"}});
...
endMark("productClick").send([])
}
}You should set to true when in a serverless backend environment, because by default perfyll tries to use websocket in the backend environment.
You can name your service in your backend environment.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent