getsentry / sourcemaps.io Goto Github PK

View Code? Open in Web Editor NEW

58.0 30.0 20.0 2.88 MB

Web-based Source Map validator

Home Page: https://sourcemaps.io/

License: Apache License 2.0

JavaScript 32.07% HTML 5.33% CSS 0.46% Makefile 4.32% TypeScript 57.82%

source-maps javascript google-cloud-functions node-js tag-production

sourcemaps.io's Introduction

sourcemaps.io

A re-write of sourcemap-validator using React, Node, and Google Cloud Functions.

sourcemaps.io is a web application that takes a URL for a target transpiled/minified JavaScript file (e.g. https://example.com/js/app.min.js), and verifies:

sourceMappingURL or [X-]SourceMap header is present
Both the transpiled/minified file and source map file are reachable via HTTP
The resolved source map is valid JSON, and parses using Mozilla's source-map library
Lines and columns line up as expected
... and more, see tests

Development

Run tests

make test

Run a local server for client (React) development

make client-server

Run a local server for backend development

A local development server will serve the validation function for development.

make backend-server

NOTE: Right now the local server still writes JSON reports to a production Google Cloud Storage bucket. You must have the following shell variables exported (see Deploy to Google Cloud Platform below).

export GCLOUD_PROJECT=myproject-server
export GCLOUD_DATA_BUCKET=myproject-reports
make backend-server

Deploy to Google Cloud Platform

This repository is already configured to automatically deploy to https://sourcemaps.io. But for posterity, this documents how to configure your own Google Cloud deployment environment and how to use the deploy scripts.

Configure your Project

Create a new project in Google Cloud Platform, e.g. myproject
Enable Cloud Functions
Create 3 buckets in Cloud Storage, for:
1. staging the cloud function (e.g. myproject-server)
2. storing report data (e.g. myproject-reports)
3. storing static web content (e.g. myproject-web)

NOTE: Your deployed cloud function must be configured to use Cloud Functions Node 10 runtime (or newer).

Install the gcloud CLI

Follow Google Cloud's instructions for installing the gcloud CLI.

Deploying

First authenticate with Google Cloud Platform:

gcloud auth login

Then initiate the deploy:

# Used for deploy
export GCLOUD_PROJECT=myproject
export GCLOUD_APP_BUCKET=myproject-server
export GCLOUD_DATA_BUCKET=myproject-reports
export GCLOUD_WWW_BUCKET=myproject-web
export GCLOUD_SERVICE_KEY=<base64 encoded service-key json object>

# Used for reporting errors back to your sentry instance:
export REACT_APP_SENTRY_DSN=https://[email protected]/1
export SENTRY_DSN=https://[email protected]/1

# Used for creating a new release in your sentry instance:
export SENTRY_AUTH_TOKEN=sntrys_abcxyz
export SENTRY_CLIENT_PROJECT=MY-PROJECT
export SENTRY_ORG=MY-ORG

make deploy

NOTE: The deploy script will set READ permissions on GCLOUD_DATA_BUCKET and GCLOUD_WWW_BUCKET.

Invoking the Serverless Function

The deployed serverless function is publicly accessible over HTTP. To trigger the function manually, do:

$ curl -X GET "https://${region}-${GCLOUD_PROJECT}.cloudfunctions.net/validateSourceFile?url=http://example.org/static/app.js"

sourcemaps.io's People

Contributors

Stargazers

Watchers

Forkers

michaelficarra tonyo robopsi exhorder forklifters isabella232 justingrant theycallmejpo tiagoad tryweirdier sitedata

sourcemaps.io's Issues

Automatically prefix http/https when omitted

If you try to enter www.example.com/file.js it chokes.

Support inline data URL source maps

When I try to debug a source map that an inline data URL source map, I get UnableToFetchSourceMapError.

Is support for inline source maps planned?

Same as mattrobenolt/sourcemap-validator#12

Handle ECONNREFUSED errors

e.g. URLs that point to 127.0.0.1.

Right now the app silently logs this error (source) but never invokes the request callback, so it never provides feedback to the user that the address is unreachable.

Example from logs:

{ Error: connect ECONNREFUSED 127.0.0.1:8080 at Object.exports._errnoException (util.js:1020:11) at exports._exceptionWithHostPort (util.js:1043:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14) code: 'ECONNREFUSED', errno: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 8080 }

We should probably just have a generic UnknownRequestError report item.

Handle webpack:// URI source map entries

Webpack generates source maps with external file URI that are prefixed with webpack://, e.g. webpack:///app/javascript/index.js. AFAICT, these are symbolic references to sources that existed on the users local filesystem, but are probably not on the web.

The tool is currently trying to download these, resulting in errors like:

Error: Invalid protocol: webpack: at Request.init

See discussion in webpack/webpack#2395

`sourcemapsio-www` Hard-Coded in Makefile

The sroucemapsio-www bucket is hard-coded in the Makefile. Perhaps it needs to read:

diff --git a/Makefile b/Makefile
index 2e268c2..991eae4 100644
--- a/Makefile
+++ b/Makefile
@@ -61,7 +61,7 @@ deploy-config: echo-exports
 # Deploy static website
 deploy-www: deploy-config build-www
        gsutil -m rsync -R -d client/build gs://${GCLOUD_WWW_BUCKET}
-       gsutil web set -e index.html gs://sourcemapsio-www
+       gsutil web set -e index.html gs://${GCLOUD_WWW_BUCKET}
        gsutil acl ch -u AllUsers:R gs://${GCLOUD_WWW_BUCKET}

headless chrome + puppeteer: grab all the scripts loaded on the page, fetch the code, look for source map url
use Lighthouse with -G and load .SourceMaps from the artifacts written to disk. This is also using headless chrome, but Lighthouse does all the heavy lifting for you.

sourcemaps.io incorrectly throws a SourceMapNotFoundError on my CSS

Environment

How do you use Sentry?
Sentry SaaS (sentry.io) or self-hosted/on-premise (which version?)

Which SDK and version?
e.g: JavaScript 5.11.1, .NET 1.2.0

Steps to Reproduce

Go to https://sourcemaps.io/.
Enter http://www.ternaviationgroup.dreamhosters.com/wp-content/themes/tern-aviation-group/dist/css/app.css as the URL.
Click Validate.

Expected Result

Anything but a SourceMapNotFoundError.

Actual Result

It says "SourceMapNotFoundError: Unable to locate a source map in http://www.ternaviationgroup.dreamhosters.com/wp-content/themes/tern-aviation-group/dist/css/app.css". Under Resolutions it includes "Add a//# sourceMappingURL= declaration". If you look at the CSS source it has a sourceMappingURL= declaration at the end: /*# sourceMappingURL=app.css.map */. The URL http://www.ternaviationgroup.dreamhosters.com/wp-content/themes/tern-aviation-group/dist/css/app.css.map is valid. Does it need to be an absolute path?

Handle Typescript Decorators

Sourcemaps.io seems to not handle Typescript Decorators like @.

SaaS Customer wrote in and would like to see support for this

Switch `source-map` to `@jridgewell/trace-mapping`

https://www.npmjs.com/package/@jridgewell/trace-mapping