Code Monkey home page Code Monkey logo

openpanel's Introduction

hero

Openpanel

An open-source alternative to Mixpanel

Website · Docs · Sign in · Discord · X/Twitter ·



Openpanel is a simple analytics tool for logging events on web, apps and backend. We have tried to combine Mixpanel and Plausible in the same product.

  • Visualize your data
    • Charts
      • Funnels
      • Line
      • Bar
      • Pie
      • Histogram
      • Maps
    • Breakdown on all properties
    • Advanced filters on all properties
    • Create beautiful dashboards with your charts
    • Access all your events
    • Access all your visitors and there history
  • Own Your Own Data
  • GDPR Compliant
  • Cloud or Self-Hosting
  • Real-Time Events
  • No cookies!
  • Privacy friendly
  • Cost-Effective
  • Predictable pricing
  • First Class React Native Support
  • Powerful Export API

Disclaimer

Hey folks 👋🏻 Just a friendly heads-up: we're still in the early stages of this project. We have migrated from pages to app dir and made some major changes during the development of Openpanel, so everything is not perfect.

Stack

  • Nextjs - the dashboard
  • Fastify - event api
  • Postgres - storing basic information
  • Clickhouse - storing events
  • Redis - cache layer, pub/sub and queue

More

  • Tailwind
  • Shadcn
  • tRPC - will probably migrate this to server actions
  • Clerk - for authentication

Self-hosting

OpenPanel can be self-hosted and we have tried to make it as simple as possible.

You can find the how to here

Give us a star if you like it!

Star History Chart

openpanel's People

Contributors

lindesvard avatar than-de avatar davidsoderberg avatar

Stargazers

 avatar Nicolò Santilio avatar  avatar Munjal Dhamecha avatar wuxiao avatar Adam W. Koszek avatar Daniel Bodnar avatar  avatar Rodrigo Weilg avatar Jason Morganson avatar  avatar Wilson avatar Ian L. avatar Daniel J avatar Fabio Dias Rollo avatar Hari K T avatar Ethan Blumenthal avatar Yash Dewasthale avatar Tsotne Nazarashvili avatar Ananda Umamil avatar Dominic Seitz avatar Stanislav avatar Carlos avatar g@bi avatar Gagandeep Singh avatar Mihir Desai avatar 兰天游 avatar vffuunnyy avatar Yukai Huang avatar  avatar Ilya Klimenko avatar Tony avatar Will Wen Gunn avatar MarcShawn avatar Jesus Pacheco avatar Toni Petrina avatar Alexandre Severo avatar James Holcomb avatar Tosin Shada avatar Milán Terhes avatar ANTOND. avatar Alvin Scheibe avatar Ace avatar Jesús Ferretti avatar Mark Rady avatar nixuan avatar  avatar Stanisław Synowiec avatar  avatar Satyanarayan Bhanja avatar  avatar Dima Ilin avatar  avatar Kishan Parmar avatar Edgars Burtnieks avatar Dan Conger avatar Farid Nizam avatar Nuriman Quddus avatar Neeraj Dalal avatar hillkim avatar Andrey avatar Benzer avatar Youssef avatar Mada Aryakusumah avatar Isaac Mayolas avatar Anirudh avatar seiko avatar Viet avatar  avatar Max avatar AhmedKaram avatar Deer404 avatar mylo avatar Greg Hodson avatar  avatar Jason Dugdale avatar Théo Pomies avatar Austin avatar Akram avatar Toppawar avatar Shalva Gegia avatar Ayao Corneille ALLOGBALO avatar  avatar Mohamad Jahani avatar taaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssssssssssky avatar Arek Bartnik avatar Ivonaldo Amaral avatar Tony avatar Jen Pineda avatar Papageorgiou Nikos avatar Julien Cavaleiro avatar Ivan Vinokurov avatar Gaurav Burjwal avatar  avatar Martin Carlsson avatar Tom Bazarnik avatar Italo Alves avatar Denis Avakov avatar Martin Simon avatar  avatar

Watchers

 avatar Luiz Eduardo de Oliveira Fonseca avatar kwadwo boateng avatar Martin Carlsson avatar Mikhaël Aubut avatar YoungTaek avatar Vinicius Ianni avatar Santosh Sahoo avatar Joao Correia avatar Willian Ribeiro Angelo avatar  avatar Alex avatar Chris Boothe avatar  avatar Yared Getachew avatar ajatula avatar Silviu avatar Blake Rowley avatar Huzum avatar  avatar Reksmey avatar 莫蒂奇 avatar

