PHPackages                             carlosedu011brasil/laravel-recorder-logger - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Logging & Monitoring](/categories/logging)
4. /
5. carlosedu011brasil/laravel-recorder-logger

ActiveLibrary[Logging & Monitoring](/categories/logging)

carlosedu011brasil/laravel-recorder-logger
==========================================

Componente Vue para gravação de tela com logger embutido (console, requests, erros, rotas)

1.3.4.8(9mo ago)147MITVue

Since Jul 24Pushed 9mo agoCompare

[ Source](https://github.com/carlosedu011brasil/laravel-recorder-logger)[ Packagist](https://packagist.org/packages/carlosedu011brasil/laravel-recorder-logger)[ RSS](/packages/carlosedu011brasil-laravel-recorder-logger/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (41)Used By (0)

Laravel Recorder Logger
=======================

[](#laravel-recorder-logger)

Componente Vue para gravação de tela com logging embutido. Instalável via Composer e integrável com aplicações Laravel utilizando Inertia.js ou SPA com Vue 3.

Instalação
----------

[](#instalação)

1. Requisite o pacote via Composer:

```
composer require carlosedu011brasil/laravel-recorder-logger
```

2. Publique os arquivos do componente:

```
php artisan vendor:publish --tag=recorder-components
```

Estrutura do Projeto
--------------------

[](#estrutura-do-projeto)

O pacote disponibiliza:

- `resources/js/Components/Recorder.vue`: componente Vue completo
- `src/RecorderLoggerServiceProvider.php`: Service Provider responsável pela publicação dos assets
- `composer.json`: metadata e autoload do pacote

Importação
----------

[](#importação)

Após a publicação dos arquivos, importe e utilize o componente diretamente em seu projeto Vue 3:

```
import Recorder from '@/Components/Recorder.vue'
```

```

```

Funcionalidade
--------------

[](#funcionalidade)

Este componente oferece uma solução completa para capturar sessões do usuário, incluindo gravação de tela e coleta de logs técnicos, com objetivo de auxiliar em processos de suporte, QA ou análise de erros em produção.

### Gravação de Tela

[](#gravação-de-tela)

- Utiliza `navigator.mediaDevices.getDisplayMedia()` para capturar vídeo e áudio da aba, janela ou tela.
- Controlado por `MediaRecorder`, com suporte a pausa, retomada e parada da gravação.
- Timer visível durante a gravação.
- Ao finalizar, o vídeo é convertido para `Blob` e disponibilizado via URL para visualização prévia.

### Logger embutido

[](#logger-embutido)

Durante a gravação, os seguintes eventos são interceptados e armazenados em um objeto logger:

#### Troca de Rotas

[](#troca-de-rotas)

- Acompanha alterações de rota utilizando `history.pushState`, `history.replaceState` e `popstate`.
- Cada mudança de rota é registrada com timestamp e URL.

#### Requisições HTTP

[](#requisições-http)

Interceptação de requisições via:

- `fetch()`
- `XMLHttpRequest`

Cada requisição registrada inclui tipo, método, URL, status e data/hora.

#### Logs do Console

[](#logs-do-console)

Interceptação dos seguintes métodos:

- `console.log`
- `console.warn`
- `console.error`
- `console.info`

Cada log inclui tipo, argumentos passados e horário.

#### Erros Globais

[](#erros-globais)

Captura de erros não tratados:

- `window.onerror`
- `window.onunhandledrejection`

Todos os erros são armazenados com mensagem, linha, coluna e arquivo de origem.

### Estrutura do Output

[](#estrutura-do-output)

Ao finalizar a gravação, o componente gera um objeto com a seguinte estrutura:

```
{
  "descricao": "Texto digitado pelo usuário no textarea",
  "videoUrl": "blob:",
  "logs": {
    "StartpageUrl": "URL inicial da gravação",
    "visitedRoutes": [...],
    "console": [...],
    "errors": [...],
    "requests": [...]
  }
}
```

Este objeto é exibido no console para exportação manual ou uso posterior.

Estilização
-----------

[](#estilização)

O componente utiliza SCSS encapsulado com tema escuro por padrão. Botões possuem estados distintos para iniciar, pausar, continuar e parar a gravação. Pode ser personalizado conforme o tema do projeto principal.

Dependências
------------

[](#dependências)

- Vue 3 (Composition API)
- Suporte a browsers modernos que implementem `MediaRecorder` e `getDisplayMedia`

Considerações
-------------

[](#considerações)

Este componente é indicado para uso em ambientes de desenvolvimento, homologação ou produção com consentimento explícito do usuário, devido à natureza da gravação de tela e coleta de dados.

Licença
-------

[](#licença)

Este projeto está licenciado sob a licença MIT.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance57

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

40

Last Release

285d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6dcfb1d1dd202457b921b9a8351c18a497e03037cab136e401409b34b43d542a?d=identicon)[carlosedu011brasil](/maintainers/carlosedu011brasil)

---

Top Contributors

[![carlosedu011brasil](https://avatars.githubusercontent.com/u/215566126?v=4)](https://github.com/carlosedu011brasil "carlosedu011brasil (39 commits)")

### Embed Badge

![Health badge](/badges/carlosedu011brasil-laravel-recorder-logger/health.svg)

```
[![Health](https://phpackages.com/badges/carlosedu011brasil-laravel-recorder-logger/health.svg)](https://phpackages.com/packages/carlosedu011brasil-laravel-recorder-logger)
```

###  Alternatives

[psr/log

Common interface for logging libraries

10.4k1.2B9.2k](/packages/psr-log)[itsgoingd/clockwork

php dev tools in your browser

5.9k27.6M94](/packages/itsgoingd-clockwork)[graylog2/gelf-php

A php implementation to send log-messages to a GELF compatible backend like Graylog2.

41838.2M138](/packages/graylog2-gelf-php)[bugsnag/bugsnag-psr-logger

Official Bugsnag PHP PSR Logger.

32132.5M2](/packages/bugsnag-bugsnag-psr-logger)[consolidation/log

Improved Psr-3 / Psr\\Log logger based on Symfony Console components.

15462.2M7](/packages/consolidation-log)[datadog/php-datadogstatsd

An extremely simple PHP datadogstatsd client

19124.6M15](/packages/datadog-php-datadogstatsd)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)