https://github.com/rastmob/report-from-website
Angular library component that allows users to report issues they encounter, along with screenshots and logs, to a specified server endpoint. This library is particularly useful for gathering user feedback and debugging information in a visual format, helping development teams better understand and resolve issues.
https://github.com/rastmob/report-from-website
angular bug bugreport bugs javascript library reporting screenshot widget
Last synced: 5 months ago
JSON representation
Angular library component that allows users to report issues they encounter, along with screenshots and logs, to a specified server endpoint. This library is particularly useful for gathering user feedback and debugging information in a visual format, helping development teams better understand and resolve issues.
- Host: GitHub
- URL: https://github.com/rastmob/report-from-website
- Owner: rastmob
- Created: 2024-11-11T11:11:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-12T11:00:30.000Z (over 1 year ago)
- Last Synced: 2025-09-29T20:54:45.667Z (9 months ago)
- Topics: angular, bug, bugreport, bugs, javascript, library, reporting, screenshot, widget
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/report-from-website
- Size: 172 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Report From Website - JavaScript Library
## Overview
`report-from-website` is a **pure JavaScript** library that allows you to capture essential state information (like the URL, user agent, timestamp) and send it to a backend API. It's typically used for error reporting or logging user activity in the background.
The library is designed to be **easy to use** and can be integrated into any web project (including Angular, React, or plain HTML).
### Key Features:
- Capture the current **URL** of the page.
- Capture the **user agent** (browser details).
- Capture a **timestamp** of when the report is triggered.
- **Send data** to a custom endpoint via a **POST request**.
- **Capture a screenshot** of the current page using **html2canvas**.
## Installation
To include this library in your project, you can either download the raw JavaScript file or install it via npm (if published).
### Option 1: Download the raw JavaScript file
- Download `report-from-website.js` from the **dist/** folder and include it in your project.
### Option 2: Install via npm
```bash
npm install report-from-website
```
## Usage
### 1. Include the Library in Your Project
#### **Option 1: In HTML**
```html
```
#### **Option 2: In JavaScript Module (ESM or CommonJS)**
```javascript
import ReportFromWebsite from 'report-from-website'; // If installed via npm
// Initialize the report functionality
const report = new ReportFromWebsite('#reportButton', '/custom/log'); // URL is optional
```
### 2. HTML Button to Trigger the Report
Add a button to your HTML that will trigger the report:
```html
Send a Report
```
### 3. Handling the Report Data
When the button is clicked, the library will send the data to the provided URL (default is `/error/log`). You can replace the default URL with any custom endpoint.
## Example Usage
**HTML Example**:
```html
Report From Website Example
Send a Report
// Initialize the library with the button selector and optional URL for reporting
const report = new ReportFromWebsite('#reportButton', 'https://yourwebsite.com/error/log');
```
### 4. Backend Example (Node.js/Express)
```javascript
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json({ limit: '50mb' })); // Ekran görüntüsünün büyük olabileceğini dikkate alarak
app.post('/error/log', (req, res) => {
console.log('Received report data:', req.body); // Gelen veriyi kontrol et
// Eğer screenshot varsa, base64 resmini işleyebilirsiniz (örneğin kaydedebilir ya da işleyebilirsiniz)
if (req.body.screenshot) {
console.log('Screenshot data received:', req.body.screenshot);
}
res.status(200).json({ message: 'Report received successfully!' });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
```
## License
MIT License. See `LICENSE` for more information.
## Contributing
Contributions are welcome! Please fork this repository, make changes, and submit a pull request.
---
Feel free to reach out if you have any questions or need support. Thank you for using `report-from-website`!