openpanel's Issues

Feedback after the first week of using the app

A bit of context: I'm using Plausible right now, but it's too simple for my liking, wanted to try Mixpanel, but their client-side tracker is in an absolutely awful state, was breaking my app, so ended there.

First of all, I'm really happy and will keep using it, see so much potential in it, and would say it's already better than other "mature" tools on the market.

Setup

  1. In general the setup was nice and easy.
  2. Nice it's a npm package, one less thing to worry about being blocked. But it will be worth to better describe the difference between Web SDK and JavaScript SDK.
  3. I couldn't figure out how to proxy sending events (to prevent being blocked), in Plausible it's simple, because there is just one endpoint that takes it all, and it's nicely documented. There seems to be multiple endpoints, and no docs. I tried for like 30 min, it was failing in a weird way, so just moved forward, it's not a dealbreaker for now.
  4. I think it would be nice to get multiple domains assigned per a single client, and just one token per project. Now I have two client IDs for one project, just because otherwise it won't work in dev, while all the events are being sent in the same way anyway, and I can't tell which one is from dev, which from prod.
  5. It would be nice to have some local storage flag or something similar, that will prevent tracking my own events, without completely disabling the tracking script, but for example, just log stuff in the console.

Events

  1. Thank you so much for not forcing people to manually register each event the app is sending, it is so much better when you just catch whatever is being sent.
  2. Really like to have setProfileId and track all events related to a given register user, but it would be great to merge guest and register user profiles together, now they both seem to get all the events. It looks like it doesn't affect the overall stats in any way, but for example, if I want to check a given profile that purchased something, from a funnel in the dashboard, it opens me profile with the autogenerated ID, not with the ID that I've assigned, so it's extra work to track which user on my end was it.
  3. In the view listing all events from a single profile, the pagination doesn't work, it always shows the latest events.
  4. Personally find it really weird that profiles have first and last name, and those names are randomly generated if not set. I don't think anyone should send that type of data to the analytics system, I don't even ask users for such stuff, so I'd prefer to keep it just as an ID, and keep it as another property of the event, not a specially exposed thing.
  5. I don't think it's that important to inform every dashboard user about every new event live. Make it a special view to watch it live or something, but keep it disabled by default, I guess your hardware will thank you for that 😅

Dashboards

  1. It would be great to have a way to have a filter that can distinguish people who got some random profile ID (guests) from those that got it manually assigned ID (registered users).
  2. In a funnel view, when I click "Inspect" it basically never shows the same number of profiles that the "Current" indicates, usually shows more, but here are cases when shows less, or nothing.

Profiles

  1. It would be great to be able to find a given profile by ID, I know I can just manually drop this in URL, but some simple input for that will be nicer.

Bugs

  1. Today, when I was logging it with Google, I ended up on some dead, empty Clerk redirect page. Had to manually go back to the login page, and the second time it was okay. Not sure if that was even something wrong on your end, but better to know something was off, than not.

Payments

I know that during the beta everything is free, but I'd be much happier to send you the money, than give them to Plausible.
So if there is a way to do a donation or something like this, please let me know.


It's way longer that I initially thought it will be, but hope it will be helpful for you anyway 😅

React Native client not working

Tried adding OP to RN today, following documentation but am getting:

iOS Bundling failed 34ms (../../node_modules/expo-router/entry.js)
Unable to resolve "expo-application" from "../../node_modules/@openpanel/react-native/dist/index.js"

When i try using it as:

import { Openpanel } from "@openpanel/react-native";

export const op = new Openpanel({
  clientId: process.env.EXPO_PUBLIC_OPENPANEL_CLIEND_ID as string,
  clientSecret: process.env.EXPO_PUBLIC_OPENPANEL_CLIEND_SECRET as string,
});

@openpanel/[email protected]
expo at 51.0.10

Question: How do I set a profileId?

Hi,

I'm using the HTTP API directly. Unfortunately, there is no mention of how to set the user that is responsible for the event. I tried checking out the SDKs js code, but it's only distributed in minified form, so no luck there either 😅
Can you help out?

Thanks,
Chris

Feedback for “Next.js”

