• Stars
    star
    228
  • Rank 175,267 (Top 4 %)
  • Language
    Elixir
  • License
    MIT License
  • Created almost 3 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flame Graph LiveView Component and LiveDashboard plugin

Flame On

Flame On - Phoenix LiveDashboard

Add Flame Graphs to your Phoenix Application or LiveDashboard

Getting Started

For more information on flame graphs and an introduction to Flame On, see the announcement blog post

Installation

Add :flame_on to your dependencies:

def deps do
  [
    {:flame_on, "~> 0.5.2"}
  ]
end

And then add Flame On as a LiveDashboard page or a LiveComponent in your LiveView page

Flame On as a LiveDashboard page

Modify the live_dashboard call in your Router:

live_dashboard "/dashboard",
  metrics: MyAppWeb.Telemetry,
  additional_pages: [
    flame_on: FlameOn.DashboardPage
  ]

You will now find a Flame On tab along the top of the LiveDashboard page

Flame On as a LiveComponent in your own LiveView page

<.live_component module={FlameOn.Component} id="flame_on" width="100%" height="100%" />

Usage

Choose the Module, Function, and Arity of the function you want to profile, click "Flame On", and then trigger the function (e.g. make a web request in a new tab). Note that for Elixir modules, you will need to prefix them with Elixir, e.g. Elixir.Phoenix.Controller, while Erlang modules take simply the erlang module name, e.g. cowboy_handler. The default values of cowboy_handler/execute/2 are the best way to capture a standard Phoenix Controller DeadView request or the DeadView request that kicks off a LiveView request.

Zooming

Clicking a block will zoom the flamegraph to that block and recalculate the percents for the blocks such that the clicked block is now 100%. You can return to a higher level block by clicking the link for it above the blocks.

Running in Production

Flame On should not be run in critical production environments. Flame On uses :meck under the hood. This swaps out beam code paths and injects mock code that includes tracing. If you do need to use Flame On in a critical production node to diagnose a specific issue, I recommend rebuilding or restarting that node after running it.

Running in a Release

:meck swaps out code paths and therefore you will need to include the beam files in your release. By default these are stripped, so in your release definition in mix.exs add the strip_beams: false flag:

releases: [
  my_app_web: [
    ...
    strip_beams: false
  ],

You may also need to explicitly include :meck as a dependency if it can't find it when trying to run in a release.

Credit

Credit to eFlambe for being the original capture engine used by Flame On and the inspiration for the current capture engine.

Authors

We are very thankful for the many contributors

Versioning

This library follows Semantic Versioning

Looking for help with your Elixir project?

At DockYard we are ready to help you build your next Elixir project. We have a unique expertise in Elixir and Phoenix development that is unmatched. Get in touch!

At DockYard we love Elixir! You can read our Elixir blog posts

Legal

DockYard, Inc. © 2022

@DockYard

Licensed under the MIT license

More Repositories

1

ember-composable-helpers

Composable helpers for declarative templating in Ember
JavaScript
636
star
2

elixir-mail

Build composable mail messages
Elixir
386
star
3

ember-route-action-helper

Bubble closure actions in routes
JavaScript
330
star
4

ember-in-viewport

Detect if an Ember View or Component is in the viewport @ 60FPS
JavaScript
246
star
5

ember-admin

Admin backend for ember-cli projects
JavaScript
241
star
6

ember-service-worker

A pluggable approach to Service Workers for Ember.js
JavaScript
238
star
7

ember-router-scroll

🗔 Scroll to top with preserved browser history scroll position.
JavaScript
204
star
8

ember-async-button

Async Button Component for Ember CLI apps
JavaScript
173
star
9

inquisitor

Composable query builder for Ecto
Elixir
170
star
10

ecto_fixtures

Fixtures for Elixir apps
Elixir
168
star
11

openid_connect

Elixir
66
star
12

eslint-plugin-ember-suave

DockYard's ESLint plugin for Ember apps
JavaScript
53
star
13

courier

Elixir
53
star
14

ember-cart

Shopping cart primitives for Ember
JavaScript
53
star
15

valid_field

Elixir
48
star
16

rein

Reinforcement Learning tooling built with Nx
Elixir
42
star
17

json_api_assert

Composable assertions for JSON API payload
Elixir
38
star
18

live_view_demo

Forkable repo for entries in Phoenix Phrenzy (https://phoenixphrenzy.com/)
Elixir
35
star
19

ember-service-worker-asset-cache

JavaScript
28
star
20

svelte-inline-compile

JavaScript
27
star
21

ember-cli-custom-assertions

Add custom QUnit assertions to your ember-cli test suite
JavaScript
26
star
22

ember-app-shell

JavaScript
24
star
23

easing

Elixir
22
star
24

design-sprints

HTML
22
star
25

ember-i18n-to-intl-migrator

Migrate ember-i18n to ember-intl
JavaScript
21
star
26

ember-service-worker-index

An Ember Service Worker plugin that caches the index.html file
JavaScript
20
star
27

ember-cli-deploy-compress

Compress your assets automatically choosing the best compression available for your browser targets
JavaScript
18
star
28

laptop-install

Shell
17
star
29

narwin-pack

Package of PostCSS plugins DockYard utilizes for PostCSS based projects!
JavaScript
16
star
30

ember-maybe-in-element

Conditionally render content elsewhere using #-in-element on ember apps
JavaScript
15
star
31

ember-service-worker-cache-fallback

JavaScript
15
star
32

inquisitor_jsonapi

JSON API Matchers for Inquisitor
Elixir
14
star
33

ember-one-way-select

JavaScript
10
star
34

svelte-inline-component

Utility and vite plugin to allow to create your own inline svelte components in tests
JavaScript
9
star
35

live_view_events

A simple library to unify sending and receiving messages in LiveView components
JavaScript
8
star
36

disklavier

Elixir
8
star
37

canon

All the must-read articles and must-watch videos for the DockYard engineering team.
8
star
38

plausible_proxy

An Elixir Plug to proxy calls to Plausible through your server
Elixir
7
star
39

netcdf

Elixir NetCDF Bindings
Rust
7
star
40

ember-service-worker-cache-first

JavaScript
7
star
41

qunit-notifications

Web Notifications support for QUnit in-browser test suites
JavaScript
6
star
42

auth_test_support

Authentication and authorization test functions
Elixir
4
star
43

broccoli-json-concat

JavaScript
3
star
44

boat-tracker

Elixir
3
star
45

ember-load-css

Ember CLI wrapper for loadCSS
JavaScript
3
star
46

drive-in-privacy-policy

2
star
47

boston_elixir

LiveView Native Workshop for Boston Elixir
Elixir
2
star
48

ketch

Simple proof-of-concept web application built with Next.js, Storybook, and Firebase.
JavaScript
1
star
49

courier_web

JavaScript
1
star
50

stylelint-config-narwin

DockYard stylelint configuration
JavaScript
1
star
51

liveview_tailwind_demo

Demo showing TailWind 3 integration in a Phoenix LiveView project
Elixir
1
star
52

ember-qunit-notifications

tomster-ified qunit-notifications
1
star
53

formation

Example of Phoenix LiveView Form logic
Elixir
1
star