Giter VIP home page Giter VIP logo

mirego / telemetry_ui Goto Github PK

View Code? Open in Web Editor NEW
116.0 29.0 2.0 983 KB

Telemetry based metrics UI. Take your telemetry metrics and display them in a web page.

Home Page: https://hexdocs.pm/telemetry_ui

License: BSD 3-Clause "New" or "Revised" License

Elixir 86.71% Makefile 1.25% CSS 1.68% JavaScript 0.26% TypeScript 5.70% HTML 4.39%
elixir elixir-ecto plug telemetry phoenix tailwindcss dashboard metrics telemetry-viewer ecto monitoring

telemetry_ui's Issues

JS error after upgrading 0.0.18 to 1.1.3

Hi, after upgrading to 1.1.3 I'm getting this JS error, both in Firefox and Google Chrome, and the charts don't render:

Captura de pantalla 2022-12-02 a las 19 30 46

Uncaught SyntaxError: missing ) after argument list
metrics:108 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:108:12)
metrics:147 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:147:12)
metrics:186 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:186:12)
metrics:225 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:225:12)
metrics:264 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:264:12)
metrics:303 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:303:12)
metrics:342 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:342:12)
metrics:381 Uncaught TypeError: window.drawChart is not a function
    at HTMLDocument.<anonymous> (metrics:381:12)

We're on phoenix 1.6.12 and phoenix_live_view 0.18.2

Crash with Ecto telemetry for repo.query.queue_time

Hi!

In the Live Dashboard I have these metrics and they work fine:

      # Database Time Metrics
      summary("myapp.repo.query.total_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.decode_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.query_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.queue_time", unit: {:native, :millisecond}),
      summary("myapp.repo.query.idle_time", unit: {:native, :millisecond}),

However, if I try to add them to Telemetry UI like this:

value_over_time(
          "myapp.repo.query.total_time",
          description: "Repo Query Queue Time",
          unit: {:native, :millisecond},
          ui_options: [unit: " ms"]
        )

It crashes with:

** (ArithmeticError) bad argument in arithmetic expression
    :erlang.+(nil, 0.716)
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:85: anonymous fn/2 in TelemetryUI.WriteBuffer.group_events/2
    (elixir 1.13.4) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:85: anonymous fn/2 in TelemetryUI.WriteBuffer.group_events/2
    (stdlib 3.14.2.2) maps.erl:233: :maps.fold_1/3
    (telemetry_ui 0.0.18) lib/telemetry_ui/write_buffer.ex:72: TelemetryUI.WriteBuffer.do_flush/2
    (stdlib 3.14.2.2) gen_server.erl:727: :gen_server.try_terminate/3
    (stdlib 3.14.2.2) gen_server.erl:912: :gen_server.terminate/10
    (stdlib 3.14.2.2) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

This is failing both with queue_time and decode_time, but works fine with total_time and query_time.

Any idea why this may be failing and how to fix that?

Thanks!

Examples on adding new metrics

Hi! Thanks for buidling this!

It's been super easy to install and display the initial metrics, but I'm new to Telemetry and it's not clear to me how I could add more metrics to the UI.

Could you please provide more examples? How can I for example visualize the number of completed Oban jobs?

What about a custom metric, say, number of total users in the app, or duration of a given function?

I'm sure I'll eventually find it out as I learn about Telemetry but maybe you could add some simple examples to the documentation? I'm a bit confused as I already have phoenix_live_dashboard set up so I'm not sure how telemetry_uirelates to it.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.