Hey I am building into openpanel nextjs library and I can't get trackEvent('my_event', { foo: 'bar' }); to work.

I keep getting "window.op is not a function"

"Your dashboards" sidebar section styles for longer names are broken

How it looks right now:
CleanShot 2024-05-28 at 11 14 40

How I think it should looks like:
CleanShot 2024-05-28 at 11 14 24

In my opinion, the project name in this place is simply not necessary, because from what I see there in no way to list dashboards from multiple projects, so simply removing it is the easiest way to fix the problem of funky look.

Add operators in filters

Hi,

A feature that would really elevate the analytics capabilities of openpanel would be operators for property filters.

CleanShot 2024-06-07 at 16 11 36@2x

For example, my page has a /blog route with different articles underneath. I would like to filter by all blog paths, so I would filter by "path contains 'blog'"

Some operators that come to my head right away are

  • is (exists already)
  • is not
  • contains
  • contains not
  • starts with
  • ends with

This is probably quite a big endeavour because some properties might need different operators. For example created_at would only really need "is" and "is not" - but could use different operators like "before" and "after".

Would love to work on this myself some time but I don't have a local environment running. Could also help with conceptualising this idea.

401 Unauthorized when using Rest API

Hello, giving this a try via the Rest API and I am immediately getting a 401 Unauthorized. I omitted the client secret for security reasons. Here is the log from Postman for the request that I copied from the docs.

image

--Postman Log--
POST /event HTTP/1.1
content-type: application/json
openpanel-client-id: f5ddae6d-caf5-492c-bb41-43e0fc25d3e2
openpanel-client-secret: <SECRET_OMIT>
User-Agent: PostmanRuntime/7.37.3
Accept: /
Cache-Control: no-cache
Postman-Token: a3298bb7-aa18-46ac-9ee5-8a8210cfe27e
Host: api.openpanel.dev
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Length: 85

{"name":"my_event","properties":{"foo":"bar"},"timestamp":"2024-05-22T08:42:54.319Z"}

HTTP/1.1 401 Unauthorized
Date: Thu, 23 May 2024 15:54:06 GMT
Content-Length: 0
Connection: keep-alive
access-control-allow-origin: *
access-control-allow-credentials: true
CF-Cache-Status: DYNAMIC
Report-To: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=4CyDfFF5fmGh4gjkklDeW5UgpML0HSRO4l5MrMZaMY5dV8O50DAHXILvRVByQyvwn8kpWR96%2Bc%2Bn1M%2FtqdVMuQLnHSdsWjWjQZWCnkWiTrIoDboTtEpJlE0lPfNCPLoq0A%2B9ZQ%3D%3D"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Server: cloudflare
CF-RAY: 888638fd4afe5ec6-PDX
alt-svc: h3=":443"; ma=86400

"Something went wrong" when trying to open a profile

Steps to reproduce:

  1. Open https://dashboard.openpanel.dev/[your-project-id]/profiles
  2. Click on any listed profile
  3. New view will briefly open, showing whole layout, some loading placeholders etc. and then it will turn into white page with just "Something went wrong". Back button changes the URL correctly, but the page remains unchanged, the only solution is to force refresh.

In the console, I can see this error:

Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

There are no failed requests, but the last one listed in the devtools, sent to
https://api.openpanel.dev/trpc/reference.getChartReferences have almost empty response {"result":{"data":{"json":[]}}}

UTM source not working?

First of all, awesome project. I'm really liking it so far.

I'm trying to understand if there's an issue with UTM tags because i have a link like the following https://mysite.com?utm_source=reddit&utm_medium=cpc&utm_campaign=c_1 and i don't see anything coming up in the OpenPanel dashboard when i visit that url. Everything else seems to be working correctly.

Uncaught TypeError: Cannot read properties of undefined (reading 'bind')

i am having this error that keep appearing in the console after i add openpanel with GTM

<script src="https://openpanel.dev/op.js" defer async></script> <script> window.op = window.op || function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } (window.op.q = window.op.q || []).push(args); }; window.op('ctor', { clientId: '1111111111111111111', trackScreenViews: true, trackOutgoingLinks: true, trackAttributes: true }); </script>

site : https://nexus-security.github.io

VM113 op.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
at r.op (VM113 op.js:1:4330)
at :1:147
at gtm.js?id=GTM-5X67X4Q4:445:427
at HTMLScriptElement. (gtm.js?id=GTM-5X67X4Q4:446:131)

