**An Elixir based built-in error tracking solution.**
ErrorTracker captures errors in your application and stores them in the database. It also provides a web dashboard from where you can find, inspect and resolve captured errors.
**Does it send notifications or integrate with issue trackers?**
ErrorTrackers's goal is to track errors. Period. It provides a nice Telemetry integration that you can attach to and use to send notifications, open tickets in your issue tracker and whatnot.
**Why another error tracker?**
While there are multiple SaaS error trackers available, this is the only Elixir-native built-in error tracker that runs as part of your application. It gives you full control over where, how and what data is stored so it is always on your control and doesn't leave your system.\
You can see a more detailed explanation [here](https://crbelaus.com/2024/07/31/built-in-elixir-error-reporting-tracking).
## Configuration
Take a look at the [Getting Started](/guides/Getting%20Started.md) guide.
## Development
### Initial setup and dependencies
If this is the first time that you set up this project you will to generate the configuration files and adapt their content to your local environment:
```
cp config/dev.example.exs config/dev.exs
cp config/test.example.exs config/test.exs
```
Then, you will need to download the dependencies:
```
mix deps.get
```
### Assets
In order to participate in the development of this project, you may need to know how to compile the assets needed to use the Web UI.
To do so, you need to first make a clean build:
```
mix do assets.install, assets.build
```
That task will build the JS and CSS of the project.
The JS is not expected to change too much because we rely in LiveView, but if
you make any change just execute that command again and you are good to go.
In the case of CSS, as it is automatically generated by Tailwind, you need to
start the watcher when your intention is to modify the classes used.
To do so you can execute this task in a separate terminal:
```
mix assets.watch
```
### Development server
We have a `dev.exs` script based on [Phoenix Playground](https://github.com/phoenix-playground/phoenix_playground) that starts a development server.
```
iex dev.exs
```
================================================
FILE: assets/css/app.css
================================================
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
::-webkit-scrollbar {
height: 6px;
width: 6px;
@apply bg-gray-300;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-500;
border-radius: 4px;
}
================================================
FILE: assets/js/app.js
================================================
// Phoenix assets are imported from dependencies.
import topbar from "topbar";
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let livePath = document.querySelector("meta[name='live-path']").getAttribute("content");
let liveTransport = document .querySelector("meta[name='live-transport']") .getAttribute("content");
const Hooks = {
JsonPrettyPrint: {
mounted() {
this.formatJson();
},
updated() {
this.formatJson();
},
formatJson() {
try {
// Get the raw JSON content
const rawJson = this.el.textContent.trim();
// Parse and stringify with indentation
const formattedJson = JSON.stringify(JSON.parse(rawJson), null, 2);
// Update the element content
this.el.textContent = formattedJson;
} catch (error) {
console.error("Error formatting JSON:", error);
// Keep the original content if there's an error
}
}
}
};
let liveSocket = new LiveView.LiveSocket(livePath, Phoenix.Socket, {
transport: liveTransport === "longpoll" ? Phoenix.LongPoll : WebSocket,
params: { _csrf_token: csrfToken },
hooks: Hooks
});
// Show progress bar on live navigation and form submits
topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
// connect if there are any LiveViews on the page
liveSocket.connect();
window.liveSocket = liveSocket;
================================================
FILE: assets/package.json
================================================
{
"workspaces": [
"../deps/*"
],
"dependencies": {
"phoenix": "workspace:*",
"phoenix_live_view": "workspace:*",
"topbar": "^3.0.0"
}
}
================================================
FILE: assets/tailwind.config.js
================================================
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
let plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./js/**/*.js',
'../lib/error_tracker/web.ex',
'../lib/error_tracker/web/**/*.*ex'
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
]
}
================================================
FILE: config/config.exs
================================================
import Config
import_config "#{config_env()}.exs"
================================================
FILE: config/dev.example.exs
================================================
import Config
config :bun,
version: "1.1.18",
default: [
args: ~w(build app.js --outdir=../../priv/static),
cd: Path.expand("../assets/js", __DIR__),
env: %{}
]
# MySQL/MariaDB adapter
#
# To use MySQL/MariaDB on your local development machine uncomment these lines and
# comment the lines of other adapters.
#
# config :error_tracker, :ecto_adapter, :mysql
#
# config :error_tracker, ErrorTrackerDev.Repo,
# url: "ecto://root:root@127.0.0.1/error_tracker_dev"
#
# SQLite3 adapter
#
# To use SQLite3 on your local development machine uncomment these lines and
# comment the lines of other adapters.
#
# config :error_tracker, :ecto_adapter, :sqlite3
#
# config :error_tracker, ErrorTrackerDev.Repo,
# database: System.get_env("SQLITE_DB") || "dev.db"
#
# PostgreSQL adapter
#
# To use PostgreSQL on your local development machine uncomment these lines and
# comment the lines of other adapters.
config :error_tracker, ErrorTrackerDev.Repo, url: "ecto://postgres:postgres@127.0.0.1/error_tracker_dev"
config :error_tracker, :ecto_adapter, :postgres
config :tailwind,
version: "3.4.3",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/app.css
),
cd: Path.expand("../assets", __DIR__)
]
================================================
FILE: config/test.example.exs
================================================
import Config
alias Ecto.Adapters.SQL.Sandbox
alias ErrorTracker.Test.Repo
config :error_tracker, ErrorTracker.Test.LiteRepo,
database: "priv/lite_repo/test.db",
pool: Sandbox,
log: false,
# Use the same migrations as the PostgreSQL repo
priv: "priv/repo"
config :error_tracker, ErrorTracker.Test.MySQLRepo,
url: "ecto://root:root@127.0.0.1/error_tracker_test",
pool: Sandbox,
log: false,
# Use the same migrations as the PostgreSQL repo
priv: "priv/repo"
config :error_tracker, Repo,
url: "ecto://postgres:postgres@127.0.0.1/error_tracker_test",
pool: Sandbox,
log: false
config :error_tracker, ecto_repos: [Repo]
# Repo is selected in the test_helper.exs based on the given ENV vars
config :error_tracker, otp_app: :error_tracker
================================================
FILE: dev.exs
================================================
# This is the development server for Errortracker built on the PhoenixLiveDashboard project.
# To start the development server run:
# $ iex dev.exs
#
Mix.install([
{:ecto_sqlite3, ">= 0.0.0"},
{:error_tracker, path: ".", force: true},
{:phoenix_playground, "~> 0.1.8"}
])
otp_app = :error_tracker_dev
Application.put_all_env(
error_tracker_dev: [
{ErrorTrackerDev.Repo, [database: "priv/repo/dev.db"]}
],
error_tracker: [
{:application, otp_app},
{:otp_app, otp_app},
{:repo, ErrorTrackerDev.Repo}
]
)
defmodule ErrorTrackerDev.Repo do
use Ecto.Repo, otp_app: otp_app, adapter: Ecto.Adapters.SQLite3
require Logger
defmodule Migration do
@moduledoc false
use Ecto.Migration
def up, do: ErrorTracker.Migration.up()
def down, do: ErrorTracker.Migration.down()
end
def migrate do
Ecto.Migrator.run(__MODULE__, [{0, __MODULE__.Migration}], :up, all: true)
end
end
defmodule ErrorTrackerDev.Controller do
use Phoenix.Controller, formats: [:html]
use Phoenix.Component
plug :put_layout, false
plug :put_view, __MODULE__
def index(conn, _params) do
render(conn)
end
def index(assigns) do
~H"""
Errors are stored in the priv/repo/dev.db
database, which is automatically created by this script.
If you want to clear the state stop the script, run the following command and start it again.
rm priv/repo/dev.db priv/repo/dev.db-shm priv/repo/dev.db-wal
| Error | Occurrences | Status | |
|---|---|---|---|
| No errors to show 🎉 | |||
|
<.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
({sanitize_module(error.kind)}) {error.reason}
({sanitize_module(error.kind)}) {error.reason}
{sanitize_module(error.source_function)}
|
Last: {format_datetime(error.last_occurrence_at)} Total: {@occurrences[error.id]} |
<.badge :if={error.status == :resolved} color={:green}>Resolved <.badge :if={error.status == :unresolved} color={:red}>Unresolved |
<.button
:if={error.status == :unresolved}
phx-click="resolve"
phx-value-error_id={error.id}
>
Resolve
<.button
:if={error.status == :resolved}
phx-click="unresolve"
phx-value-error_id={error.id}
>
Unresolve
<.button :if={!error.muted} phx-click="mute" type="link" phx-value-error_id={error.id}>
<.icon name="bell-slash" /> Mute
<.button
:if={error.muted}
phx-click="unmute"
type="link"
phx-value-error_id={error.id}
>
<.icon name="bell" /> Unmute
|
Error #{@error.id} @ {format_datetime(@occurrence.inserted_at)}
<%= @occurrence.reason %><.section :if={ErrorTracker.Error.has_source_info?(@error)} title="Source">
<%= sanitize_module(@error.source_function) %>
<%= @error.source_line %>
<.section :if={@occurrence.breadcrumbs != []} title="Bread crumbs">
| {length(@occurrence.breadcrumbs) - index}. | {breadcrumb} |
(<%= line.application || @app %>) |
<%= "#{sanitize_module(line.module)}.#{line.function}/#{line.arity}" %>
<%= if line.line, do: "#{line.file}:#{line.line}", else: "(nofile)" %>
|
<%= ErrorTracker.__default_json_encoder__().encode_to_iodata!(@occurrence.context) %>
<%= sanitize_module(@error.kind) %><.section title="Last seen">
<%= format_datetime(@error.last_occurrence_at) %><.section title="First seen">
<%= format_datetime(@error.inserted_at) %><.section title="Status" title_class="mb-3"> <.badge :if={@error.status == :resolved} color={:green}>Resolved <.badge :if={@error.status == :unresolved} color={:red}>Unresolved <.section>