Bug: Renaming organization breaks the project picker

openpanel-switch-project.mp4

Hi,

I renamed my organization a while ago. I assume this broke the project picker for me. To debug this, it might be helpful to look at the URL.

I don't remember exactly but I think the previous organization name was zenquiz

How to use next12?

<Html lang="zh-CN">
      <Head>
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <OpenpanelProvider
          clientId="xxxx"
          trackScreenViews={true}
          trackAttributes={true}
          trackOutgoingLinks={true}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
 </Html>

I tried this but it didn't work

Python SDK

Hey guys.

Happy to see the project take off and having traction.
Is there any python SDK available? Would be great to integrate with django/flask web-servers

Seed data

It would be so good to have some dummy data and see how the app looks and feels around.
Also this will help new contributors to understand the app better by looking at the data.

@lindesvard

Feedback for “API”

Hi there,

I really love Openpanel. We have a lot of Laravel projects, and a couple of days ago I thought there was an integration for that on the main site. Unfortunately, it is critical for us to send events and stats via Laravel (PHP) since some applications don't have a frontend.

What is the current state of a PHP (Laravel) SDK? Did I miss something?

Thank you!

Haunted event in report events picker

Screen.Recording.2024-08-16.at.10.30.38.mov
  1. It removes the wrong event when trying to remove the "haunted" event, then the whole UI becomes unresponsive.
  2. If I remove some other "not-haunted" event, the "haunted" event UI becomes unresponsive, but when I close the window without saving changes and reopen it without page refresh, the "haunted" event got removed anyway.

I kinda don't know how to describe it more precisely, so "haunted" seems to be the most accurate name I can come with 😅

Differences with plausible

Hi @lindesvard I've discovered your project swimming in github (congratulations), I'm using plausible right now, and looking into your demo, it seems almost the same (at least regarding UI). I read through your web text that you like the plausible simplicity, but from the user point of view, the first time we look at to your product is almost a fork.

May you please elaborate the differences of your product with plausible product in a simple list? Also, as a recommendation I would add this list to your product web.
thanks

P.S: I also let this request as a issue so anybody could find the differences right away in case they think the same

Error Loading Resources - 401 Unauthorized and 404 Not Found

We are encountering issues related to loading resources in our current implementation. The errors are primarily 401 Unauthorized and 404 Not Found, as well as Source Map loading errors in Safari

Error Details:

1.	401 Unauthorized:
•	URL: https://api.openpanel.dev/track
•	Issue: The server responded with a status of 401, which indicates an unauthorized request.

2.	404 Not Found:
•	URLs:
•	https://openpanel.dev/tracker.global.js.map
•	https://openpanel.dev/tracker.global.js.map
•	Issue: The server responded with a status of 404, which indicates the requested resource could not be found.

3.	Source Map Loading Errors:
•	Error: Source Map-Ladefehler
•	URLs: Same as above, related to the 404 errors for source maps.

Embed Code Snippet:

<Script id="openpanel-init" strategy="afterInteractive">
  {`
    window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
    window.op('init', {
      clientId: '<client-id>',
      trackScreenViews: true,
      trackOutgoingLinks: true,
      trackAttributes: true,
    });
  `}
</Script>
<Script 
  src="https://openpanel.dev/op1.js" 
  strategy="afterInteractive"
/>
Bildschirmfoto 2024-09-02 um 17 36 21

Feedback for “Script tag”

Where you show how to configure the possible tracker options, you don't explain what trackAttributes is or does?

I think screenViews and outgoingLinks are pretty self-explanatory, but what is an attribute in this context? Why would I want to track that? I would suggest including some examples of what attributes are.

Issue in reports

I've created a report with two events and encountered a couple of issues

  • both A and B use the same event but I've applied filtered based on path, this causes the chart to only show results for event B
  • then I tried to give a specific name to each of them which worked, now I have one line for A and one for B, the problem is that on save, it doesn't stick. when I come back it's back to both of them having no "name" and only one line showing.

Let me know if you need more infos

Feedback on user profile list of events

When viewing a user profile, the list of events at the bottom is a live feed of everybody. Shouldn't it be a historical list of events for this specific user?

Dart SDK

Hello, love the idea of this product. What is the likelihood of adding a Dart SDK? This would be great to have for integrations into Flutter apps.

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.